{ const targetSocket = userSockets.get(data.userToCall.toString()); targetSocket.emit("ca" /> { const targetSocket = userSockets.get(data.userToCall.toString()); targetSocket.emit("ca" /> { const targetSocket = userSockets.get(data.userToCall.toString()); targetSocket.emit("ca"/>

using simple peer and socket.io for video chat functionality on two different sites using

128 Views Asked by At

server code handling sockets

  socket.on("callUser", (data) => {
    const targetSocket = userSockets.get(data.userToCall.toString());
    targetSocket.emit("callUser", {
      signal: data.signalData,
      from: data.from,
    });
  });

  socket.on("answerCall", (data) => {
    const targetSocket = userSockets.get(data.to.toString());
    targetSocket.emit("callAccepted", data.signal);
  });

video chat code.

//imports removed to reduce code

const VideoChatContext = createContext()

function VideoChatContextProvider({ children }) {
  //state and ref variables removed to reduce code

  const answerCall = (from, signal) => {
    setCallAccepted(true)
    const peer = new Peer({ initiator: false, trickle: false, stream })
    peer.on('signal', data => {
      socket.emit('answerCall', { signal: data, to: from })
    })
    peer.on('stream', currentStream => {
      userVideo.current.srcObject = currentStream
    })
    peer.signal(signal)
    connectionRef.current = peer
  }

  useEffect(() => {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then(currentStream => {
        setStream(currentStream)
        myVideo.current.srcObject = currentStream
      })

    socket.on('callUser', ({ from, signal }) => {
      setCall({ isReceivingCall: true, from, signal })
      answerCall(from, signal)
    })
  }, [])

  const callUser = id => {
    const peer = new Peer({ initiator: true, trickle: false, stream })
    peer.on('signal', data => {
      socket.emit('callUser', {
        userToCall: id,
        signalData: data,
        from: getUserId(),
      })
    })
    peer.on('stream', currentStream => {
      console.log('stream', currentStream)
      userVideo.current.srcObject = currentStream
    })
    socket.on('callAccepted', signal => {
      setCallAccepted(true)
      peer.signal(signal)
    })
    connectionRef.current = peer
  }

  return (
    //removed to reduce code
  )
}
export { VideoChatContextProvider, VideoChatContext }

Site 2 is using similar code to site 1 without callUser. The socket events are working and site 2 works but am not able to get the video stream from site 2 to site 1. peer.on('stream') is not firing.

getUserId() is from useAuthState.

callEnded, callAccepted, and stream are useState.

myVideo, userVideo and connectionRef are useRef.

0

There are 0 best solutions below