TypeError: Cannot read properties of undefined (reading 'call') #942
Description
What version of this package are you using? "simple-peer": "^9.11.1",
What operating system, Node.js, and npm version?
Node.js version v20.9.0
npm version v10.1.0
What happened?
i used the library as the docs say but i am getting the below error, any suggestion would be appreciated thanks in advance!
simple-peer.js?v=59db85ac:4087 Uncaught
TypeError: Cannot read properties of undefined (reading 'call')
at _Peer.Readable (simple-peer.js?v=59db85ac:4087:14)
at new Duplex (simple-peer.js?v=59db85ac:3405:16)
at new _Peer (simple-peer.js?v=59db85ac:5021:9)
at callUser (SocketContext.jsx:61:28)
at onClick (Options.jsx:86:102)
at HTMLUnknownElement.callCallback2 (chunk-6VWAHX6D.js?v=59db85ac:3674:22)
at Object.invokeGuardedCallbackDev (chunk-6VWAHX6D.js?v=59db85ac:3699:24)
at invokeGuardedCallback (chunk-6VWAHX6D.js?v=59db85ac:3733:39)
at invokeGuardedCallbackAndCatchFirstError (chunk-6VWAHX6D.js?v=59db85ac:3736:33)
at executeDispatch (chunk-6VWAHX6D.js?v=59db85ac:7014:11)
and here is my implementation for reference
SocketContext.jsx
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", {
userToCall: id,
signalData: data,
from: me,
name,
});
});
peer.on("stream", (currentStream) => {
console.log(currentStream);
userVideo.current.srcObject = currentStream;
});
socket.on("callAccepted", (signal) => {
setCallAccepted(true);
peer.signal(signal);
});
connectionRef.current = peer;
};
const leaveCall = () => {
setCallEnded(true);
connectionRef.current.destroy();
window.location.reload();
};
return (
<SocketContext.Provider
value={{stream,me,name,setName,call,callAccepted,callEnded,myVideo,userVideo,answerCall,callUser,leaveCall}}
>
{children}
</SocketContext.Provider>
);
};
export { SocketContext, SocketContextProvider}