Analyzing the code

To analyze the code get videoget video-chat-and-screen-sharing.js file version with hash 35a4234 hash 456b1c7 that can be found found here and and is available to download in build build 2.0.177201.

1. API initializing.

Flashphoner.init() code

Code Block

language	js
theme	RDark

    try {
        Flashphoner.init();
    } catch(e) {
        $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example");
        return;
    }

2. Connection to the server

FlashphonerRoomApi.roomApi.connect() code

Code Block

language	js
theme	RDark

    connection = Flashphoner.roomApiRoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
        setStatus('#status', session.status());
        onLeft();
    }).on(SESSION_STATUS.DISCONNECTED, function(session) {
        setStatus('#status', session.status());
        onLeft();
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        setStatus('#status', session.status());
        joinRoom();
    });

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED ESTABLISHED code

Code Block

language	js
theme	RDark

    connection = Flashphoner.roomApiRoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function(session) {
        ...
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        setStatus('#status', session.status());
        joinRoom();
    });

4. Joining to the room

connection.join() code

To join, name of the conference room is passed to the method. (The name can be specified as parameter in the URL of the client page; otherwise, random name will be generated.)

...

5. Receiving the event describing chat room state

RoomStatusEvent STATE STATE code

On this event:

the length of the array of Participant objects returned by method Room.getParticipants() is determined to get the number of already connected participants
if the maximum allowed number of participants had already been reached, the user leaves the "room"
otherwise, the user starts publishing video stream

...

6. Screen streaming

room.publish() code

These parameters are passed to room.publish() method:

...

Code Block

language	js
theme	RDark

    var constraints = {
        video: {
            width: parseInt($('#width').val()),
            height: parseInt($('#height').val()),
            frameRate: parseInt($('#fps').val()),
            withoutExtension: true
        },
        audio: $("#useMic").prop('checked')
    };
    constraints.video.type = "screen";
    if (Browser.isFirefox()){
        constraints.video.mediaSource = "screen";
    }
    var options = room.publish({{
        name: "screenShare",
        display: document.getElementById("preview"),
        constraints: constraints,
        cacheLocalResources: false
    }
    if (isSafariMacOS()) {
     constraints: constraints,
  options.disableConstraintsNormalization = true;
    name: "screenShare",}
    room.publish(options).on(STREAM_STATUS.FAILED, function   cacheLocalResources: false(stream) {
        ...
      });

7. Receiving the event notifying that other participant joined to the room

RoomStatusEvent JOINED JOINED code

Code Block

language	js
theme	RDark

    connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
        ...
    }).on(ROOM_EVENT.JOINED, function(participant){
        installParticipant(participant);
        addMessage(participant.name(), "joined");
    }).on(ROOM_EVENT.LEFT, function(participant){
        ...
    }).on(ROOM_EVENT.PUBLISHED, function(participant){
        ...
    }).on(ROOM_EVENT.FAILED, function(room, info){
        ...
    }).on(ROOM_EVENT.MESSAGE, function(message){
        ...
    });

8. Receiving the event notifying that other participant published video stream

RoomStatusEvent PUBLISHED PUBLISHED code

Code Block

language	js
theme	RDark

    connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
        ...
    }).on(ROOM_EVENT.JOINED, function(participant){
        ...
    }).on(ROOM_EVENT.LEFT, function(participant){
        ...
    }).on(ROOM_EVENT.PUBLISHED, function(participant){
        playParticipantsStream(participant);
    }).on(ROOM_EVENT.FAILED, function(room, info){
        ...
    }).on(ROOM_EVENT.MESSAGE, function(message){
        ...
    });

9. Playback of video stream.

participant.play() code

<div> element, in which the video will be displayed depending on source (web camera or screen), is passed to the participant.play() method.

Code Block

language	js
theme	RDark

function playParticipantsStream(participant) {
    if (participant.getStreams().length > 0) {
        for (var i=0; i<participant.getStreams().length; i++) {
            $("[id$=Name]").each(function (index, value) {
                if ($(value).text() == participant.name()) {
                    var p = value.id.replace('Name', '');
                    var pDisplay = p + 'Display';
                    // check if we already play this stream
                    if (document.getElementById(participant.getStreams()[i].id()) == null) {
                        // setup 1st stream to main div
                        if (participant.getStreams()[i].streamName().indexOf("screenShare") == -1) {
                            participant.getStreams()[i].play(document.getElementById(pDisplay)).on(STREAM_STATUS.PLAYING, function (playingStream) {
                                document.getElementById(playingStream.id()).addEventListener('resize', function (event) {
                                    resizeVideo(event.target);
                                });
                            });
                        } else {
                            participant.getStreams()[i].play(document.getElementById("sharedDisplay")).on(STREAM_STATUS.PLAYING, function (playingStream) {
                                document.getElementById(playingStream.id()).addEventListener('resize', function (event) {
                                    resizeVideo(event.target);
                                });
                            });
                        }
                    }
                }
            });
        }
    }
}

10. Stop Stop of streamingscreen sharing.

stream.stop() code

Code Block

language	js
theme	RDark

    room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(stream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            stream.stop();
        };
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
        ...
    });

11. Receiving the event confirming successful streaming screen sharing stop.

StreamStatusEvent UNPUBLISHED UNPUBLISHED code

Code Block

language	js
theme	RDark

    room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
        onStopSharing();
    });

12. Leaving chat room.

room.leave() code

Code Block

language	js
theme	RDark

function onJoined(room) {
    $("#joinBtn").text("Leave").off('click').click(function(){
        $(this).prop('disabled', true);
        room.leave().then(onLeft, onLeft);
    }).prop('disabled', false);
    ...
}

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version 4

Key

Analyzing the code

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 3

New Version 4

Key

Analyzing the code