Настройка: у меня есть программа на C ++, которая транслирует один видеопоток, используя WebRTC (на основе GStreamer). На стороне клиента, Chrome (изначально использовал Firefox, но потом я понял, что webrtc-internals может быть неплохо для устранения проблемы).
Приложение пытается повторно подключиться к программе C ++ с помощью WebSocket. Как только я получаю успешное соединение, я присваиваю полученный MediaSource свойству видео srcObject. Результатом является пустой экран. Однако если я попаду в консоль и вручную назначу srcObject себе, то это будет
var elem = document.getElementById("stream0")
elem.srcObject = elem.srcObject
видео неожиданно появляется.
В приведенном ниже коде класс AsyncVideoStream имеет дело с общей обработкой соединений webrtc и переподключением. Я не думаю, что это уместно здесь, так как статистика chrome webrtc-internals ясно показывает, что соединение webrtc успешно установлено, даже когда ничего не отображается (я получаю декодированный номер fps, который совпадает с номером отправителя).
HTML довольно прост:
<div class="video-stream-container-fullwidth">
<video class='video-stream' id="stream0" autoplay></video>
</div>
JavaScript (собственно, машинопись):
import AsyncVideoStream from './video_stream'
var config = { 'iceServers': [] };
var vidstreams = {}
document.addEventListener('DOMContentLoaded', () => {
vidstreams[0] = new AsyncVideoStream('ws://localhost:57000/ws', config)
var streamer = vidstreams[0];
var id = `stream0`
streamer.onVideoStream((stream) => {
var elem = document.getElementById(id) as any;
elem.srcObject = stream;
})
})
document.addEventListener('beforeunload', () => {
vidstreams[0].dispose();
})