Example of client for MCU conference participant

This example can be used to organize an MCU video conference on Web Call Server. Each participant of such conference can publish a WebRTC stream and play a mixer stream with audio and video from the other participants and own video (without own audio).

The following settings are required in WCS flashphoner.properties

mixer_auto_start=true
mixer_mcu_audio=true
mixer_mcu_video=true

When a participant joins a conference using the client

On the screenshot below the participant is publishing a stream and playing his conference mixer stream:

Code of the example

The path to the source code of the example on WCS server is:

/usr/local/FlashphonerWebCallServer/client/examples/demo/streaming/mcu_client

mcu_client.css - file with styles
mcu_client.html - page of MCU conference participant
mcu_client.js - script providing functionality for participating in MCU conference

This example can be tested using the following address:

https://host:8888/client/examples/demo/streaming/mcu_client/mcu_client.html

Here host is the address of the WCS server.

Analyzing the code

To analyze the code, let's take file mcu_client.js with hash ecbadc3, which is available here and can be downloaded with corresponding build 2.0.212.

1. Initialization of the API

Flashphoner.init() code

    Flashphoner.init();

2. Connection to server

Flashphoner.createSession() code

    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function () {
        ...
    }).on(SESSION_STATUS.FAILED, function () {
        ...
    })

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

On receiving the event, streaming is started

    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        setStatus(session.status());
        //session connected, start playback
        startStreaming(session);
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    });

4. Get publishing and playing constraints from the client page

getConstraints() code

Audio constraint: true or false (depending on the value both published and played stream will have or have not audio)

Video constraint: true (published and played streams will have video)

function getConstraints() {
    var constraints = {
        audio: $("#hasAudio").is(':checked'),
        video: true
    };
    return constraints;
}

5. Video streaming

session.createStream(), stream.publish() code

When stream is created, the following parameters are passed

    publishStream = session.createStream({
        name: streamName,
        display: mockLocalDisplay,
        receiveVideo: false,
        receiveAudio: false,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        ...
    });
    publishStream.publish();

6. Receiving the event confirming successful streaming

StreamStatusEvent PUBLISHING code

On receiving the event, a stream for playing the participant's conference mixer is created

    publishStream = session.createStream({
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        //play preview
        playStream(session);
        ...
    });

7. Playback of conference stream

session.createStream(), play() code

When stream is created, the following parameters are passed

    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: getConstraints()
        ...
    });
    conferenceStream.play();

8. Receiving the event confirming playback

StreamStatusEvent PLAYING code

    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        $("#preloader").hide();
        setStatus(stream.status());
        onStarted();
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function (stream) {
       ...
    });

9. Stop of playback and streaming on leaving the conference

stream.stop() code

function stopStreams() {
    if(conferenceStream) {
        conferenceStream.stop();
    }
    if(publishStream) {
        publishStream.stop();
    }
}

10. Receiving the event confirming streaming stop

StreamStatusEvent UNPUBLISHED code

    publishStream = session.createStream({
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function () {
        onStopped();
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });

11. Receiving the event confirming playback stop

StreamStatusEvent STOPPED code

    conferenceStream = session.createStream({
        ...
    }).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        $("#preloader").hide();
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });