video-chat icon indicating copy to clipboard operation
video-chat copied to clipboard

A video calling application that uses React and WebRTC to create a video chatting system that anybody can use without having to create an account and start contacting friends one on one or in groups....

video-chat

This project was generated with React CLI version 17.0.2

This project was generated with Node.JS Open CLI version 14.16.1

Frontend

npx create-react-app appname

Run npm start for a dev server. Navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.

packages and dependencies

add this script to index.html after

tag -> <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"> </script> <p>npm install socket.io-client</p> <p>npm install --save react-router-dom</p> <p>npm install --save react-redux redux</p> <p>npm install redux-devtools-extension --save</p> <p>npm install --save react-icons</p> <h1>Backend</h1> <p>Run <code>npm start</code> for a dev server. Navigate to <code>http://localhost:5000/</code></p> <h2>packages and dependencies</h2> <p>npm init -> set entry point as 'server.js'</p> <p>npm install --save express</p> <p>npm install --save socket.io</p> <p>npm install --save peer</p> <p>npm install --save uuid // for unique id of group calls</p> <h2>React Help</h2> <p>For help getting started with React, view our <a href="https://reactjs.org/docs/getting-started.html" rel="nofollow" target="_blank" >online documentation</a>, which offers tutorials, samples and guidance.</p> <h2>screenshots</h2> <p>Login</p> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/login.JPG" width="800"> <p>Dashboard</p> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/dashboard.JPG" width="800"> <p>Calling</p> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/calling.JPG" width="800"> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/calling2.JPG" width="800"> <p>Chat</p> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/chat_calling.JPG" width="800"> <p>Group Call</p> <img src="https://github.com/shubhamkhatal70/video-chat/raw/master/screenshots/groupcall.JPG" width="800">