MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-22 16:05:03 +08:00
Code Issues Releases Wiki Activity

readme stuff + add .env.template

Browse Source
This commit is contained in:
ian ramzy 2020-03-28 14:01:35 -04:00
parent e783f9e488
commit 89d16a9bb3
5 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.env
View File

@ -1,4 +1,9 @@
# Required for all uses
# It takes like 2 mins to get a free twilio account https://www.twilio.com/login
TWILIO_ACCOUNT_SID=ACfc9705a2b725a7a314995eb8635a9079
TWILIO_AUTH_TOKEN=9ab36b8ac190d20687aff0561749dbc1
# Example data of how yours should look, these are NOT real credentials
# TWILIO_ACCOUNT_SID=ACfc9705a2b725a7a314995eb8635a1234
# TWILIO_AUTH_TOKEN=9ab36b8ac190d20687aff0561234dbc1

9
.env.template Normal file
View File

@ -0,0 +1,9 @@
# Required for all uses
# It takes like 2 mins to get a free twilio account https://www.twilio.com/login
TWILIO_ACCOUNT_SID=YourAccountSID
TWILIO_AUTH_TOKEN=YourAccountAuthToken
# Example data of how yours should look, these are NOT real credentials
# TWILIO_ACCOUNT_SID=ACfc1205a2b725a7a314995eb8635a1234
# TWILIO_AUTH_TOKEN=9ab12b8ac190d20687aff0561234dbc1

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules/
.DS_Store
/.idea
/.idea
.env

30
README.md
View File

@ -1,24 +1,36 @@
# Video Chat
A simple video chat between two clients as an example of how to connect two browsers via WebRTC using Twilio STUN/TURN infrastructure.
Read the blog post to see how to build this: [Getting Started with WebRTC using Node.js, Socket.io and Twilio’s NAT Traversal Service](https://www.twilio.com/blog/2014/12/set-phasers-to-stunturn-getting-started-with-webrtc-using-node-js-socket-io-and-twilios-nat-traversal-service.html).
# Decentralized Video Chat
[![Author](https://img.shields.io/badge/Author-ianramzy-brightgreen.svg)](https://ianramzy.com)
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
[![Donate](https://img.shields.io/badge/Donate-PayPal-brightgreen.svg)](https://paypal.me/ianramzy)
![GitHub repo size](https://img.shields.io/github/repo-size/ianramzy/decentralized-video-chat.svg)
[![Repo Link](https://img.shields.io/badge/Repo-Link-black.svg)](https://github.com/ianramzy/decentralized-video-chat)
# → https://neonchat.io
Decentralized video chat platform powered by WebRTC using Twilio STUN/TURN infrastructure.
# Quick start
* Clone this repo
```
git clone https://github.com/philnash/video-chat.git
cd video-chat
git clone https://github.com/ianramzy/decentralized-video-chat
cd decentralized-video-chat
```
* Install dependencies
```
npm install
```
* Create a `.env` file copying `.env.template`. Fill in your `Account SID` and `Auth Token` from your [Twilio console](https://www.twilio.com/console)
* Create a `.env` file copying `.env.template` (You copy the file using the command below).
* Fill in your `Account SID` and `Auth Token` from your [Twilio console](https://www.twilio.com/console)
It takes 2 minutes to sign up for a free account.
```
cp .env.template .env
```
* Start the server
```
npm start
```
* Open two browsers on your laptop and point them `localhost:3000`. If you want to use a client on another computer/mobile, make sure you publish your server on an HTTPS connection (otherwise the camera may not work). You can use a service like [ngrok](https://ngrok.com/) for that.
* Click on the "Get Video" button on both browsers
* Click on button "Call" on one of the browser, to establish the video call
* Open two browsers on your laptop and point them `localhost:3000`.
* If you want to use a client on another computer, make sure you publish your server on an HTTPS connection.
You can use a service like [ngrok](https://ngrok.com/) for that.

4
public/reference/additional.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Template</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/landing.css">
</head>
<body class="has-animations">
<div class="body-wrap">
@ -554,6 +554,6 @@
</div>
</footer>
</div>
<script src="../js/main.min.js"></script>
<script src="../js/landing.js"></script>
</body>
</html>