readme stuff + add .env.template

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

7
.env
View File

@ -1,4 +1,9 @@
# Required for all uses # 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_ACCOUNT_SID=ACfc9705a2b725a7a314995eb8635a9079
TWILIO_AUTH_TOKEN=9ab36b8ac190d20687aff0561749dbc1 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

1
.gitignore vendored
View File

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

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 Twilios 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 # Quick start
* Clone this repo * Clone this repo
``` ```
git clone https://github.com/philnash/video-chat.git git clone https://github.com/ianramzy/decentralized-video-chat
cd video-chat cd decentralized-video-chat
``` ```
* Install dependencies * Install dependencies
``` ```
npm install 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 * Start the server
``` ```
npm start 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. * Open two browsers on your laptop and point them `localhost:3000`.
* Click on the "Get Video" button on both browsers * If you want to use a client on another computer, make sure you publish your server on an HTTPS connection.
* Click on button "Call" on one of the browser, to establish the video call You can use a service like [ngrok](https://ngrok.com/) for that.

View File

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