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