Page History

Extension for Google Chrome with publication in Chrome Store

Create a Google account

1. Go to google.com and click ‘Sign in’ button

Image Modified

2. On the ‘Sign in’ page, click ‘Create account’ link

Image Modified

3. ‘Create your Google Account’ page will be opened
Fill the required fields and click ‘Next step’ button to create the account.

Register as Chrome Web Store Developer

1. Sign in to Chrome Developer Dashboard with the created Google account
2. Pay a one-time $5 developer signup fee

Image Modified

Customization for your domain

Follow the procedures described below to use the extensions with your domain.
Edit manifest file manifest.json of the Chrome extension.

Change:

• name
• author
• description
• homepage_url
• under "externally_connectable":"matches" change flashphoner.com to your domain

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 extension

Package files from chrome-extension folder into ZIP archive.

Publish the extension

1. Sign in to Chrome Developer Dashboard
2. In the dashboard, click ‘Add new item’ button

Image Modified

3. Accept the developer agreement

Image Modified

4. On the ‘Upload’ page, choose the chrome-extension.zip file and click ‘Upload’ button

Image Modified

5. When the extension is uploaded, the page for editing the extension draft will be opened
Edit the extension as required and click ‘Save draft and return to dashboard’ button at the bottom of the page.

Image Modified

Image Modified

6. The extension will appear in the developer dashboard
Click ‘Publish’ link to publish the extension.

Image Modified

A published extension will have status ‘Published’ as on the image below.

Image Modified

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.
Note that the extension to be installed should be customized, published and approved before inline installation can be used.

Follow the procedures described below to use the client with your extensions.

1. When publishing, select ‘Inline Install’ option

Image Modified

2. Verify and add website with your domain to the extension
- Click ‘Add a New Site’

Image Modified

- Google Search Console page will open in a new tab
Enter URL with your domain.

Image Modified

- A page with the instruction for the site verification will open
Follow the procedure steps and click ‘Verify’ button.

Image Modified

- If the verification is passed, a page confirming successful verification will be opened

Image Modified

- The website will appear in the list in the extension options and the extension can be associated with the site

Image Modified

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.

Image Added

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.

var f = Flashphoner.getInstance();
var configuration = new Configuration();
....
configuration.screenSharingVideoWidth = 1920;
configuration.screenSharingVideoHeight = 1080;
configuration.screenSharingVideoFps = 10;
f.init(configuration);

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).

Capture source (screen or windows) 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

code:

    constraints.video.type = "screen";
    if (Browser.isFirefox()){
        constraints.video.mediaSource = $('#mediaSource').val();
    }
    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    })

Source selection interface example:

Image Added

Program window capture

Image Added

Screen capture

Image Added