これは旧SkyWayのリポジトリです。新しいSkyWayへの移行をご検討ください。
This is the old SkyWay repository. Please consider migrating to the new SkyWay.
This project is no longer maintained.
Since Chrome 72 and Firefox 66, navigator.mediaDevices.getDisplayMedia()
is available.
You can get the screen stream through this API without any dependencies.
This is a library for easy implementation of screen sharing in WebRTC applications. This repository includes source code for the Chrome extension.
Using the CDN
<script src="https://cdn.webrtc.ecl.ntt.com/screenshare-latest.js"></script>
Building it yourself
Clone a copy of the skyway-screenshare git repo:
git clone git@github.com:skyway/skyway-screenshare.git
Enter the skyway-screenshare directory and run the build script of JavaScript library:
cd skyway-screenshare && npm install && npm run build:lib
Use the generated libraries:
dist/screenshare.js
dist/screenshare.min.js
Modify the manifest.json <chrome-extension/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 < chrome-extension/ >. |
matches | The site urls that will use this extension. Wildcards are accepted. It is recommended to add * at the end of urls because the match type is exact match.Ex: "matches": ["https://*.webrtc.ecl.ntt.com/*"] |
Run the build script for the Chrome extension:
mkdir dist
npm install && npm run build:ext
Test the extension on Chrome:
./chrome-extension/
Publish the extension: In order to publish the extension to the Chrome store, upload the following zip file.
./dist/screenshare_chrome_extension.zip
As of Firefox 52, no installation is needed to use screenshare on firefox.
var screenshare = ScreenShare.create({ debug: true });
screenshare.start({
width: <number>,
height: <number>,
frameRate: <number>,
mediaSource: <string>, // Firefox only
})
.then(function(stream) {
// success callback
// Get the media stream for the screen share
})
.catch(function(error) {
// error callback
});
Firefox only, you can specify one of window
, application
or screen
to mediaSource
.
start()
screenshare.stop();
<true or false>
true
.false
.var result = screenshare.isScreenShareAvailable();
config.hostname
in chrome-extension/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://example.webrtc.ecl.ntt.com/screenshare/index.html
Make sure you have nodejs installed. Run npm install
to get started.
After making changes in src/
, chrome-extension/
run
npm run lint
to validatethen run build commands
npm run build:lib
to build screenshare(.min).js
npm run build:ext
to build screenshare_chrome_extension.zip
the files are stored in the dist
directory!