Giter Club home page Giter Club logo

noinhome / webrtc-screen-share Goto Github PK

View Code? Open in Web Editor NEW

This project forked from viviemxd/webrtc-screen-share

0.0 2.0 0.0 37 KB

Test page for Chrome and Firefox screen / desktop capture and share feature, using WebRTC and node.js with a websocket for Peer-to-peer transport. WebRTC and JSEP used for offer / answer PeerConnection session description processing. GetUserMedia, GUM used for browser media interaction.

JavaScript 15.81% HTML 84.19%

webrtc-screen-share's Introduction

webrtc-screen-share

Test page for screen share feature, using WebRTC and node.js web socket transport. A very quick way for you to see how screen capture and share works using webrtc. This demo supports both Chrome and Firefox.

  • Uses node.js and websocket.
  • Only works using Google Chrome, Firefox.
  • Chrome can do screen share only in this demo. (must start Chrome on command line using --enable-usermedia-screen-capturing)
  • Firefox can do both screen share and window share.
  • No need for a Web Server, uses node.js as your server.
  • Tab capture or application share not supported in this demo.
  • Supports Secure HTTP and secure websocket wss.

screen capture uses getUserMedia API

  if (isChrome) {   
    constraints = { 
      video: {
        mandatory: {
          chromeMediaSource: 'screen',
          maxWidth: screen.width,
          maxHeight: screen.height,
          minFrameRate: 1,
          maxFrameRate: 5
        },  
        optional: []
    }}; 
  } else {
    constraints = { 
      video: {
        mediaSource: "screen"
      }   
    };  
  }

  function startMedia() {
    navigator.mediaDevices.getUserMedia(constraints, onstream, onerror);
  }

Setup prerequesites

  • Install Node.js and WebSocket(sudo npm install websocket)

Server Steps (Works on Linux and MacOS so far)

  • Clone this repo to your machine, does which not need to be to a web server.
  • Generate keys unless you have real ones, run these commands in the same folder as app.js.
    • openssl genrsa -out webrtcwwsocket-key.pem 1024
    • openssl req -new -key webrtcwwsocket-key.pem -out webrtcwwsocket-csr.pem
    • openssl x509 -req -in webrtcwwsocket-csr.pem -signkey webrtcwwsocket-key.pem -out webrtcwwsocket-cert.pem
  • Run 'sudo node app.js'
  • You may get errors, if you do then reinstall WebSocket in that folder, e.g. 'sudo npm install websocket'

Client Steps

  • (Only for Chrome) start chrome browser with flag --enable-usermedia-screen-capturing
  • (Only for Firefox) open about:config create media.getusermedia.screensharing.enabled and set to true
  • (Only for Firefox) open about:config in media.getusermedia.screensharing.allowed_domains append the IP address of your node server e.g. "192.168.1.2"
  • Point two browsers to, e.g. https://<your ip address>
    • Or point two tabs on same browser to, e.g. https://<your ip address>
    • To start two instances of Firefox on the same machine run: firefox --profilemanager
  • Accept any local unsecure certificate dialogues that appear on either browser.
  • Start media and share.

NOTE: Google intend on using Chrome extensions for desktop share for security reasons. The way of doing share using Chrome in this demo is for testing purposes only, that is why it is behind a flag. See this demo of share in an extension: https://github.com/emannion/webrtc-application-screen-share

NOTE: Firefox also recommends using an extension for screenshare, the advantage being not requiring the two config items mentioned in the client steps above.

webrtc-screen-share's People

Contributors

viviemxd avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.