No video play after reload page with simple-peer

Question

Currently, streaming video from one client (streamer) to another (viewers) using the program has been implemented. Everything works well until the viewer reloads the page. His video disappears, although the stream was transmitted (this can be seen in the console). What is the problem?

Streamer.js

useEffect(() => {
    navigator.mediaDevices
        .getUserMedia({
            video: true,
            audio: true,
        })
        .then(stream => {
            // Display own video
            localVideo.current.srcObject = stream;

            // Stream video to attendees
            gotMedia(stream);
        })
        .catch(error => {
            console.error(error);
        });
}, []);

const gotMedia = stream => {
    localStream.current = stream;
    broadcaster.current = new Peer({
        initiator: true,
        stream: localStream.current,
        config: configuration,
        offerConstraints: {
            offerToReceiveAudio: true,
            offerToReceiveVideo: true,
        },
    });
    broadcaster.current.on('signal', data => {
        socket.emit('signal', { data, room: routeMatch.params.id });
    });
    // destroy current peerconnection and create a new one
    socket.on('startConnection', () => {
        console.log('startConnection');
        if (broadcaster.current) broadcaster.current.destroy();
        broadcaster.current = new Peer({
            initiator: true,
            stream: localStream.current,
            config: configuration,
            offerConstraints: {
                offerToReceiveAudio: true,
                offerToReceiveVideo: true,
            },
        });
        broadcaster.current.on('signal', data => {
            socket.emit('signal', { data, room: routeMatch.params.id });
        });
    });
    socket.on('signal', data => {
        broadcaster.current && broadcaster.current.signal(data);
    });
};

Viewer.js

useEffect(() => {
    attendee.current = new Peer({
        initiator: false,
        config: configuration,
        answerConstraints: {
            offerToReceiveAudio: false,
            offerToReceiveVideo: false,
        },
    });
    attendee.current.on('signal', data => {
        socket.emit('signal', { data, room: routeMatch.params.id });
    });

    socket.on('signal', data => {
        attendee.current && attendee.current.signal(data);
    });

    // Get remote video stream and display it
    attendee.current.on('stream', stream => {
        console.log('stream', stream);
        console.log('remoteVideo.current.srcObject before', remoteVideo.current.srcObject);
        remoteVideo.current.srcObject = stream;
        console.log('remoteVideo.current.srcObject after', remoteVideo.current.srcObject);
    });

    // Ask broadcaster to start his connection
    socket.emit('startConnection', routeMatch.params.id);

    return () => {
        attendee.current.destroy();
    };
}, []);

After reloading the page, we see that there is a stream, but for some reason the video does not play (console.log('remoteVideo.current.srcObject after', remoteVideo.current.srcObject); )

Answer 1

The problem is that when you initialize your Peer in streamer with ìnitialize: true, then it will try to connect directly with the given settings. When you reload your viewer, then it will not receive any signal because the streamer sends this initialization once.

The solution for this would be to create a new Peer object in the streamer as soon as a viewer connects. (and also remove that object when the viewer disconnects).

Here is a github project (demo) you can use as inspiration to expand your project.