...
The screen sharing function can be used to publish a video stream that demonstrates the desktop or an application window.
WCS API uses a Chrome extensions for screen sharing. Firefox browser since version 52 does not require an extension.
| Excerpt Include | ||||||
|---|---|---|---|---|---|---|
|
Developer account
Create a Google account
1. Open google.com and click the ‘Sign in’ button
2. Click the ‘Create account’ link on the ‘Sign in’ page
3. The ‘Create your Google Account’ page opens
Fill in the required fields and click ‘Next step’ to create the account
Register as a developer at Chrome Web Store
1. Log in to Chrome Developer Dashboard using the created Google account
2. Make a one-time $5 fee to confirm the account
Browser extension
Download the source code of the extension, adapt it for your own domain and publish in the browser store as described below.
Customization
Edit manifest.json file of the Chrome extension.
Change the following:
- name
- author
- description
- homepage_url
In "externally_connectable":"matches" change flashphoner.com to your own domain
Add your icons to the chrome-extension directory and edit file names in "icons" and "web_accessible_resources". (For additional information, see Manifest - Icons and Supplying Images.)
Publishing
Pack files from the chrome-extension directory to a zip file. Publish the extension:
1. Log in to Chrome Developer Dashboard
2. Click the ‘Add new item’ button
3. Accept the developer agreement
4. Choose the chrome-extension.zip file and click the ‘Upload’ button on the ‘Upload’ page
5. After the extension is uploaded, the edit item page opens. Select options you need and click the ‘Save draft and return to dashboard’ button at the bottom of the page.
6. The extension appears in the developer dashboard
To publish the extension, click the ‘Publish’ link.
The published extension will have the ‘Published’ state as shown below.
For more information, see Chrome Web Store Publishing Tutorial
Example client
Download the WCS API source from here.
A client to demonstrate screen sharing, Screen-sharing.html is in the examples/demo/streaming/screen-sharing/ folder.
Client script: screen-sharing.js
Built-in extension installing
Built-in installing allows you to initiate installing of the screen sharing extension by clicking a link on the client page.
For the built-in installing to work, the extension must be customized, published and approved.
Follow the below steps to use the client with your own extensions
Extension options
1. Select the ‘Inline Install’ option when publishing
2. Confirm and associate with the extension the website with your domain
- Click ‘Add a New Site’
- Google Search Console opens in a new tab
Enter the URL with your domain.
- A website verification page opens.
Follow the required steps and click the ‘Verify’ button.
- if verification is successful, the corresponding page opens
- The verified site appears in the list of extension options, then you can associate the extensions with that website
Configuring the client
Edit Screen-sharing.html and Screen-sharing.js
- In Screen-sharing.html the chrome-webstore-item parameter should point to your extension in the Chrome Store
- In Screen-sharing.js replace the value of the chromeScreenSharingExtensionId parameter to the ID of your extension
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.
| Code Block | ||||
|---|---|---|---|---|
| ||||
var f = Flashphoner.getInstance();
var configuration = new Configuration();
....
configuration.screenSharingVideoWidth = 1920;
configuration.screenSharingVideoHeight = 1080;
configuration.screenSharingVideoFps = 10;
f.init(configuration); |
Parameter list
...
Parameter
...
Description
...
screenSharingVideoWidth
...
Screen media source width
...
screenSharingVideoHeight
...
Screen media source height
...
screenSharingVideoFps
...
Screen media source framerate
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).
Known issues
1. If the web applicaiton is inside an iframe element, publishing of the video stream may fail.
...