我正在尝试在 youtube 教程的帮助下制作一个群组视频通话应用程序。我正在使用 react 和 socket io,但不知何故它给了我上述错误。无法理解我到底做错了什么。请纠正我。附上代码供参考:创建房间页面-首页
import React from "react";
import { v1 as uuid } from "uuid";
import { useNavigate } from "react-router-dom";
const CreateRoom = (props) => {
const navigate = useNavigate();
function create() {
const id = uuid();
//props.history.push(`/room/${id}`);
navigate(`/room/${id}`);
}
return (
<button onClick={create}>Create room</button>
);
};
export default CreateRoom;
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";
import { useParams } from "react-router-dom";
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([]);
let {roomID} = useParams();
console.log(roomID);
useEffect(() => {
socketRef.current = io.connect("http://localhost:8000");
navigator.mediaDevices
.getUserMedia({ video: videoConstraints, audio: true })
.then((stream) => {
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);
});
});
});
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;
}
return (
<Container>
<StyledVideo muted ref={userVideo} autoPlay playsInline />
{peers.map((peer, index) => {
return <Video key={index} peer={peer} />;
})}
</Container>
);
};
export default Room;
现在对于服务器端,这是我的服务器代码:
require('dotenv').config();
const express = require("express");
const http = require("http");
const app = express();
const cors = require("cors");
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);
const users = {};
const socketToRoom = {};
app.use(cors);
io.on('connection', socket => {
socket.on("join room", roomID => {
if (users[roomID]) {
const length = users[roomID].length;
if (length === 4) {
socket.emit("room full");
return;
}
users[roomID].push(socket.id);
} else {
users[roomID] = [socket.id];
}
socketToRoom[socket.id] = roomID;
const usersInThisRoom = users[roomID].filter(id => id !== socket.id);
socket.emit("all users", usersInThisRoom);
});
socket.on("sending signal", payload => {
io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: payload.callerID });
});
socket.on("returning signal", payload => {
io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id });
});
socket.on('disconnect', () => {
const roomID = socketToRoom[socket.id];
let room = users[roomID];
if (room) {
room = room.filter(id => id !== socket.id);
users[roomID] = room;
}
});
});
server.listen(process.env.PORT || 8000, () => console.log('server is running on port 8000'));
这是youtube教程的链接: