Skip to end of metadata
Go to start of metadata

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>
...

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

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


  • No labels