Embedding-Video-Stream-Mixing

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

Let’s place the necessary elements in mixer-min.html:

1. Import the main API script

<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. Initialize the page loading API

<body onload="init_page()">

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

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

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

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

6. Add a button to remove a stream from the mixer.

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

7. Add a button to delete the mixer.

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

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

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

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

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

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

<input type="button" onclick="connect()" value="Play Mixed Stream"/>

The full HTML code of the page looks like this

<!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>

<body onload="init_page()">
<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 id="myVideo" style="width:640px;height:480px;border: solid 1px"></div>
<input type="button" onclick="connect()" value="Play Mixed Stream"/>
</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 for the status of the session and the stream on the WCS server

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

2. We create global variables for Websocket session, and REST call URL

var session;
var url = "https://demo.flashphoner.com:8444/rest-api/mixer";

3. In the function “init_page()”, we initialize the API, bind the functions to the events of clicking on the corresponding buttons and create a mixer using a REST call

function init_page() {
    Flashphoner.init({});
    addBtn.onclick = addStream;
    removeBtn.onclick = removeStream;
    terminateBtn.onclick = terminateMixer;
    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 “addStream()” generates and sends a REST call to add a stream, whose name we specify in the input field, to the mixer

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
}

5. 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
}

6. 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)
}

7. The “connect()” function creates a Websocket session on the WCS to play the stream from the mixer

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

8. 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 like this

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var url = "https://demo.flashphoner.com:8444/rest-api/mixer";

//Init Flashphoner API & create Mixer
function init_page() {
    Flashphoner.init({});
    addBtn.onclick = addStream;
    removeBtn.onclick = removeStream;
    terminateBtn.onclick = terminateMixer;
    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
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    });
}

function playStream() {
    var options = {
        name: "mixedstream",
        display: document.getElementById("myVideo")
    };
    var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) {});
    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 Web Call Server 5

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

    Download Now    

Installation:

  1. wget https://flashphoner.com/download-wcs5.2-server.tar.gz
  2. Unpack and install using 'install.sh'
  3. Launch server using command 'service webcallserver start'
  4. 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

$75 per month

 

   Purchase   

 


Related Articles