Skip to content
This repository has been archived by the owner. It is now read-only.
[Deprecated] This is a library for easy implementation of screen sharing for WebRTC.
Branch: master
Clone or download
Latest commit 411a2f8 May 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
chrome-extension fix typo Nov 8, 2017
examples make error message english Aug 31, 2017
src Fix comments Mar 23, 2018
.babelrc Init Aug 18, 2017
.eslintrc Init Aug 18, 2017
.gitignore Add zip extension cmd Aug 21, 2017
LICENSE Change Lisence Sep 5, 2017
README.md Update README.md May 15, 2019
README_ja.md add comment about "matches" Sep 12, 2017
package-lock.json Change ver from 1.0.0 to 1.0.1 Mar 26, 2018
package.json Change ver from 1.0.0 to 1.0.1 Mar 26, 2018
webpack.config.js revert the name back to skyway Aug 31, 2017

README.md

⚠️ Deprecated

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.

Screen Capture


SkyWay ScreenShare Library

This is a library for easy implementation of screen sharing in WebRTC applications. This repository includes source code for the Chrome extension.

Installation

1. Library

  • 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
    

2. Chrome extension

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:

  1. Access to chrome://extensions/
  2. Enable 'Developer mode'
  3. Click the 'Load unpacked extension...' and specify the following directory
./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

3. Firefox add-on

As of Firefox 52, no installation is needed to use screenshare on firefox.

API reference

var screenshare = ScreenShare.create({ debug: true });
  • options (This argument is optional)
    • debug (boolean)
      • Output the debug log on the browser developer console.

start

  • Start the screen share.
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.

stop

  • Stop tracks of stream obtained from start()
screenshare.stop();

isScreenShareAvailable

  • Chrome: Check whether the extension is installed or not. <true or false>
  • Firefox: Returns true.
  • Others: Returns false.
var result = screenshare.isScreenShareAvailable();

Event

type=ScreenShareInjected

  • When using inline installation for the Chrome extension, this event is fired when the script finishes loading. By handling this event, you can start ScreenShare feature automatically. Please note that you have to change 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);

Sample

SkyWay ScreenShare Sample App

https://example.webrtc.ecl.ntt.com/screenshare/index.html

Contributing

Make sure you have nodejs installed. Run npm install to get started.

After making changes in src/, chrome-extension/ run

  • npm run lint to validate

then 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!

LICENSE & Copyright

LICENSE

You can’t perform that action at this time.