Ошибка типа: Прототип объекта может быть только объектом или нулем

#javascript #node.js #reactjs #express #heroku

Вопрос:

Мое приложение Expressjs React продолжает получать эту ошибку: Ошибка типа: Прототип объекта может быть только объектом или нулем: webclient/src/room/room.js

Node.js Версия: 14.18

npm: 6.14.15

Я запускаю это на Heroku nodemon, я пытаюсь создать клиент аудио/видео чата, который использует WebRTC и socket.io

Это то, что мое room.js похоже на

 import React, { useEffect, useRef, useState } from "react";
import io from "socket.io-client";
import Peer from "simple-peer";
import styled from "styled-components";

const Container = styled.div`
  padding: 20px;
  display: flex;
  height: 100vh;
  width: 90%;
  margin: auto;
  flex-wrap: wrap;
`;

const StyledVideo = styled.video`
  height: 40%;
  width: 50%;
`;

const Video = (props) => {
  const ref = useRef();

  useEffect(() => {
    props.peer.on("stream", (stream) => {
      ref.current.srcObject = stream;
    });
  }, []);

  return <StyledVideo playsInline autoPlay ref={ref} />;
};

const videoConstraints = {
  height: window.innerHeight / 2,
  width: window.innerWidth / 2,
};



const Room = (props) => {
  const [peers, setPeers] = useState([]);
  const socketRef = useRef();
  const userVideo = useRef();
  const peersRef = useRef([]);
  const roomID = props.match.params.roomID;

  useEffect(() => {
    async function getMedia(constraints) {
        let stream = null;
      
        try {
          stream = await navigator.mediaDevices.getUserMedia(constraints);
          userVideo.current.srcObject = stream;
          socketRef.current.emit("join room", roomID);
          socketRef.current.on("all users", (users) => {
            const peers = [];
            users.forEach((userID) => {
              const peer = createPeer(userID, socketRef.current.id, stream);
              peersRef.current.push({
                peerID: userID,
                peer,
              });
              peers.push(peer);
            });
            setPeers(peers);
          });
      
          socketRef.current.on("user joined", (payload) => {
            const peer = addPeer(payload.signal, payload.callerID, stream);
            peersRef.current.push({
              peerID: payload.callerID,
              peer,
            });
      
            setPeers((users) => [...users, peer]);
          });
      
          socketRef.current.on("receiving returned signal", (payload) => {
            const item = peersRef.current.find((p) => p.peerID === payload.id);
            item.peer.signal(payload.signal);
          });
        } catch (err) {
          /* handle the error */
        }
      }
    socketRef.current = io.connect("localhost:8080");
    getMedia(videoConstraints);
  }, []);

  function createPeer(userToSignal, callerID, stream) {
    const peer = new Peer({
      initiator: true,
      trickle: false,
      stream,
    });
    peer.on("signal", (signal) => {
      socketRef.current.emit("sending signal", {
        userToSignal,
        callerID,
        signal,
      });
    });

    return peer;
  }

  function addPeer(incomingSignal, callerID, stream) {
    const peer = new Peer({
      initiator: false,
      trickle: false,
      stream,
    });

    peer.on("signal", (signal) => {
      socketRef.current.emit("returning signal", { signal, callerID });
    });

    peer.signal(incomingSignal);

    return peer;
  }

  let isAudio = true;

  function muteAudio() {
    isAudio = !isAudio;

    userVideo.getAudioTracks()[0].enable = isAudio;
  }

  let isVideo = true;

  function muteVideo() {
    isVideo = !isVideo;

    userVideo.getVideoTracks()[0].enable = isAudio;
  }

  return (
    <Container>
      <StyledVideo muted ref={userVideo} autoPlay playsInline />
      {peers.map((peer, index) => {
        return <Video key={index} peer={peer} />;
      })}
    </Container>
  )
};



export default Room;
 

Пакет.json

 {
  "name": "witty-chat",
  "version": "0.2.7",
  "description": "WittyChat, the next generation videochat",
  "repository": "https://github.com/ArhumTheDeveloper/WittyChat-Beta-2",
  "homepage": "wittychatclient.com",
  "author": "Arhum Raja",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "add": "^2.0.6",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "nodemon": "^2.0.12",
    "socket.io": "^2.3.0",
    "synp": "^1.9.7"
  },
  "scripts": {
    "start": "PROD=true nodemon ./server.js"
  }
}
 

Комментарии:

1. Я в замешательстве… видите ли вы эту ошибку в бэкэнде или интерфейсе?

2. Интерфейс, я справился с внутренними проблемами

3. @Камиль Яновский