GithubHelp home page GithubHelp logo

ollienntsh / reactrtc Goto Github PK

View Code? Open in Web Editor NEW

This project forked from oslabs-beta/reactrtc

0.0 1.0 0.0 23.58 MB

NPM package that simplifies set-up of WebRTC as importable React components

JavaScript 92.47% CSS 6.59% HTML 0.95%

reactrtc's Introduction

ReactRTC

ReactRTC-beta is a JS library that brings the real-time communication capabilities of WebRTC into React applications.

ReactRTC simplifies the implementation of WebRTC by providing developers with a customizable react component and signalling server module for the back-end.

Features

  • Live video & audio streaming capabilities.
  • GUI interface providing key user functionality.
  • Signalling server module utilizing websockets.
  • Multi-user support through the implementation of server side rooms.

Installing


npm install react-rtc-real

ReactRTC runs on React^16.11.0 and requires the following dependencies to operate.

Import the <RTCMesh /> component into your React application to begin.

import RTCMesh from 'react-rtc-real';
require('react-rtc-real/assets/index.css');

To set the URL of the signaling server pass the URL into props like so.
<RTCMesh URL=*url goes here* />

URL must be a websocket, pre-pended with wss://
Import Demo

_*_*_*_*_*_*_*_

To set up Signaling Server to find remote client, import to your server.js file. There should only be 3 lines of code added to your server.js file, numbered below. (assuming Node/Express is being used):

[1]: const SignalServer = require('react-rtc-real/server/SignalServer.js'); 

Find your server instance, which will be invoking the http.createServer(), for example:

 const server = https.createServer(app); 

Create the Signal Server instance and connect to it:

[2]: const signal = new SignalServer({ server });
[3]: signal.connect(); 

Make sure your server instance is listening for the PORT number, like so:

server.listen(3000, () => console.log('listening on 3000'));

Choose your preferred tech for exposing a PORT for Signal Server.

Using ngrok: https://ngrok.com/download

Use the same PORT number and call in terminal (ie. 3000):

 ./ngrok http 3000 

Using LocalTunnel:

npm install -g localtunnel

lt --port 3000 --subdomain chooseUniqueName

Signal Demo



*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*
Demo

Use Gif



*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*

Authors

  • Michael Romero
  • Joseph Wolensky
  • Diane Wu
  • Edwin Lin

Licenses

This project is licensed under the MIT License - see the LICENSE file for details

reactrtc's People

Contributors

michaelsromero avatar edwinlin avatar dianewudw avatar excelsiorhorizon avatar dependabot[bot] avatar

Watchers

James Cloos 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.