WebRTC video streaming is working in firefox but not in chrome

Question

I am making a simple video-calling app using webRTC. Everything is working as expected in firefox. But in chrome and opera the remote-stream is not showing up on any side(ca

Answer 1

Try to request user media before creating peer connection:

useEffect(() => {
  const getUserMedia = async () => {
      const mediaConstraints = {
        video: true,
        audio: true,
      };

      try {
        const stream = await navigator.mediaDevices.getUserMedia(
          mediaConstraints,
        );

        localVideo.current.srcObject = stream;
      } catch (error) {
        console.error(error);
      }
    };

    getUserMedia();
  }, []);

Also, the onnegotiationneeded event fires twice in the your code (on caller and callee side). You should create offer only on the caller side.

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded