...
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
function onJoined(room) { $("#joinBtn").text("Leave").off('click').click(function(){ $(this).prop('disabled', true); room.leave().then(onLeft, onLeft); }).prop('disabled', false); ... } |