SFU SDK 1.0 - EN
Space shortcuts
Page tree

Versions Compared

Old Version 6

changes.mady.by.user admin

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

code

Code Block
languagejs
themeRDark
const constants = SFU.constants;
const sfu = SFU;
let localDisplay;
let cControls;

...

Declare default room and publishing configuration which will be used if there was no config.json file available

code

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

Code Block
languagejs
themeRDark
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 }
                    ]
                }
            ]
        }
    }
};

3. Initialization

init() code

Init function that is called when page is finished loading. The function will load config.json or default config, create local display and open entrance modal window.

...

4. Connect to the server and create or enter to the room

connect() code

Connect function that is called once user clicks Enter in entrance modal window.

...

Hide modal as we don't need it anymore and mute controls before connect is established

code

Code Block
languagejs
themeRDark
//hide modal
$('#entranceModal').modal('hide');
//disable controls
cControls.muteInput();

Create PeerConnection and prepare the room config for the creation of session and room

code

Code Block
languagejs
themeRDark
//create peer connection
const pc = new RTCPeerConnection();
//get config object for room creation
const roomConfig = cControls.roomConfig();
roomConfig.pc = pc;

Create session (which will automatically connect to the server)

code

Code Block
languagejs
themeRDark
const session = sfu.createRoom(roomConfig);

Subscribe to session's "CONNECTED" event

code

Code Block
languagejs
themeRDark
session.on(constants.SFU_EVENT.CONNECTED, function(room) {

Once we are connected initialize room chat

code

Code Block
languagejs
themeRDark
//connected to server
const chatDiv = document.getElementById('messages');
const chatInput = document.getElementById('localMessage');
const chatButton = document.getElementById('sendMessage');
//create and bind chat to the new room
createChat(room, chatDiv, chatInput, chatButton);

Subscribe to room error events

code

Code Block
languagejs
themeRDark
room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
    const errField = document.getElementById("errorMsg");
    errField.style.color = "red";
    errField.innerText = e;
}).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
    const errField = document.getElementById("errorMsg");
    errField.style.color = "red";
    errField.innerText = e.operation + " failed: " + e.error;
})

Initialize remote display

code

Code Block
languagejs
themeRDark
//setup remote display for showing remote audio/video tracks
const remoteDisplay = document.getElementById("display");
initRemoteDisplay(room, remoteDisplay, pc);

Get preconfigured local media from controls

code

Code Block
languagejs
themeRDark
//get configured local video streams
let streams = cControls.getVideoStreams();
//combine local video streams with audio streams
streams.push.apply(streams, cControls.getAudioStreams());

Add each stream to local display (so we can see it on page) and peer connection

code

Code Block
languagejs
themeRDark
        //add our local streams to the room (to PeerConnection)
        streams.forEach(function (s) {
            //add local stream to local display
            localDisplay.add(s.stream.id, "local", s.stream);
            //add each track to PeerConnection
            s.stream.getTracks().forEach((track) => {
        addTrackToPeerConnection(pc, s.stream, track, s.encodings);
     if (s.source  subscribeTrackToEndedEvent(room, track, pc);
=== "screen") {
                    config[track.id] = s.source;
                });
});

Add listener to controls so we know if user adds new local streams. Once we have a new stream we will need to add it to local display, add it to peer connection and kickoff renegotiation

code

Code Block
languagejs
themeRDark
//add callback for the new local stream to the local controls
cControls.onTrack(function (s
                addTrackToPeerConnection(pc, s.stream, track, s.encodings);
                subscribeTrackToEndedEvent(room, track, pc);
            });
        });

Add listener to controls so we know if user adds new local streams. Once we have a new stream we will need to add it to local display, add it to peer connection and kickoff renegotiation

code

Code Block
languagejs
themeRDark
        //add callback for the new local stream to the local controls
        cControls.onTrack(function (s) {
            let config = {};
            //add local stream to local display
            localDisplay.add(s.stream.id, "local", s.stream);
            //add each track to PeerConnection
            s.stream.getTracks().forEach((track) => {
                if (s.source === "screen") {
    //add local stream to local display
                localDisplay.add(s.streamconfig[track.id, "local",] = s.stream)source;
            //add each track to PeerConnection}
    s.stream.getTracks().forEach((track) => {
             addTrackToPeerConnection(pc, s.stream, track, s.encodings);
                subscribeTrackToEndedEvent(room, track, pc);
            });
            //kickoff renegotiation
            room.updateState(config);
        });

Finally join WebRTC negotiation in the room

code

Code Block
languagejs
themeRDark
//join room
room.join(pc, null, config);

6. Finalizing local track

subscribeTrackToEndedEvent() code

This is a helper function that subscribes new local track to "ended" event. Once event fired we remove track from peer connection and kickoff renegotiation.

...

addTrackToPeerConnection() code

This is a helper function which adds new local track to peer connection.

...