English | 日本語
We have released a new WebRTC platform, ECLWebRTC, to take the place of SkyWay. We will be shutting down the SkyWay servers in March 2018. Customers who are currently using SkyWay are required to migrate to ECLWebRTC by then or their services will stop working.
If you are looking for the repository of ECLWebRTC, please see the new ScreenShare Library.
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.git
Enter the SkyWay-ScreenShare directory and run the build script of JavaScript library:
cd SkyWay-ScreenShare && npm install && npm run build-library
Use 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:
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:
SkyWay-ScreenShare / firefox-addon / screenshare_firefox_addon.xpi
that are generated on the browserPublish 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]);
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.
});
stream.stop();
<true or false>
var result = screenshare.isEnabledExtension();
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/