SFU client

Video conference example

This is a basic video conference example which uses SFU SDK. In this example client can join the conference and publish audio/video/screen sharing for other participants to see.

Code of the example

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

/usr/local/FlashphonerWebCallServer/client/sfu/examples/client

Contents:

• main.html - html page
• main.js - main logic
• main.css - styles

• config.json - config file for the client
• controls.js - code that handles client controls
• chat.js - code that handles conference chat
• display.js - code that is responsible for displaying local and remote media
• util.js - utility file

This example can be tested using the following address:

https://host:8888/client/sfu/examples/client/main.html

Here host is the address of the WCS server.

Working with the code of the example

Local variables for constants, SFU SDK, local display and controls

const constants = SFU.constants;
const sfu = SFU;
let localDisplay;
let cControls;

Default configuration - this one will be used if there was no config.json file available. With this config client will be preconfigured to connect to localhost over WSS, enter room "ROOM1" with pin "1234" and nickname "Alice". Media section directs client to publish audio and video tracks. Video will have two sub-tracks - high (h) and medium (m).

const defaultConfig = {
    room: {
        url: "wss://127.0.0.1:8888",
        name: "ROOM1",
        pin: "1234",
        nickName: "Alice"
    },
    media: {
        audio: {
            tracks: [
                {
                    source: "mic",
                    channels: 1
                }
            ]
        },
        video: {
            tracks: [
                {
                    source: "camera",
                    width: 1280,
                    height: 720,
                    codec: "H264",
                    encodings: [
                        { rid: "h", active: true, maxBitrate: 900000 },
                        { rid: "m", active: true, maxBitrate: 300000, scaleResolutionDownBy: 2 }
                    ]
                }
            ]
        }
    }
};