simple-peer webrtc error when trying to share screen

Question

I am building a video chat application using simple-peer where users can also share the screen. The flow of the app is such that when user A creates a room, he can grab the page url and share with user B. When user B joins, an initiator peer is created for him as seen here.

function createPeer(partnerID, callerID, stream) {
        const peer = new Peer({
            initiator: true,
            trickle: false,
            stream,
        });

        peer.on("signal", signal => {
            const payload = {
                partnerID,
                callerID,
                signal
            }
            socketRef.current.emit("call partner", payload);
        });

        peer.on("stream", handleStream);

        return peer;
    }

When user A gets the offer from user B, a non initiator peer is created for him as seen here.

function addPeer(incomingSignal, callerID, stream) {
        const peer = new Peer({
            initiator: false,
            trickle: false,
            stream,
        });

        peer.on("signal", signal => {
            const payload = {
                callerID,
                signal
            }
            socketRef.current.emit("accept call", payload);
        });

        peer.on("stream", handleStream);

        peer.signal(incomingSignal);
        return peer;
    }

Now when any user decides to share their screen, this function gets called.

 function shareScreen() {
        navigator.mediaDevices.getDisplayMedia().then(stream => {
            const track = stream.getTracks()[0];
            peerRef.current.removeStream(videoStream.current);
            peerRef.current.addStream(stream);
            userVideoRef.current.srcObject = stream;
            track.onended = function () {
               userVideoRef.current.srcObject = videoStream.current;
               peerRef.current.removeTrack(track, stream);
            };
        });
    }

What's really strange about the behavior that I am getting, is that when user B, in other words the calling peer, wants to share his screen, all works well, but when user A, the callee peer, wants to share his screen, I get the following error.

index.js:17 Uncaught Error: [object RTCErrorEvent] at makeError (index.js:17) at RTCDataChannel._channel.onerror (index.js:490)

I am not really sure where I am going wrong.

score 0 · Answer 1 · edited May 14 '20 at 01:50

After some testing, I discovered where the error is coming from.

What you need to do is to call the function peer.signal(incomingSignal) after calling the function addPeer(), along with the peer variable returned from the addPeer() function.

Here's an example:

function addPeer(incomingSignal, callerID, stream) {
    const peer = new Peer({
        initiator: false,
        trickle: false,
        stream,
    });

    peer.on("signal", signal => {
        const payload = {
            callerID,
            signal
        }
        socketRef.current.emit("accept call", payload);
    });

    peer.on("stream", handleStream);

    // peer.signal(incomingSignal);
    return peer;
}
let peer = addPeer(incomingSignal, callerId, stream);
peer.signal(incomingSignal);

and it will work fine

simple-peer webrtc error when trying to share screen

1 Answers1