Использование собственного HTML5 video элемента при воспроизведении

По умолчанию, 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>
        ...
   </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 и играем его