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>

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();

        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) {

3. Publish test stream in modified Two Way Streaming example and play it on custom video element with controls enabled


  • No labels