webrtc>> twilio-screensharing>> 返回
项目作者： ksocha

项目描述 ：
Simple React app that demonstrates how to use Twilio Programmable Video and implement browser extension free screen sharing feature
高级语言： JavaScript
项目地址: git://github.com/ksocha/twilio-screensharing.git
创建时间： 2018-12-17T19:27:35Z
项目社区：https://github.com/ksocha/twilio-screensharing
开源协议：MIT License
下载


Twilio Video chat with screen sharing - React app

This is a simple React app that demonstrates how to use Twilio Programmable Video and implement browser extension free screen sharing feature.

This project includes both backend and frontend part of the app. I’ve tried to simplify things as much I could.

Why

Various browsers support screen sharing by using custom extensions. While it works, it takes relatively a lot of time to implement such extension and publish it, not to mention that this kind of solution is not very user-friendly. With WebRTC trying to standardize the API, now we can try to implement a cross-browser solution.

Note that not all major browsers support the standard just yet. There are also some differences across various implementations. To handle these differences, we’re going to use WebRTC adapter library. That way, we’ll end up with a code that (hopefully) will require very little changes to enable screen sharing on remaining browsers. At the moment, only FireFox supports screen-sharing.

You can find more information on WebRTC standard implementation in the article.

Prerequisites

  • Active Twilio account (can be a trial account)
  • Node.js installed

How to run the app

To run the app locally, you need to start up the Express backend server and React dev server simultaneously.

To do this, simply:

  1. Navigate to the root of the project.
  2. Install the dependencies by executing yarn install

  3. Create .env file with Twilio account details in the root directory. It should look like this (replace with your own values):

    1. TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    2. TWILIO_API_KEY=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    3. TWILIO_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    You can obtain the values after logging to your account. API_KEY and API_SECRET pair must be generated here.

  4. Start up the Express server: node server.js

  5. Navigate to client sub-directory
  6. Install frontend dependencies by executing yarn install
  7. Start up the React dev server: yarn start

After this you can open http://localhost:3000/ in your browser, the app should be running.

To join the video room, type the user name, room name and click Join.