This is a library for easy implementation of screen sharing function in the WebRTC of Web applications. This repository includes the source code of Chrome extension and Firefox add-on.
-
In case of using CDN
<script src="https://skyway.io/dist/screenshare.js"></script>
-
In case of self building
Clone a copy of the SkyWay-ScreenShare git repo by running:
git clone git@github.com:nttcom/SkyWay-ScreenShare.gitEnter the SkyWay-ScreenShare directory and run the build script of JavaScript library:
cd SkyWay-ScreenShare && npm install && npm run build-libraryUse the generated libraries:
SkyWay-ScreenShare/dist/screenshare.js SkyWay-ScreenShare/dist/screenshare.min.js
Modify the manifest.json <SkyWay-ScreenShare/chrome-extension/src/manifest.json>:
{
"name": "Your extension name here",
"short_name": "Your extension short_name here",
"version": "Your extension version number here",
"manifest_version": 2,
"description": "Your extension description here",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"permissions": [
"desktopCapture",
"tabs"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": [""],
"js": ["content.js"],
"all_frames": true,
"run_at": "document_end"
}]
}Essential modification items are as follows:
| Item | Comment |
|---|---|
| name | Your extension name here. |
| short_name | Your extension short_name here. |
| version | Your extension version number here. |
| description | Your extension description here. |
| icons | Your extension icon files name here. Icon files should be located here < SkyWay-ScreenShare/chrome-extension/src/>.Icon files of SkyWay is included with in this repository. |
| matches | The site urls that will use this extension. Wildcards are accepted. Ex： "matches": ["https://*.skyway.io/*"] |
Enter the SkyWay-ScreenShare directory and run the build script for the Chrome extension:
cd SkyWay-ScreenShare && npm install && npm run build-chrome
Test the extension on Chrome:
- Access to chrome://extensions/
- Enable the 'Developer mode'
- Click the 'Load unpacked extension...' and specify the following directory
SkyWay-ScreenShare/chrome-extension/screenshare_chrome_extension/
Publish the extension: If you publish to the Chrome Web Store, please use of the following Zip file.
SkyWay-ScreenShare/chrome-extension/screenshare_chrome_extension.zip
Modify the main.js <SkyWay-ScreenShare/firefox-addon/src/lib/main.js>
var pageMod = require('sdk/page-mod');
var self = require('sdk/self');
var __temp = require('chrome');
var Cc = __temp.Cc;
var Ci = __temp.Ci;
var domains_to_add = [''];
var addon_domains = [];
var allowed_domains_pref = 'media.getusermedia.screensharing.allowed_domains';
var enable_screensharing_pref = 'media.getusermedia.screensharing.enabled';
....Essential modification items are as follows:
| Item | Comment |
|---|---|
| domains_to_add | Must be specified the domain of the site to enable the ScreenShare function. Wild card is available in the domain. Ex： var domains_to_add = ['*.skyway.io'] |
Modify the package.json SkyWay-ScreenShare/firefox-addon/src/package.json を修正します。
{
"name": "your_add-on_name_here",
"title": "Your add-on title here",
"description": "Your add-on description here",
"author": "Your add-on author here",
"version": "Your add-on version number here",
"license": "Your add-on license here",
"homepage": "Your add-on homepage url here",
"icon64": "icon64.png",
"icon": "icon48.png"
}Essential modification items are as follows:
| Item | Comment |
|---|---|
| name | Your add-on name here. |
| license | Your add-on license here. |
| title | Your add-on title here. |
| description | Your add-on description here. |
| author | Your add-on author here. |
| version | Your add-on version number here. |
| homepage | Your add-on homepage url here. |
| icon,icon64 | Your add-on icon files name here. Icon files should be located here < SkyWay-ScreenShare/firefox-addon/src/>. |
Installing the cfx command-line tool:
Foe more, see this web site: https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation
Enter the SkyWay-ScreenShare directory and run the pre build script of add-on:
cd SkyWay-ScreenShare && npm install && npm run pre-build-firefox
【Attention】Pre built will fail because the id is not described in package.json, but this is not a problem.
....
No 'id' in package.json: creating a new ID for you.
package.json modified: please re-run 'cfx xpi'
....
Enter the SkyWay-ScreenShare directory and run the build script of add-on:
cd SkyWay-ScreenShare && npm install && npm run build-firefox
Test the generated add-on file on the Firefox:
- Access to about:addons
- Drag-and-drop the add-on file
SkyWay-ScreenShare / firefox-addon / screenshare_firefox_addon.xpithat are generated on the browser
Publish the Addo-On: Please the following add-on file to download ready in the service site.
SkyWay-ScreenShare/firefox-addon/screenshare_firefox_addon.xpi
var screenshare = new SkyWay.ScreenShare([options]);- options
- debug (boolean)
- Output the debug log on the browser developer console.
- debug (boolean)
- Start the screen share.
screenshare.startScreenShare({
"Width": <number>,
"Height": <number>,
"FrameRate": <number>
},function(stream){
// success callback
// If successful, you can get a own stream object
},function(error) {
// error callback
},function() {
// onEnded callback(optional/Chrome only)
// You fire when the screen share has been finished.
});- Stop the Screen share.
- Executing the stop() method of the stream object obtained in startScreenShare
- Dedicated method implementation plan future
stream.stop();- Check whether the extension is installed or not.
<true or false>
var result = screenshare.isEnabledExtension();- In case of inline installation of Chrome extension, this event is fired when loading script is completed. With handling this event, you can start ScreenShare feature automatically. Please note that you have to change config.hostname in chrome-extension/src/background.js.
window.addEventListner('message', function(ev) {
if(ev.data.type === "ScreenShareInjected") {
console.log('screen share extension is injected, get ready to start');
startScreenShare();
}
}, false);https://skyway.io/examples/screenshare/
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create a new Pull Request