Screen sharing is available for Chrome and Firefox. To share screen in Chrome before 73 the extension need to build and install, in the latest Chrome versions (73 and newer), Firefox and Firefox Safari screen can be shared without extension. Today, it is not recommended to use extension.
Extension for Google Chrome with publication in Chrome Store
Source code for the extension is available by the following link:
Create a Google account
1. 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 Developer
1. Sign in to Chrome Developer Dashboard with the created Google account
Customization for your domain
Follow the procedures described below to use the extensions with your domain.
Package the extension
Package files from chrome-extension folder into ZIP archive.
Publish the extension
1. 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 Installation
Extension 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
Configuring the client
Edit 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 parameters
To configure screen media source parameters, use parameters of the Configuration object passed to the init() method upon initializing of the Flashphoner API instance.
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 browser
In 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 browser
In Firefox browser, all the screen or some program window can be chosen as video stream source with constraints.video.mediaSource parameter
Source selection interface example:
Program window capture
Screen sharing without extension
Firefox browser does not use extension to share screen
Chromium based browsers
Since Chrome 73 and Flashphoner WebSDK 0.5.28.2753.86 screen sharing is possible without extension. To do this
Safari browser in MacOS
Since Safari 13 and Flashphoner WebSDK 0.5.28.2753.152 screen sharing is possible without extension. To do this
1. 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.
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg">
Analyzing the code
1. Initialization of the API.