Table of Contents |
---|
Screen sharing example
Screen sharing is available for Chrome and Firefox, and requires build-up and installation of the corresponding extensions from Chrome Store and Mozilla Add-ons.
Source code for the extensions is available by the following links:
Chrome Screen Sharing Extension
Firefox Screen Sharing Extension
. To share screen in Chrome before 73 the extension need to build and install, in the latest Chrome versions (73 and newer), Firefox and Safari screen can be shared without extension. Today, it is not recommended to use extension.
Excerpt |
---|
Extension for Google Chrome with publication in Chrome StoreSource code for the extension is available by the following link: Chrome Screen Sharing Extension Create a Google account1. Go to google.com and click ‘Sign in’ button 2. On the ‘Sign in’ page, click ‘Create account’ link 3. ‘Create your Google Account’ page will be opened Register as Chrome Web Store Developer1. Sign in to Chrome Developer Dashboard with the created Google account Customization for your domainFollow the procedures described below to use the extensions with your domain. Change:
Save your icons for the extension to chrome-extension directory and edit the file names in "icons" and "web_accessible_resources". (For more information, see Manifest - Icons and Supplying Images.) Package the extensionPackage files from chrome-extension folder into ZIP archive. Publish the extension1. Sign in to Chrome Developer Dashboard 3. Accept the developer agreement 4. On the ‘Upload’ page, choose the chrome-extension.zip file and click ‘Upload’ button 5. When the extension is uploaded, the page for editing the extension draft will be opened 6. The extension will appear in the developer dashboard A published extension will have status ‘Published’ as on the image below. For more information, see Chrome Web Store Publishing Tutorial. Extension Inline InstallationExtension installation can be initiated by clicking a link on the Screen Sharing client page. Follow the procedures described below to use the client with your extensions. 1. When publishing, select ‘Inline Install’ option 2. Verify and add website with your domain to the extension - Google Search Console page will open in a new tab - A page with the instruction for the site verification will open - If the verification is passed, a page confirming successful verification will be opened - The website will appear in the list in the extension options and the extension can be associated with the site |
...
Go to accounts.firefox.com and create a Firefox account for your email address (e.g. a Gmail address).
Sign in to Mozilla Add-ons
1. Go to Mozilla Add-ons and click ‘Log in’ link
2. Enter the email address used to create the Firefox account and click ‘Continue’ button
3. ‘Sign in’ page will be opened
Enter the Firefox account password and sign in.
Customization for your domain
Edit the extension manifest file package.json and index.js of the Firefox add-on.
In package.json change:
- title
- name
- id
- description
- author
- homepage
In index.js replace flashphoner.com with your domain.
Packaging and publication in Mozilla Add-ons
To package Firefox add-on, you will need to install additional tools
- NPM
- JPM
Install prerequisites
The steps below describe how to install the prerequisites on Windows.
(For more information, see the guide from Mozilla.)
1. Install Node.js
- Download the installer from nodejs.org
- Run the downloaded installer
- Follow thru the installation wizard: accept the license agreement and the default installation settings
- Restart the computer
2. Make sure that NPM is installed: run command npm -v in command line
3. Install JPM: run npm install jpm –global or npm install jpm command in command line
4. Make sure that JPM is installed: run command jpm in command line
Package the add-on
1. Open command line and navigate to firefox-extension directory
2. Execute jpm xpi command to create XPI file
Submit the add-on at Mozilla portal
1. Sign in to Mozilla Add-ons
2. Go to ‘Tools’ | ‘Submit a New Add-on’
3. Select the created XPI
4. When the file is uploaded, click ‘Continue’ to follow the submission steps
After the submission, the add-on will appear in the submissions list (‘Tools’ | ‘Manage My Submissions’).
See more on publishing add-on to Mozilla here.
Code of the example for Chrome and Firefox
This example uses Flashphoner extensions for work with domain *.flashphoner.com. For work with your domain, build up and publish your extensions as described above.
As temporary solution, IP address of your WCS server can be added to file C:\Windows\System32\drivers\etc\hosts (on Windows OS) as test.flashphoner.com. That way, you will be able to test your WCS server with domain test.flashphoner.com till the extensions for your domain are built up.
With Chrome, the example works only by https://.
The path to the source code of the example on WCS server is:
/usr/local/FlashphonerWebCallServer/client/examples/demo/streaming/screen-sharing
screen-sharing.css - file with styles
screen-sharing.html - page of the screen sharing streamer
screen-sharing.js - script providing functionality for the streamer
This example can be tested using the following address:
https://host:8888/client/examples/demo/streaming/screen-sharing/screen-sharing.html
Here host is the address of the WCS server.
For Firefox, this example requires as a dependency file flashphoner_screen_sharing-0.0.4-fx+an.xpi, which is located in the following directory:
/usr/local/FlashphonerWebCallServer/client2/examples/demo/dependencies/screen-sharing/firefox-extension
For Chrome, link to the extension is specified directly in file screen-sharing.html line 17
Code Block | ||||
---|---|---|---|---|
| ||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg"> |
Customization of the example script for Chrome
Edit screen-sharing.html line 17 and screen-sharing.js line 6
- in screen-sharing.html, chrome-webstore-item should point to your extension in Chrome Web Store
- in screen-sharing.js, change value of chromeScreenSharingExtensionId variable to your extension ID
To get extension ID, click ‘More info’ for the extension in Chrome Developer Dashboard.
Customization of the example script for Firefox
...
Configuring the clientEdit Screen-sharing.html and Screen-sharing.js
To get the ID of the extension, click ‘More info’ of this extension in Chrome Developer Dashboard. Media source parametersTo configure screen media source parameters, use parameters of the Configuration object passed to the init() method upon initializing of the Flashphoner API instance.
Parameter list
These parameters set marginal values of resolution and framerate (FPS). For instance, screenSharingVideoWidth = 1080 means the width of the source video cannot be more than 1080 pixels, but can be less. (i.e. when sending a stream of an app window that has the width of 720 pixels). System sound capture in Chrome browserIn Chrome browser, there is ability to translate audio stream from system sound source while capturing a screen. The feature is useful in screencasting, for example. To capture system sound, set "Share audio" option in Chrome extension dialog window while choosing streaming source window or browser tab: Chrome extension code:
Capture source (screen or window) management in Firefox browserIn Firefox browser, all the screen or some program window can be chosen as video stream source with constraints.video.mediaSource parameter code:
Source selection interface example: Program window capture Screen capture Screen sharing without extensionFirefox browserFirefox browser does not use extension to share screen Chromium based browsersSince Chrome 73 and Flashphoner WebSDK 0.5.28.2753.86 screen sharing is possible without extension. To do this
Safari browser in MacOSSince Safari 13 and Flashphoner WebSDK 0.5.28.2753.152 screen sharing is possible without extension. To do this
|
Change
- "Flashphoner Screen Sharing" to the name of the add-on (will be used in the install confirmation dialog)
- flashphoner_screen_sharing-0.0.4-fx+an.xpi to the name of the add-on XPI
- Hash value to hash generated for the XPI file
(See params object description here. You can easily get sha1 sum on Linux by using sha1sum <XPI file> command.)
Work with code of the screen sharing example
To analyze the code, let's take the version of file screen-sharing.js with hash cf0daabc6b86e21d5a2f9e4605366c8b7f0d27eb, which is available here and can be downloaded with corresponding build 0.3.18.1894.
1. Initialization of the API. line 11
API is initialized after loading the page. Chrome extension ID is passed to the init() method.
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({screenSharingExtensionId: extensionId}); |
2. Path to the Firefox add-on. line 178
Code Block | ||||
---|---|---|---|---|
| ||||
var params = {
Known limits1. In Chrome browser, picture resolution and FPS are set by source dimensions (screen, windows or browser tab) and by real picture updating speed, not by constraints/ This issue is fixed since Flashphoner WebSDK build 0.5.28.2753.152 2. System sound capture only works starting from Crome 74 |
Code of the example
This example uses Flashphoner extensions for work with domain *.flashphoner.com. For work with your domain, build up and publish your extensions as described above.
As temporary solution, IP address of your WCS server can be added to file C:\Windows\System32\drivers\etc\hosts (on Windows OS) as test.flashphoner.com. That way, you will be able to test your WCS server with domain test.flashphoner.com till the extensions for your domain are built up.
With Chrome, the example works only by https://.
The path to the source code of the example on WCS server is:
/usr/local/FlashphonerWebCallServer/client/examples/demo/streaming/screen-sharing
screen-sharing.css - file with styles
screen-sharing.html - page of the screen sharing streamer
screen-sharing.js - script providing functionality for the streamer
This example can be tested using the following address:
https://host:8888/client/examples/demo/streaming/screen-sharing/screen-sharing.html
Here host is the address of the WCS server.
For Chrome, link to the extension is specified directly in file screen-sharing.html line 17
Code Block | ||||
---|---|---|---|---|
| ||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg"> |
Analyzing the code
1. Initialization of the API.
Flashphoner.init() code
Chrome extension ID is passed to the init() method.
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({screenSharingExtensionId: extensionId}); |
2. Connection to WCS server.
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();
}); |
3. Receiving the event confirming successful connection
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 code
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = {
video: {
width: parseInt($('#width').val()),
height: parseInt($('#height').val()),
//WCS-2014. fixed window/tab sharing
frameRate: 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();
} |
5. Video streaming
session.createStream(), publish() code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({
name: streamName,
display: localVideo,
constraints: constraints
...
}).publish(); |
6. Receiving the event confirming successful streaming
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'.
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: localVideo, constraints: constraints }).on(STREAM_STATUS.PUBLISHING, function(publishStream){ /* * User can stop sharing screen capture using Chrome "stop" button. * Catch onended video track event and stop publishing. */ document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) { publishStream.stop(); }; document.getElementById(publishStream.id()).addEventListener('resize', function(event){ resizeVideo(event.target); }); setStatus(STREAM_STATUS.PUBLISHING); //play preview session.createStream({ "Flashphoner Screen Sharing": { URL: "../../dependencies/screen-sharing/firefox-extension/flashphoner_screen_sharing-0.0.4-fx+an.xpi", name: streamName, display: remoteVideo IconURL: ".../../dependencies/screen-sharing/firefox-extension/icon.png", }).play(); }).on(STREAM_STATUS.UNPUBLISHED, function(){ ... }).on(STREAM_STATUS.FAILED, function(){ Hash: "sha1:9c2bd6b0a22473cc721d7b3d3ecc72707b507f75", ... }).publish(); |
7. Receiving the event confirming successful preview stream playback
StreamStatusEvent PLAYING code
Code Block | ||||
---|---|---|---|---|
| ||||
toString: function () { return this.URL; } session.createStream({ name: }streamName, }; |
3. Connection to WCS server. line 91
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url display: remoteVideo }).on(SESSIONSTREAM_STATUS.ESTABLISHEDPLAYING, function(sessionpreviewStream){ //session connected, start streaming startStreaming(session); }).on(SESSION_STATUS.DISCONNECTED document.getElementById(previewStream.id()).addEventListener('resize', function(event){ setStatus(SESSION_STATUS.DISCONNECTED); onStoppedresizeVideo(event.target); }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED}); onStopped(); }); |
4. Video constraints. line 106
Type 'screen' is specified in the constraint for video stream.
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = { //enable stop button video: { onStarted(publishStream, previewStream); width: parseInt($('#width').val()), }).on(STREAM_STATUS.STOPPED, function(){ height: parseInt($('#height').val()),... frameRate: parseInt($('#fps').val()),}).on(STREAM_STATUS.FAILED, function(){ ... type: "screen" }).play(); |
8. Preview stream playback stop
stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onStarted(publishStream, previewStream) }{ }; |
5. Video streaming. line 114
After establishing connection to the server, new video stream is created with method session.createStream(), and function publish() is called to publish the stream.
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream($("#publishBtn").text("Stop").off('click').click(function(){ name: streamName, display: localVideo,$(this).prop('disabled', true); constraints: constraintspreviewStream.stop(); })...publish(prop('disabled', false); } |
6. Playback of preview video stream. line 131
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.9. Receiving the event confirming successful playback stop
StreamStatusEvent STOPPED code
On receiving the event, publishStream.stop() is called to stop screen sharing streaming
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: streamName, remoteVideo }).on(STREAM_STATUS.PLAYING, function(previewStream){ display: remoteVideo... }).on(STREAM_STATUS.PLAYINGSTOPPED, function(previewStream){ document.getElementById(previewStream.id()).addEventListener('resize'publishStream.stop(); }).on(STREAM_STATUS.FAILED, function(event){ resizeVideo(event.target); ... }); ).play(); |
10. Screen sharing streaming stop by click on Chrome extension button
publishStream.stop(). code
Code Block | ||||
---|---|---|---|---|
| ||||
//enable stop buttondocument.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) { onStarted(publishStream, previewStreampublishStream.stop(); }).on(STREAM_STATUS.STOPPED, function(){ ; |
11. Receiving the event confirming successful streaming stop
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, publishStream.stop(); display: localVideo, constraints: constraints }).on(STREAM_STATUS.FAILEDPUBLISHING, function(publishStream){ //preview failed, stop publishStream ... if (publishStream.status() == }).on(STREAM_STATUS.PUBLISHINGUNPUBLISHED, function() { setStatus(STREAM_STATUS.FAILEDUNPUBLISHED); //enable start button onStopped(); publishStream.stop();}).on(STREAM_STATUS.FAILED, function(){ } ... }).playpublish(); |
...
|