#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. @Камиль Яновский