Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot read properties of undefined (reading 'call') #942

Open
aynuayex opened this issue Aug 27, 2024 · 0 comments
Open

TypeError: Cannot read properties of undefined (reading 'call') #942

aynuayex opened this issue Aug 27, 2024 · 0 comments

Comments

@aynuayex
Copy link

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}


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant