...
For Chrome, link to the extension is specified directly in file screen-sharing.html html line 17
Code Block | ||||
---|---|---|---|---|
| ||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg"> |
...
1. Initialization of the API.
Flashphoner.init() code
Chrome extension ID is passed to the init() method.
...
Flashphoner.createSession() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ //session connected, start streaming startStreaming(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ setStatus(SESSION_STATUS.DISCONNECTED); onStopped(); }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED); onStopped(); }); |
...
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ //session connected, start streaming startStreaming(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }); |
4. Stream constraints setting
resolution and fps fps code
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = { video: { width: parseInt($('#width').val()), height: parseInt($('#height').val()), //WCS-2014. fixed window/tab sharing frameRate: {max: parseInt($('#fps').val())} } }; |
michrophone usage code
Code Block | ||||
---|---|---|---|---|
| ||||
if ($("#useMic").prop('checked')) { constraints.audio = { deviceId: $('#audioInput').val() }; } |
video source type and Chrome screen sharing without extension code
Code Block | ||||
---|---|---|---|---|
| ||||
constraints.video.type = "screen"; if ($("#woChromeExtension").prop('checked')) { constraints.video.withoutExtension = true; } |
Firefox media source code
Code Block | ||||
---|---|---|---|---|
| ||||
if (Browser.isFirefox()){ constraints.video.mediaSource = $('#mediaSource').val(); } |
...
session.createStream(), publish() code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: localVideo, constraints: constraints ... }).publish(); |
...
StreamStatusEvent PUBLISHING code
When the screen sharing stream is published, preview video stream is created with method session.createStream(), and function play() is called to start playback of the stream in <div> element 'remoteVideo'.
...
StreamStatusEvent PLAYING code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: remoteVideo }).on(STREAM_STATUS.PLAYING, function(previewStream){ document.getElementById(previewStream.id()).addEventListener('resize', function(event){ resizeVideo(event.target); }); //enable stop button onStarted(publishStream, previewStream); }).on(STREAM_STATUS.STOPPED, function(){ ... }).on(STREAM_STATUS.FAILED, function(){ ... }).play(); |
8. Preview stream playback stop
stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onStarted(publishStream, previewStream) { $("#publishBtn").text("Stop").off('click').click(function(){ $(this).prop('disabled', true); previewStream.stop(); }).prop('disabled', false); } |
...
StreamStatusEvent STOPPED code
On receiving the event, publishStream.stop() is called to stop screen sharing streaming
...
10. Screen sharing streaming stop by click on Chrome extension button
publishStream.stop(). code
Code Block | ||||
---|---|---|---|---|
| ||||
document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) { publishStream.stop(); }; |
...
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: localVideo, constraints: constraints }).on(STREAM_STATUS.PUBLISHING, function(publishStream){ ... }).on(STREAM_STATUS.UNPUBLISHED, function(){ setStatus(STREAM_STATUS.UNPUBLISHED); //enable start button onStopped(); }).on(STREAM_STATUS.FAILED, function(){ ... }).publish(); |