Giter Club home page Giter Club logo

webrtc-video-room's Introduction

WebRTC video chat app with ReactJS

Synopsis

WebRTC audio/video conferencing app with user authentication using ReactJS.

Motivation

Simple ReactJS app that interacts with the WebRTC APIs to establish audio/video conference between 2 users, without a trip through a server.

Application Logic and Implementations

To connect two users over WebRTC, we exchange information to allow browsers to talk to each other. This process is called signaling and it is facilitated by using NodeJS and socket server chained to the express 4.0 engine to provide the plumbing. Other than signaling, no data has to be sent through a server. When a connection is successfully established and authentication and authorization are complete, stream data exchanged between peers is directed to a React component for rendering.

Demo

Demo of the app can be found on Heroku: https://webrtc-video-room-34aecfad71b7.herokuapp.com/

Installation

Once you have cloned this project, go ahead and

NPM

Use npm through the command line to install all required dependecies:

npm i
npm start

Docker

Or use it with Docker:

docker build -t webvideo .
docker run -d -p 3000:3000 webvideo

Access

The app can be accessed at:

https://localhost:3000

License

MIT License

Copyright (c) 2015 Dian Dimitrov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

webrtc-video-room's People

Contributors

dependabot[bot] avatar dondido avatar mko-x avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webrtc-video-room's Issues

Can not get it to work.

Hello there @dondido ! i am currently trying to run the code on a website called repl.it and everything looks fine but once i do npm i it shows me a bunch of errors and also tells me i should run npm audit fix which i do but to no avail. so can you please help me fix this? also here is a screenshot of the terminal after i typed npm start:
image

Feature request: screen sharing

I've been modifying this great repo in my own fork for some personal preferences, but my skills in react are not sufficient to add screen sharing to the list of features. Could you give some pointers how to implement this?

Issue on Build

The Source file is not completed and executable. Please update the full file with valid README.md

Node server not started

I tried 'npm start' after successful installation of npm dependencies.

but stays at:
\webrtc-video-room> npm start

[email protected] start C:\Users\myusername\Downloads\react demo\webrtc-video-room
node server.js

I didn't close it for 30-40 min but no progress.

my Node version is 13+ and I have also tried it with 8+ as i am having NVM installed.

but results in same.

But If parallelly I try same command it is showing

Error: listen EADDRINUSE :::3000

it means it is running but not showing and no results on browser."This page isn’t working"

Recording Capability

Fantastic prototype friend. Are you planning to build in video recording capabilities?

Only works in chrome

I have just checked the demo and i realize that only works if both browser are chrome
Why is this happening?

Adding Multiple Users To Room?

Hey, I am trying to add multiple users to each room. This is what I did server-side...

  socket.on('find', () => {
    const url = socket.request.headers.referer.split('/');
    room = url[url.length - 1];
    const sr = io.sockets.adapter.rooms[room];
    console.log("sr", sr)
    if (sr === undefined) {
      // no room with such name is found so create it
      socket.join(room);
      socket.emit('create');
    } else {
      socket.emit('join');
    } //else { // max two clients
      //socket.emit('full', room);
    //}
    console.log(room);
  });```

It seems to add multiple sockets to each room, then the client-side breaks down.

Want to change something in code

Hi,
I have downloaded this and now it is running fine. but it is taking the code from bundle.js
I want to change something in code, want to add my stuff on that. how it will run directly from react code. (from src folder)

Undefined States

I added this chat app into another react web app of mine.
However, when navigating to the room creation the console gives the error:
"Uncaught TypeError: Cannot read property 'setState' of undefined
at Socket.eval (CommunicationContainer.js?41c1:40)
at Socket.Emitter.emit (index.js?7297:133)
at Socket.onevent (socket.js?2851:278)
at Socket.onpacket (socket.js?2851:236)
at Manager.eval (index.js?40de:21)
at Manager.Emitter.emit (index.js?7297:133)
at Manager.ondecoded (manager.js?78eb:345)
at Decoder.eval (index.js?40de:21)
at Decoder.Emitter.emit (index.js?7297:133)
at Decoder.add (index.js?568d:251)
"

What would be causing this?

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.