Overview
A stream published on WCS server can be played in a browser-based VR player, Delight Player for example. This way stream can be played in virtual and mixed reality devices if one of browsers supporteds work on this device. Note that the better quality of stream published, the better stream playback quality in VR device.
Supported platforms and browsers
Chrome | Firefox | Safari 11 | Edge | |
---|---|---|---|---|
Windows | + | + | + | |
Mac OS | + | + | + | |
Android | + | + | ||
iOS | - | - | + |
Supported technologies
- WebRTC
- HLS
Playback via WebRTC
Delaight Player can be integrated with WCS to play the stream by two ways:
- Using WebSDK
- Using JavaScript and HTML5
Using WebSDK
To play a stream via WebRTC in Delight Player or any other custom JavaScript player, the video emement of the page in which a strem will be played shoukd be passed as remoteVideo
parameter to the session.createStream()
WebSDK function
session.createStream() code
session.createStream({ name: document.getElementById('playStream').value, display: display, remoteVideo: video }) ...
Testing
1. For the test we use:
- WCS server
- Media Devices web application to publish FullHD stream
- Delight VR player to play the stream
2. Set the stream resolution to 1920x1080
3. Set to WCS field stream name wss://test1.flashphoner.com:8443/test
and press Start to publish
4. Play the stream test
in VR player
A view angle can be changed with mouse drag in browser on PC or Mac, and can be changed depending on iOS device or dedicated VR device tilt angle.
Player page example code
1. Declaration of video element to play the stream, stream name input field and Play/Stop buttons
<div style="width: 50%;" id="display"> <dl8-live-video id="remoteVideo" format="STEREO_TERPON"> <source> </dl8-live-video> </div> <input class="form-control" type="text" id="playStream" placeholder="Stream Name"> <button id="playBtn" type="button" class="btn btn-default" disabled>Play</button> <button id="stopBtn" type="button" class="btn btn-default" disabled>Stop</button>
2. Player readiness event handling
document.addEventListener('x-dl8-evt-ready', function () { dl8video = document.getElementById('remoteVideo'); $('#playBtn').prop('disabled', false).click(function() { playStream(); }); });
3. Establishing connection with a server and stream creation
var video = dl8video.contentElement; Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { var session = Flashphoner.getSessions()[0]; session.createStream({ name: document.getElementById('playStream').value, display: display, remoteVideo: video }).on(STREAM_STATUS.PLAYING, function (stream) { ... }).play(); })
4. Playback start in VR player and Stop button handling
... }).on(STREAM_STATUS.PLAYING, function (stream) { dl8video.start(); $('#stopBtn').prop('disabled', false).click(function() { $('#playBtn').prop('disabled', false); $('#stopBtn').prop('disabled', true); stream.stop(); dl8video.exit(); }); }).play(); })
Full source code of the sample VR player page
Using JavaScript and HTML5
To play a stream via WebRTC in Delight Player or any other custom JavaScript player, a mock element for displaying the stream should be created
var mockRemoteDisplay = $('<div></div>'); var mockRemoteVideo = $('<video></video>',{id:'mock-REMOTE_CACHED_VIDEO'}); mockRemoteDisplay.append(mockRemoteVideo);
Mock element mockRemoteDisplay
is passed as display
parameter to WebSDK session.createStream()
function, and mockRemoteVideo
element is passed as stream source to VR player
session.createStream() code
session.createStream({ name: $('#streamName').val(), display: mockRemoteDisplay.get(0) }).on(STREAM_STATUS.PLAYING, function (stream) { var srcObject = mockRemoteVideo.get(0).srcObject; video.srcObject = srcObject; dl8video.start(); ... }).play();
Testing
1. For the test we use:
- WCS server
- Media Devices web application to publish FullHD stream
- Delight VR player to play the stream
2. Set the stream resolution to 1920x1080
3. Set to WCS field stream name wss://test1.flashphoner.com:8443/test
and press Start to publish
4. Play the stream test
in VR player
Player page example code
1. Declaration of video element to play the stream, stream name input field and Play/Stop buttons
<div style="width: 50%;"> <dl8-live-video id="remoteVideo" format="STEREO_TERPON" muted="true"> <source> </dl8-live-video> </div> <input class="form-control" type="text" id="streamName" placeholder="Stream Name"> <button id="playBtn" type="button" class="btn btn-default" disabled>Play</button> <button id="stopBtn" type="button" class="btn btn-default" disabled>Stop</button>
2. Player readiness event handling
document.addEventListener('x-dl8-evt-ready', function () { dl8video = $('#remoteVideo').get(0); $('#playBtn').prop('disabled', false).click(function() { publishStream(); }); });
3. Creating mock elements to play a stream
var mockRemoteDisplay = $('<div></div>'); var mockRemoteVideo = $('<video></video>',{id:'mock-REMOTE_CACHED_VIDEO'}); mockRemoteDisplay.append(mockRemoteVideo);
4. Establishing connection to the server and stream creation
var video = dl8video.contentElement; Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { var session = Flashphoner.getSessions()[0]; session.createStream({ name: $('#streamName').val(), display: mockRemoteDisplay.get(0) }).on(STREAM_STATUS.PLAYING, function (stream) { ... }).play(); })
5. Playback start in VR player and Stop button handling
... }).on(STREAM_STATUS.PLAYING, function (stream) { var srcObject = mockRemoteVideo.get(0).srcObject; video.srcObject = srcObject; dl8video.start(); mockRemoteVideo.get(0).pause(); mockRemoteVideo.get(0).srcObject = null; $('#stopBtn').prop('disabled', false).click(function() { stream.stop(); $('#playBtn').prop('disabled', false); $('#stopBtn').prop('disabled', true); dl8video.exit(); }); }).play();
Full source code of the sample VR player page
Playback via HLS
When ploblem occurs with stream playback in Delight Player via WebRTC, stream can be played via HLS
Testing
1. For the test we use:
- WCS server
- Media Devices web application to publish FullHD stream
- Delight VR player to play the stream
2. Set the stream resolution to 1920x1080
3. Set to WCS field stream name wss://test1.flashphoner.com:8443/test
and press Start to publish
4. Play the stream test
in VR player
Player page example code
1. Declaration of video element to play the stream, stream name input field and Play/Stop buttons
<div style="width: 50%;" id="display"> <dl8-live-video id="remoteVideo" format="MONO_360"> <source type="application/x-mpegurl" id="hlsSource"/> </dl8-live-video> </div> <input class="form-control" type="text" id="playStream" placeholder="Stream Name"> <button id="playBtn" type="button" class="btn btn-default" disabled>Play</button> <button id="stopBtn" type="button" class="btn btn-default" disabled>Stop</button>
2. Player readiness event handling
document.addEventListener('x-dl8-evt-ready', function () { dl8video = document.getElementById('remoteVideo'); $('#playBtn').prop('disabled', false).click(playStream); });
3. Getting server URL to play via HLS
var hlsUrl = getHLSUrl();
4. Playback start in VR player and Stop button handling
... var video = dl8video.contentElement; var streamName = document.getElementById('playStream').value; $('#hlsSource').attr("src",hlsUrl + "/" + streamName + "/" + streamName + ".m3u8"); dl8video.start(); $('#stopBtn').prop('disabled', false).click(function() { $('#playBtn').prop('disabled', false); $('#stopBtn').prop('disabled', true); dl8video.exit(); });
Full source code of the sample VR player page
Known issues
1. A stream is not played in Delight Player via WebRTC or is played with freezes.
Symptoms: a stream is not played at all (MS Edge) or is played with constant freezes (iOS Safari)
Solution: use HLS to play the stream
2. VR view does not work in Delight Player via HLS in MS Edge on Windows 10 Mobile.
Symptoms: the stream is played in Delight Player via HLS, but the picture is flat
Solution: use device on actual platform with more browsers supported.
3. A stream is not played in Delight Player via HLS.
Symptoms: a stream is not played in Delight Player, download indicator shows 99%, then black screen, or CORS error is displayed
Solution: use nginx as reverse proxy to play HLS stream in Safari browser