Embedding Stream Mixer

To embed stream mixing, you need to embed HTML code and dependent API scripts in your website

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.

Step-by-step instructions for embedding stream mixing

To embed mixing of streams with playback, we will create two empty files mixer-min.html and mixer-min.js. In this case, the minimum REST API client and minimum player will be placed on the web page.

Let’s analyze the contents of the files

HTML

Place the necessary elements in mixer-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 for the minimum mixer:

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

3. Add styles to properly display video in div elements:

<style>
        .fp-Video {
            border: 1px double black;
            width: 322px;
            height: 242px;
        }
        .display {
            width: 100%;
            height: 100%;
            display: inline-block;
        }
        .display > video,
        object {
            width: 100%;
            height: 100%;
        }
</style>

4. Initialize the API on page load:

<body onload="init_api()">

5. Add a field to enter the name of the stream to be added to the mixer:

<input id="stream" type="text" placeholder="Stream Name"/>

6. Add “Add Stream” button to add a stream to the mixer:

<button id="addBtn">Add Stream</button>

7. Add a button to remove a stream from the mixer:

<button id="removeBtn">Remove Stream</button>

8. Add a button to delete the mixer:

<button id="terminateBtn">Delete Mixer</button>

9. Add a div element to display information about the current action:

<div id="status"></div>

10. Add a div element in which the mixed video stream will be played:

   <div class="fp-Video">
      <div id="myVideo" class="display"></div>
   </div>

11. Add a button to start playback of the mixed video stream:

<button id="playBtn">Play Mixed Stream</button>

The full code of the HTML page looks as follows (file «mixer-min.html»):

<!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="mixer-min.js"></script>
    </head>
    <style>
        .fp-Video {
            border: 1px double black;
            width: 322px;
            height: 242px;
        }
        .display {
            width: 100%;
            height: 100%;
            display: inline-block;
        }
        .display > video,
        object {
            width: 100%;
            height: 100%;
        }
    </style>
    <body onload="init_api()">
        <input id="stream" type="text" placeholder="Stream Name" />
        <br />
        <button id="addBtn">Add Stream</button>
        <button id="removeBtn">Remove Stream</button>
        <button id="terminateBtn">Delete Mixer</button>
        <br />
        <div id="status"></div>
        <br />
        <div class="fp-Video">
            <div id="myVideo" class="display"></div>
        </div>
        <button id="playBtn">Play Mixed Stream</button>
    </body>
</html>

View of the resulting web page in the screenshot below

mixer before playing videostream WCS REST API WebRTC browser conference

JavaScript

1. We create constants and variables for the server operation status, WebSocket session and REST call URL.To work with the iOS Safari browser, we need a preloader, which can be downloaded from GitHub:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var url = "https://demo.flashphoner.com/rest-api/mixer";
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";

2. We initialize the API when loading the HTML page and 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. We also bind functions to the events of pressing the corresponding buttons and create a mixer using a REST call:

function init_api() {
    Flashphoner.init({});
    //Connect to WCS server over websockets
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });

    addBtn.onclick = addStream;
    removeBtn.onclick = removeStream;
    terminateBtn.onclick = terminateMixer;
    playBtn.onclick = playClick;

    fetchUrl = url + "/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1",
            "localStreamName": "mixedstream"
        }),
    }
    fetch(fetchUrl, options)
}

3. The function “addStream()” generates and sends a REST call to add a stream, whose name we specify in the input field, to the mixer:

function init_api() {
    Flashphoner.init({});
    //Connect to WCS server over websockets
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });

    addBtn.onclick = addStream;
    removeBtn.onclick = removeStream;
    terminateBtn.onclick = terminateMixer;
    playBtn.onclick = playClick;

    fetchUrl = url + "/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1",
            "localStreamName": "mixedstream"
        }),
    }
    fetch(fetchUrl, options)
}

4. The function “removeStream()” generates a REST call to remove the stream, whose name is specified in the input field, from the mixer:

   function removeStream() {
       fetchUrl = url + "/remove";
       const options = {
           method: "POST",
           headers: {
               "Content-Type": "application/json"
           },
           body: JSON.stringify({
               "uri": "mixer://mixer1",
               "remoteStreamName": document.getElementById("stream").value
           }),
       }
       fetch(fetchUrl, options)
       document.getElementById("status").textContent = document.getElementById("stream").value + " removed";
       document.getElementById("stream").value = null
   }

5. The function “terminateMixer()” makes a REST call to delete the current mixer:

   function terminateMixer() {
       fetchUrl = url + "/terminate";
       const options = {
           method: "POST",
           headers: {
               "Content-Type": "application/json"
           },
           body: JSON.stringify({
               "uri": "mixer://mixer1"
           }),
       }
       fetch(fetchUrl, options)
   }

6. We detect the browser, and if the browser is Safari, we launch the preloader. Playback should start strictly upon a user’s gesture (i.e. button click). This is limitation of mobile Safari browsers. More:

var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}

function playClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("myVideo"), true, PRELOADER_URL).then(function() {
            playStream();
        });
    } else {
        playStream();
    }
}

7. The function “playStream()” plays the stream from the mixer in the div element on the HTML page:

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

The full JavaScript code looks as follows (file «mixer-min.js»):

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var url = "https://demo.flashphoner.com/rest-api/mixer";
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";

//Init Flashphoner API & create Mixer
function init_api() {
    Flashphoner.init({});
    //Connect to WCS server over websockets
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });

    addBtn.onclick = addStream;
    removeBtn.onclick = removeStream;
    terminateBtn.onclick = terminateMixer;
    playBtn.onclick = playClick;

    fetchUrl = url + "/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1",
            "localStreamName": "mixedstream"
        }),
    }
    fetch(fetchUrl, options)
}

function addStream() {
    fetchUrl = url + "/add";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1",
            "remoteStreamName": document.getElementById("stream").value
        }),
    }
    fetch(fetchUrl, options);
    document.getElementById("status").textContent = document.getElementById("stream").value + " added";
    document.getElementById("stream").value = null
}

function removeStream() {
    fetchUrl = url + "/remove";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1",
            "remoteStreamName": document.getElementById("stream").value
        }),
    }
    fetch(fetchUrl, options)
    document.getElementById("status").textContent = document.getElementById("stream").value + " removed";
    document.getElementById("stream").value = null
}

function terminateMixer() {
    fetchUrl = url + "/terminate";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": "mixer://mixer1"
        }),
    }
    fetch(fetchUrl, options)
}

//Player
//Detect browser
var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}

function playClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("myVideo"), true, PRELOADER_URL).then(function() {
            playStream();
        });
    } else {
        playStream();
    }
}

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

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

View of the web page while the mixer is operating with two added video streams.

mixer after playing videostream WCS REST API WebRTC browser conference

Thus, you can embed into your web project mixing of video streams with minimal code.

Download minimal examples

Download

1. Download archive.

2. Unpack the example files to your Web server.

Default directory for Apache:

/var/www/html

for Nginx:

/usr/local/nginx/html

or see the documentation for your web server.

3. Run the minimal example in a browser using a link like

https://your.web.server/min-example-file-name.html

Warning! The web page must be opened via https to get examples working.

Download Web Call Server 5

System requirements: Linux x86_64, 1 core CPU, 2 Gb RAM, Java

Download Now

Installation:

wget https://flashphoner.com/download-wcs5.2-server.tar.gz
Unpack and install using 'install.sh'
Launch server using command 'service webcallserver start'
Open the web interface https://host:8444 and activate your license

If you are using Amazon EC2, you don't need to download anything.

Launch WCS5 on Amazon EC2

Web Call Server Monthly Subscription

$145 per month

Purchase

Documentation

Documentation on quick Web Call Server deployment

Stream mixer