Embedding an HTML5 player to play WebRTC video stream via Websocket

Web Call Server sends a video stream to iOS Safari via the Websocket protocol, which allows reducing latency to 1-3 seconds producing a nearly real-time broadcasting comparable to HLS

Use these instructions for quick installation and configuration of the server. In addition to that, you can connect to our demo server demo.flashphoner.com to perform the tests.

The page contains an HTML code that links to several JavaScript files and other dependencies. As a result, the web page displays the video on the page in iOS Safari browser using HTML5 and Websocket technologies.

Step-by-step instructions for embedding the player on web page

To embed the player in our web page, let’s create two empty files: player-safari-min.html and player-safari-min.js. These files will contain the minimal code for our player’s operation.

Let’s study the contents of the files

HTML

Place the necessary elements in player-safari-min.html:

1. Import the script of the main API

<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>

2. Import the script of the player

<script type="text/javascript" src="player-safari-min.js"></script>

3. Initialize the API on page load

<body onload="init_api()">

4. Add the div element that the video for the player will be added to

<div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>

5. Add the “Play” button, clicking which will initialize connection to the server and start playing the video

<input type="button" onclick="connect()" value="PLAY"/>

Player before playing stream safari ios Websocket Canvas WSPlayer

The full code of the HTML page looks as follows:

<!DOCTYPE html>
<html lang="en">
<head>   
    <script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
    <script type="text/javascript" src="player-safari-min.js"></script>   
</head>

<body onload="init_api()">
<div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>
<br/><input type="button" onclick="connect()" value="PLAY"/>
</body>
</html>

JavaScript

1. Create the constants for the player operation status

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

2. Create the variable for the Websocket session

var session;

3. Initialize API when the HTML page is loaded. Upon initialization, two more scripts are loaded:

WSReceiver2.js
video-worker2.js

These scripts are the core of the Websockets player. The first one is in charge for delivery of a video stream, and the second one processes it. To learn about similar products, visit this website.Here we write the type of the player – “WSPlayer”

Flashphoner.init({
    receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js',
    decoderLocation: '../../dependencies/websocket-player/video-worker2.js',
    preferredMediaProvider: "WSPlayer"
    });

4. Browser iOS Safari has a certain limitation that prevents any audio playback until a user taps somewhere on the page. So when the “Play” button is clicked, we invoke the playFirstVideo() method which allows you to bypass this restriction and start playing the video stream with audio. Next, connect to the WCS server via WebSocket. In this example, we are using our demo server. To test your own server, replace “wss://demo.flashphoner.com” with your WCS address

function connect() {
    //PlayFirstSound
    Flashphoner.playFirstSound();

    //create session
    Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    })
}

5. Next, create a session.createStream() stream and pass the name of the stream “stream1” and the HTML element “myVideo” as parameters

function playStream(session) {
    var options = {
        name: "stream1",
        display: document.getElementById("myVideo"),
    };
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {})
    stream.play();
}

The full JavaScript code looks as follows

//Status constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

//Websocket session 
var session;

//Init Flashphoner API
function init_api() {
    //init api
    try {
        Flashphoner.init({
            receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js',
            decoderLocation: '../../dependencies/websocket-player/video-worker2.js',
            preferredMediaProvider: "WSPlayer"
        });
    } catch (e) {
        return;
    }
}

function connect() {
    //PlayFirstSound
    Flashphoner.playFirstSound();

    //create session
    Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    })
}

//Play  stream
function playStream(session) {
    var options = {
        name: "stream1",
        display: document.getElementById("myVideo"),
    };
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {})
    stream.play();
}

As a result, we get the minimal player, which is a div block with a frame and is able to play the stream in iOS Safari browser

Player playing stream safari ios Websocket Canvas WSPlayer