Skip to end of metadata
Go to start of metadata

По умолчанию, WebSDK создает HTML5 video элемент для воспроизведения принятого потока. В некоторых случаях требуется отобразить поток на собственном video элементе, например, для использования элементов управления. Рассмотрим, как изменить код приложения на примере Two Way Streaming.

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="videoControls" controls="controls"></video></div>
                </div>
...

2. Передаем элемент в функцию Session.createStream() при помощи параметра remoteVideo

var videoControls = document.getElementById("videoControls");
...
function playStream() {
    var session = Flashphoner.getSessions()[0];
    var streamName = $('#playStream').val();

    session.createStream({
        name: streamName,
        display: remoteVideo,
        remoteVideo: videoControls
    }).on(STREAM_STATUS.PENDING, function (stream) {
        var video = videoControls;
        if (!video.hasListeners) {
            video.hasListeners = true;
            video.addEventListener('resize', function (event) {
                resizeVideo(event.target);
            });
        }
    ...
    }).play();
}
...

3. Публикуем поток в модифицированном примере Two Way Streaming и играем его

upload_2020-2-10_11-13-39.png


  • No labels