По умолчанию, WebSDK создает HTML5 video элемент для отображения публикуемого потока. В некоторых случаях требуется отобразить поток на собственном video элементе. Это можно сделать следующим образом:
1. Добавляем на HTML страницу примера video элемент
... <div class="col-sm-6"> <div class="text-center text-muted">Player</div> <div class="fp-Video"> <div id="remoteVideo" class="display"><video id="customVideo" controls="controls"></video></div> </div> ...
2. Создаем контейнер, которому при публикации будет проставлен srcObject
var mockLocalDisplay = $('<div></div>'); var mockLocalVideo = $('<video></video>',{id:'mock-LOCAL_CACHED_VIDEO'}); mockLocalDisplay.append(mockLocalVideo);
3. При публикации, копируем srcObject в video элемент
var video = document.getElementById("customVideo"); stream = session.createStream({ name: $('#streamName').val(), display: mockLocalDisplay.get(0) }).on(STREAM_STATUS.PUBLISHING, function (stream) { var srcObject = mockLocalVideo.get(0).srcObject; video.srcObject = srcObject; mockLocalVideo.get(0).pause(); mockLocalVideo.get(0).srcObject = null; }); stream.publish();