Giter VIP home page Giter VIP logo

react-webrtc's Introduction

WebRTC with react

This is a simple 1-to-1 video chat room example using react with webRTC and share screen API. This is experimental for learnig purposes. I hope that this project help you to learn something. You can test this on https://react-webrtc-example.herokuapp.com put a room id that you want to create and click enter the other peer have to use the same room id. Sometimes it takes a bit longer to connect(no longer than one minute).

android screenshot

Running locally

To run this application you need to create a TURN account. You can create one using this service http://numb.viagenie.ca/cgi-bin/numbacct

Change the .env.example to .env or .env.local

Put your turn account on the .env file

The folders

Front-end files are inside /src and the server files are inside /server folder

Install the dependencies

npm i

Start the application

npm run start:local

react-webrtc's People

Contributors

dependabot[bot] avatar diegogurgel avatar kevinjpuscan 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

react-webrtc's Issues

Username

Adding username functionality.

Unable to establish conenction.

I am running the application on localhost but for some reason when I enter the same URL in another tab, it does not show any connection and still says "Waiting for someone". Any solutions?

Socket problem when deploying to Heroku

I cloned the repo, created my turn account as suggested, and it works as expected on localhost. However when I deploy to heroku I get these errors:
Screen Shot 2020-03-22 at 5 20 19 PM

Any ideas?

Looking for contributors

Since the situation with corona virus began this repository started to get more hits. In order home have a more consistent solution I opened a couple issues. Those issues will walk towards a creation of a video chat application that people and small business can use for free and it will also help people that are learning how to create solutions like this.

If you got mentioned here it's because you somehow showed interest on this repository. I think this can be a good opportunity to contribute on open source project.

I also apologize if you found this mentioning invasive but o hope to see you as one of the contributors.

Happy coding!

@EmersonStark @jason-shen @kalyan312 @kevinmao96 @ptzagk @soumen-roy-001 @subtirelumihail @sushii2 @wonjungho @RobertaLara

Hi!! diegogurgel! i am your fan and i like your webrtc project so... i send you email and... i write here too about my problem

hi! my name is seong hun jeong and i am looking at your github repository in react-webrtc. but i have difficulty. it doesnt work in my local....mmmm So i wanna your help. i am running react and git clone your repository react-webrtc. and i run ngrok(because of access permission foreign access allow) but each view is running in each view(for example. user 'A' can watch view of user'A') but user'A' cant watch view of user'B' and user'B' cnat watch user'A'. but your test url is running correctly... i wanna really really your help...

Establishing connection not working on diff devices

the app is running perfectly on localhost but when deployed on heroku (even with correct stun and turn servers) , the app always keep waiting for someone and never establishing connection.
Note : the app establishes connection only if you open the same link on the same machine on another tab.
i looked at the code and had some observations , at server.js , the port is 8080 , how this is going to work dynamically on online deployment,
secondly , REACT_APP_SIGNALING_SERVER is always http://localhost:8080 when you pass it at video.js and this also isn't dynamic for online deployment.
i tried to solve this issue but i couldn't, any help will be appreciated.Thanks

Hide share screen button on mobile

Right now mobile browsers don't have the capability to share screen.

Screen Shot 2020-03-28 at 12 16 53 PM

It will be ok to remove it just using media queries to detect device by getting the pixel ratio or something else.

More than 2 video

Hallo, I want to call with more than 2 video (video conference).
Where I should edit the code, to change video call be a video conference?
help pls @diegogurgel

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.