Playing a stream in custom HTML5 video element

By default, WebSDK creates HTML5 video element to play a stream automatically. However, in some cases it is necessary to play a stream on custom video element, for example, to use custom controls. Let's tweak Two Way Streaming application code.

1. Add video element to example HTML page

   <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. Pass the custom video element to Session.createStream() function using remoteVideo parameter

   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. Publish test stream in modified Two Way Streaming example and play it on custom video element with controls enabled