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 · 2 comments
Open

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

aynuayex opened this issue Aug 27, 2024 · 2 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}


@RahulKumar9988
Copy link

still showing same error

@aynuayex
Copy link
Author

@RahulKumar9988 currently the library is not maintained, the last published date is 3 years ago and it has dependencies including development dependencies which are outdated. I guess that is what is causing the error and I do not remember which package is causing that error.
since no one has answered my question, I tried using another libraries and peerjs(last published 8 month ago) has worked well for me and in case if you need to check it out, here is the repo.
feel free to star⭐, clone 👥 or fork 🍴 the repo.
and if there is anything you do not understand or got error ask me i will help you as much as i can asap.

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

2 participants