Skip to end of metadata
Go to start of metadata

By default, WebSDK creates HTML5 video element automatically to display a stream captured. However, in some cases it is necessary to display a stream on custom video element. This can be done as follows

1. Add video element to example HTML page

           <div class="col-sm-6">
                <div class="text-center text-muted">Local</div>
                <div class="fp-Video">
                    <div id="localVideo" class="display"><video id="customVideo" controls="controls"></video></div>

2. Create a container to set srcObject on stream creation

var mockLocalDisplay = $('<div></div>');
var mockLocalVideo = $('<video></video>',{id:'mock-LOCAL_CACHED_VIDEO'});

3. Copy srcObject from the container to custom video element

            var video = document.getElementById("customVideo");
            stream = session.createStream({
                name: $('#streamName').val(),
                display: mockLocalDisplay.get(0)
            }).on(STREAM_STATUS.PUBLISHING, function (stream) {
                var srcObject = mockLocalVideo.get(0).srcObject;
                video.srcObject = srcObject;              
                mockLocalVideo.get(0).srcObject = null;

  • No labels