目前,已经实现了使用该程序将视频从一个客户端(流媒体)流式传输到另一个(观众)。一切正常,直到查看者重新加载页面。尽管传输了流,但他的视频消失了(这可以在控制台中看到)。问题是什么?
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);
});
};
查看器.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);
)