Когда я играю с WebRTC в Chrome, я замечаю, что долговечность этих потоков все еще несколько шаткая. Мне нужно создать видеопоток до того, как отобразится элемент, отображающий его (технически мне сначала нужна только звуковая дорожка, но повторное согласование без replaceTrack () кажется проблемой само по себе, поэтому сейчас я включаю оба сразу ).
Затем элемент динамически отображается с помощью JavaScript, и ему необходимо начать получать видео WebRTC. Проблема в том, что на момент создания WebRTC этот элемент видео, который я хочу показать, еще не существует. Я не вижу способа указать WebRTC изменить отображаемый элемент видео после запуска потока, возможно ли это? В основном я играл с SimpleWebRTC, но готов использовать WebRTC напрямую - просмотрев документацию, я тоже не смог найти способ сделать это с необработанным WebRTC. Я также попытался переместить исходный элемент видео в новый элемент, но это привело к прерыванию / остановке видеопотока:
newElement.appendChild(originalWebRTCVideoTag);
Какие у меня есть варианты, если не считать уничтожения всего потока и перезапуска?
ОБНОВЛЕНИЕ:
Для обоих подходов videoTag - это общий тег видео DOM, webrtc - это экземпляр объекта WebRTC
с рабочим соединением, установленным через SimpleWebRTC (simpleWebRtc.webrtc, который SimpleWebRTC оборачивает). Я собираю JSFiddle прямо сейчас для тех, кто хочет увидеть реальный код, но этой информации должно быть достаточно, чтобы воспроизвести это.
// this doesn't seem to be working in stackoverflow, probably because it rejects video camera capture
var simplertc = new SimpleWebRTC({
localVideoEl: 'webrtc-local',
remoteVideosEl: 'webrtc-remote',
media: {"audio": true, "video": {
"optional": [{"minWidth": "640"}, {"minHeight": "480"}], "mandatory": {}
}},
autoRequestMedia: true
});
var webrtc = simplertc.webrtc;
// this portion is overly simplified, in this case there is no point
// in creating this dynamically, in the app I'm working on this element
// is generated much later
$('#dynamic').appendTo('<video id="dynamic-video"></video>');
var videoTag = $('#dynamic-video')[0];
simplertc.on('readyToCall', function() {
simplertc.joinRoom('my-room-875385864'); // random name
// by this time the local video should be ready, we don't need remote ones for our test
// test case 1 (replace with logic from test case 2 if needed)
videoTag.srcObject = webrtc.localStreams[0];
// end test case
});
video {
border: 1px solid red;
width: 200px;
}
/* overlap with original video is intentional to show hardware acceleration effect */
#dynamic {
position: absolute;
border: 1px solid black;
width: 200px;
height: 200px;
left: 100px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<div id='webrtc'>
<video id='webrtc-local'></video>
<div id='webrtc-remote'></div>
</div>
<div id='dynamic'>
</div>
Подход 1, наткнулся на это случайно при попытке подойти 2
Пробовал следующее, работает, но намного медленнее, чем хотелось бы, примерно 5 FPS:
// note that I can just as easily use remote streams here
videoTag.srcObject = webrtc.localStreams[0]
По иронии судьбы, когда я больше возился с этим подходом, я случайно перекрыл области видео элемента webRTC и сгенерированного (videoTag), и хотя webRTC находится в фоновом режиме, этот угол videoTag, где он перекрывается, работает в реальном времени, в отличие от остальная часть элемента продолжает работать со скоростью 3-5 FPS. Это наводит меня на мысль, что проблема здесь в аппаратном ускорении. Могу ли я как-нибудь включить его для тега videoTag?
Подход 2
var media = new MediaSource();
videoTag.src = URL.createObjectURL(media);
// guessing mimetype from a few WebRTC tutorials I stumbled upon
var srcBuf = media.addSourceBuffer(‘video/webm;codecs=”vp8, vorbis”’);
// need to convert webrtc.localStreams[0] or its video track to a buffer somehow???
srcBuf.appendBuffer(/* buffer */);
ДАЛЬНЕЙШИЕ ИССЛЕДОВАНИЯ
Это может быть ошибка в Chrome, хакерский обходной путь, который, кажется, работает, заключается в том, чтобы убедиться, что вновь сгенерированные видеоэлементы полностью перекрываются исходным видеоэлементом (даже если исходный видеоэлемент настроен для рендеринга на фоне за всеми другими элементами. (и за непрозрачным фоном) Это похоже на аппаратное ускорение.
Settings
- person guest271314   schedule 12.02.2017srcObject
- это свойствоDOM
, а не свойство jQuery, используйтеvideoTag[0].srcObject
. Все еще не уверены, в чем проблема? - person guest271314   schedule 12.02.2017[0]
при вводе примера выше, в исходном коде он есть. - person Alexander Tsepkov   schedule 12.02.2017