Page History

...

To analyze the code, let's take the version of file conference.js with hash 66cc393 456b1c7, which is available here and and can be downloaded with corresponding build 2.0.5.28.2753.133201.

Script for video conference uses roomApi designed for video chats, video conferences, webinars and other applications that involve presence of users in one virtual "room".
Unlike direct connection to server with method createSession(), method roomApi.connect() is used when a user connects to a conference.
Method roomApi.join() is used to join to a new "room". When joining, object 'room' is created for work with the "room", and object 'participant' - for work with the participant.
All events occurring in the "room" (a user joined/left, or sent a message), are sent to all users connected to the "room".

For example, in the following code, a user joins to a "room" and gets the list of already connected users.

...

To use RoomApi, the script flashphoner-room-api.js should be included

    <script type="text/javascript" src="../../../../flashphoner-room-api.js"></script>

In this case, RoomApi.sdk object should be used to access Flashphoner methods

connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participantsvar Flashphoner = roomRoomApi.getParticipants()sdk;
    ...

Here user receives data of another participant which have just joined:

}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     addMessage(participant.name(), "joined");
     ...

...

Flashphoner.init() code

...
Flashphoner.init();

Unlike direct connection to server with method createSession(), method roomApi.connect() is used when a user connects to a conference.

Method roomApi.join() is used to join to a new "room". When joining, object 'room' is created for work with the "room", and object 'participant' - for work with the participant.

All events occurring in the "room" (a user joined/left, or sent a message), are sent to all users connected to the "room". For example, in the following code, a user joins to a "room" and gets the list of already connected users.

Flashphonerconnection.initjoin({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});

2. Connection to server.

...

name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    ...

Here user receives data of another participant which have just joined:

connection = Flashphoner.roomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     setStatus('#status', session.status()addMessage(participant.name(), "joined");
     onLeft();
}).on(SESSION_STATUS.DISCONNECTED, function(session) {
    setStatus('#status', session.status());
    onLeft();
})...

1. Initialization of the API.

Flashphoner.init() code

Flashphoner.init();

2. Connection to server.

RoomApi.connect() code

connection = RoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.ESTABLISHEDFAILED, function(session) {
    setStatus('#status', session.status());
    joinRoomonLeft();
});

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

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

4. Joining a conference.

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

...

...

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

connection = RoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
    ...
}).on(ROOMSESSION_EVENTSTATUS.STATEDISCONNECTED, function(roomsession) {
    ...
});

5. Receiving the event describing chat room state

RoomStatusEvent STATE code

On this event:

...

.on(SESSION_STATUS.ESTABLISHED, function(session) {
    setStatus('#status', session.status());
    joinRoom();
});

4. Joining a conference.

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

connection.join({name: getRoomName(), record: isRecord()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full."...
});

5. Receiving the event describing chat room state

RoomStatusEvent 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" (line 85)
• otherwise, the user starts publishing video stream

connection.join({name: getRoomName(), record: isRecord()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length   room.leave().then(onLeft, onLeft);>= _participants) {
        return falseconsole.warn("Current room is full");
    }
    setInviteAddress(room.name()$("#failedInfo").text("Current room is full.");
       if room.leave(participants.length > 0) {
).then(onLeft, onLeft);
        return varfalse;
 chatState =   }
    setInviteAddress(room.name());
    if (participants.length > 0) {
        var chatState = "participants: ";
        for (var i = 0; i < participants.length; i++) {
            installParticipant(participants[i]);
            chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         addMessage("chat", chatState);
     } else {
         addMessage("chat", " room is empty");
     }
     publishLocalMedia(room);
     onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){
     ...
}).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){
     ...
});

6. Video streaming.

room.publish()   code

<div> element 'localDisplay', in which video from camera will be displayed, is passed to the room.publish() method

    room.publish(document.getElementById("localDisplay"){
        display: display,
        constraints: constraints,
        record: false,
        receiveVideo: false,
        receiveAudio: false
    }).on(STREAM_STATUS.FAILED, function (stream) {
        console.warn("Local stream failed!");
        setStatus("#localStatus", stream.status());
        onMediaStopped(room);
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        setStatus("#localStatus", stream.status());
        onMediaPublished(stream);
    }).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
        setStatus("#localStatus", stream.status());
        onMediaStopped(room);
    });

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

RoomStatusEvent JOINED JOINED code

connection.join({name: getRoomName(), record: isRecord()}).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

connection.join({name: getRoomName(), record: isRecord()}).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, is passed to the participant.play() method.

...

10. Stop of streaming.

stream.stop()   code

function onMediaPublished(stream) {
    $("#localStopBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);
    ...
}

11. Receiving the event confirming successful streaming stop

StreamStatusEvent UNPUBLISHED UNPUBLISHED code

room.publish(document.getElementById("localDisplay"){
    display: display,
    constraints: constraints,
    record: false,
    receiveVideo: false,
    receiveAudio: false
}).on(STREAM_STATUS.FAILED, function (stream) {
    ...
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
    ...
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    setStatus("#localStatus", stream.status());
    onMediaStopped(room);
});

12. Leaving conference room

room.leave()   code

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

...

stream.isAudioMuted(), stream.isVideoMuted(), stream.muteAudio(), stream.unmuteAudio(), stream.muteVideo(), stream.unmuteVideo()   code

function onMediaPublished(stream) {
    ...
    $("#localAudioToggle").text("Mute A").off('click').click(function(){
        if (stream.isAudioMuted()) {
            $(this).text("Mute A");
            stream.unmuteAudio();
        } else {
            $(this).text("Unmute A");
            stream.muteAudio();
        }
    }).prop('disabled', false);
    $("#localVideoToggle").text("Mute V").off('click').click(function() {
        if (stream.isVideoMuted()) {
            $(this).text("Mute V");
            stream.unmuteVideo();
        } else {
            $(this).text("Unmute V");
            stream.muteVideo();
        }
    }).prop('disabled',false);
}

...

participant.sendMessage()   code

When Send button is clicked,

...