На данный момент реализована потоковая передача видео от одного клиента (стримера) к другому (зрителям) с помощью программы. Все работает хорошо, пока зритель не перезагрузит страницу. Его видео пропадает, хотя поток передавался (это видно в консоли). В чем проблема?
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);)
