По умолчанию, WebSDK создает HTML5 video элемент для отображения публикуемого потока. В некоторых случаях требуется отобразить поток на собственном video элементе. Это можно сделать следующим образом:
1. Добавляем на HTML страницу примера video элемент
| Code Block |
|---|
|
...
<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
| Code Block |
|---|
|
var mockLocalDisplay = $('<div></div>');
var mockLocalVideo = $('<video></video>',{id:'mock-LOCAL_CACHED_VIDEO'});
mockLocalDisplay.append(mockLocalVideo); |
3. При публикации, копируем srcObject в video элемент
| Code Block |
|---|
|
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(); |