TypeError: 无法读取 undefined 的属性 (读取 'call')

作者: aynuayex创建于 2024年8月27日更新于 2025年1月31日

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

const SocketContext = createContext();

const socket = io("http://localhost:5000");

const SocketContextProvider = ({ children }) => { const [stream, setStream] = useState(null); const [me, setMe] = useState(""); const [name, setName] = useState(""); const [call, setCall] = useState({}); const [callAccepted, setCallAccepted] = useState(false); const [callEnded, setCallEnded] = useState(false);

const myVideo = useRef(); const userVideo = useRef(); const connectionRef = useRef();

useEffect(() => { navigator.mediaDevices .getUserMedia({ video: true, audio: true }) .then((currentStream) => { console.log(currentStream); currentStream && setStream(currentStream); if (myVideo?.current) { myVideo.current.srcObject = currentStream; } }); socket.on("me", (id) => setMe(id));

socket.on("callUser", ({ from, name: callerName, signal }) => {
  setCall({ isReceivingCall: true, from, name: callerName, signal });
});

}, []);

const answerCall = () => { setCallAccepted(true); const peer = new Peer({ initiator: false, trickle: false, stream });

peer.on("signal", (data) => {
  socket.emit("answerCall", { signal: data, to: call.from });
});

peer.on("stream", (currentStream) => {
  userVideo.current.srcObject = currentStream;
});

peer.signal(call.signal);

connectionRef.current = peer;

};

const callUser = (id) => { if (!stream) { console.error("Stream is not available"); return; }

const peer = stream && new Peer({ initiator: true, trickle: false, stream });

peer.on("signal", (data) => {
  console.log(data);
  socket.emit("callUser", {

内容来源: feross/simple-peer