skyway / old-skyway-screenshare

[Deprecated] This is a library for easy implementation of screen sharing for WebRTC.
Other
24 stars 11 forks source link

⚠️ Deprecated

これは旧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.

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

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 });

start

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

screenshare.stop();

isScreenShareAvailable

var result = screenshare.isScreenShareAvailable();

Event

type=ScreenShareInjected

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

then run build commands

the files are stored in the dist directory!

LICENSE & Copyright

LICENSE