Видео элемент не воспроизводит контент общего экрана ⇐ Javascript

[Anonymous]

Я пытаюсь создать свои пользовательские видеоконференции с использованием MediaSoup. Я совершенно новичок в Webrtc и MediaSoup . Я уже построил свой собственный сценарий SFU, который обрабатывает такие вещи, как продюсеры, потребители, события доски ... и т. Д. Моя проблема заключается в том, что в общем обмене экранами в целом событие успешно отправляется с созданием продюсера, а другие пользователи получают медиатрейк, которым продюсер делится, но при создании элемента видео и настройке своего Srcobject на трек. Все установлено успешно, но при тестировании локально с двумя разными вкладками видео элемент создается с помощью srcobject, но на видео на самом деле ничего не отображается. Даже не черный экран.module.exports = {
mediaCodecs: [
{
kind: "audio",
mimeType: "audio/opus",
clockRate: 48000,
channels: 2,
},
{
kind: "video",
mimeType: "video/VP8",
clockRate: 90000,
parameters: {
"x-google-start-bitrate": 1000,
},
},
],
};
< /code>
shareScreen function :
async function shareScreen() {
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: true
});

const screenTrack = screenStream.getVideoTracks()[0];

await sendTransport.produce({
track: screenTrack,
appData: { mediaType: 'screen' }
});

console.log('Shared screen track readyState:', screenTrack.readyState);
console.log('Screen track:', screenTrack);

localVideo.srcObject = screenStream;
localVideo.autoplay = true;
localVideo.playsInline = true;
}
< /code>
handleNewConsumer function :
function handleNewConsumer(consumerData) {
console.log(consumerData);

const { id, kind, rtpParameters, producerId } = consumerData;

console.log('New consumer', consumerData);

recvTransport.consume({
id,
producerId,
kind,
rtpParameters,
}).then(consumer => {
const stream = new MediaStream();
stream.addTrack(consumer.track);

console.log('Remote stream tracks:', stream.getTracks());
console.log('Consumer track:', consumer.track);
console.log('Track readyState:', consumer.track.readyState);
console.log('Track muted:', consumer.track.muted);

const remoteVideo = document.createElement('video');
remoteVideo.autoplay = true;
remoteVideo.playsInline = true;

remoteVideo.onerror = (event) => {
console.error('Video playback error:', event, remoteVideo.error);
};

remoteVideo.addEventListener('loadedmetadata', () => {
console.log('Remote video loaded metadata:', remoteVideo.videoWidth, remoteVideo.videoHeight, remoteVideo.duration);
remoteVideo.play().catch(err => {
console.error('Auto-play failed:', err);
});
});

remoteVideo.addEventListener('resize', () => {
console.log('Remote video resized to:', remoteVideo.videoWidth, remoteVideo.videoHeight);
});

consumer.track.addEventListener('unmute', () => {
console.log('Track unmuted, setting srcObject');
remoteVideo.srcObject = stream;
console.log('Remote video srcObject set:', remoteVideo.srcObject);
});

if (consumer.track.readyState === 'live' && !consumer.track.muted) {
console.log('Track already live and unmuted, setting srcObject');
remoteVideo.srcObject = stream;
console.log('Remote video srcObject set:', remoteVideo.srcObject);
}

remoteVideos.appendChild(remoteVideo);
console.log('Remote video element appended:', remoteVideo);
});
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... red-screen