使用 simple-peer 重新加载页面后没有视频播放

Question

目前，使用该程序将视频从一个客户端（流媒体）流式传输到另一个（观众）已经实现。一切正常，直到查看者重新加载页面。尽管传输了流，但他的视频消失了（这可以在控制台中看到）。有什么问题？

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();
    };
}, []);

重新加载页面后，我们看到有一个流，但是由于某种原因视频没有播放（console.log('remoteVideo.current.srcObject after', remoteVideo.current.srcObject);）

Answer 1

问题在于，当您使用ìnitialize: true 在流媒体中初始化您的 Peer 时，它会尝试直接使用给定的设置进行连接。当您重新加载查看器时，它不会收到任何信号，因为流媒体会发送此初始化一次。

解决方案是在观看者连接后立即在流媒体中创建一个新的 Peer 对象。 （并在查看器断开连接时删除该对象）。

这里有一个github project (demo)，您可以以此为灵感来扩展您的项目。