diff --git a/README.md b/README.md index 07ffe5e3..47f02f76 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,25 @@ - # Twilio Video Quickstart for JavaScript -[![OS X/Linus Build Status](https://secure.travis-ci.org/twilio/video-quickstart-js.png?branch=master)](http://travis-ci.org/twilio/video-quickstart-js) [![Windows Build status](https://ci.appveyor.com/api/projects/status/3u69uy9c0lsap3dr?svg=true -)](https://ci.appveyor.com/project/markandrus/video-quickstart-js) +[![OS X/Linus Build Status](https://secure.travis-ci.org/twilio/video-quickstart-js.png?branch=master)](http://travis-ci.org/twilio/video-quickstart-js) [![Windows Build status](https://ci.appveyor.com/api/projects/status/3u69uy9c0lsap3dr?svg=true)](https://ci.appveyor.com/project/markandrus/video-quickstart-js) This application should give you a ready-made starting point for writing your own video apps with Twilio Video. Before we begin, we need to collect all the config values we need to run the application: -* Account SID: Your primary Twilio account identifier - find this [in the console here](https://www.twilio.com/console). -* API Key: Used to authenticate - [generate one here](https://www.twilio.com/console/runtime/api-keys). -* API Secret: Used to authenticate - [just like the above, you'll get one here](https://www.twilio.com/console/runtime/api-keys). +- Account SID: Your primary Twilio account identifier - find this [in the console here](https://www.twilio.com/console). +- API Key: Used to authenticate - [generate one here](https://www.twilio.com/console/runtime/api-keys). +- API Secret: Used to authenticate - [just like the above, you'll get one here](https://www.twilio.com/console/runtime/api-keys). ## A Note on API Keys When you generate an API key pair at the URLs above, your API Secret will only -be shown once - make sure to save this in a secure location, +be shown once - make sure to save this in a secure location, or possibly your `~/.bash_profile`. ## Setting Up The Application Create a configuration file for your application: + ```bash cp .env.template .env ``` @@ -28,11 +27,13 @@ cp .env.template .env Edit `.env` with the configuration parameters we gathered from above. Next, we need to install our dependencies from npm: + ```bash npm install ``` Now we should be all set! Run the application: + ```bash npm start ``` @@ -49,3 +50,19 @@ video in both the tabs! The project contains some use-case examples for the Twilio Video JS SDK. After running the application by following the instructions above, go to [http://localhost:3000/examples](http://localhost:3000/examples) to try them out. + +## Caveats + +If you want to use video on a mobile device, this project needs to be served over https. If you don't do that, +you won't get the prompts for "Can this site use your camera" which means you will probably need a reverse proxy + +To setup nginx as a reverse proxy you should use something like this in your nginx config + +``` + location / { + include proxy_params; + proxy_pass http://localhost:3000; + } +``` + +And then use certbot to setup an ssl certificate for the domain you are serving it with. diff --git a/package.json b/package.json index c26863fc..2ecb3c27 100644 --- a/package.json +++ b/package.json @@ -44,10 +44,12 @@ "dependencies": { "dotenv": "^4.0.0", "express": "^4.15.2", + "morgan": "^1.9.1", "prismjs": "^1.6.0", "stackblur-canvas": "^1.4.0", "twilio": "^3.0.0-rc.16", - "twilio-video": "^1.18.1" + "twilio-video": "^1.20.0", + "winston": "^3.2.1" }, "devDependencies": { "browserify": "^14.3.0", diff --git a/server/index.js b/server/index.js index 7bd92f36..08ccb1fd 100644 --- a/server/index.js +++ b/server/index.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; /** * Load Twilio configuration from .env config file - the following environment @@ -7,43 +7,47 @@ * process.env.TWILIO_API_KEY * process.env.TWILIO_API_SECRET */ -require('dotenv').load(); +require("dotenv").load(); -var http = require('http'); -var path = require('path'); -var AccessToken = require('twilio').jwt.AccessToken; +var http = require("http"); +var path = require("path"); +var AccessToken = require("twilio").jwt.AccessToken; var VideoGrant = AccessToken.VideoGrant; -var express = require('express'); -var randomName = require('./randomname'); +var express = require("express"); +var randomName = require("./randomname"); +var httpLogger = require("./logger"); // Create Express webapp. var app = express(); +// Turn on logging so you can see what requests are being sent to the server. +app.use(httpLogger); + // Set up the paths for the examples. [ - 'bandwidthconstraints', - 'codecpreferences', - 'localvideofilter', - 'localvideosnapshot', - 'mediadevices' + "bandwidthconstraints", + "codecpreferences", + "localvideofilter", + "localvideosnapshot", + "mediadevices" ].forEach(function(example) { var examplePath = path.join(__dirname, `../examples/${example}/public`); app.use(`/${example}`, express.static(examplePath)); }); // Set up the path for the quickstart. -var quickstartPath = path.join(__dirname, '../quickstart/public'); -app.use('/quickstart', express.static(quickstartPath)); +var quickstartPath = path.join(__dirname, "../quickstart/public"); +app.use("/quickstart", express.static(quickstartPath)); // Set up the path for the examples page. -var examplesPath = path.join(__dirname, '../examples'); -app.use('/examples', express.static(examplesPath)); +var examplesPath = path.join(__dirname, "../examples"); +app.use("/examples", express.static(examplesPath)); /** * Default to the Quick Start application. */ -app.get('/', function(request, response) { - response.redirect('/quickstart'); +app.get("/", function(request, response) { + response.redirect("/quickstart"); }); /** @@ -51,7 +55,7 @@ app.get('/', function(request, response) { * username for the client requesting a token, and takes a device ID as a query * parameter. */ -app.get('/token', function(request, response) { +app.get("/token", function(request, response) { var identity = randomName(); // Create an access token which we will sign and return to the client, @@ -80,5 +84,5 @@ app.get('/token', function(request, response) { var server = http.createServer(app); var port = process.env.PORT || 3000; server.listen(port, function() { - console.log('Express server running on *:' + port); + console.log("Express server running on *:" + port); }); diff --git a/server/logger.js b/server/logger.js new file mode 100644 index 00000000..dfb665f5 --- /dev/null +++ b/server/logger.js @@ -0,0 +1,27 @@ +const { createLogger, transports, format } = require("winston"); +const morgan = require("morgan"); + +const logger = createLogger({ + format: format.combine( + format.timestamp({ format: "YYYY-MM-DD HH:mm:ss:ms" }), + format.printf(info => `${info.timestamp} ${info.level}: ${info.message}`) + ), + transports: [ + new transports.File({ + filename: "./logs/express.log", + json: false, + maxsize: 5242880, + maxFiles: 5 + }), + new transports.Console() + ] +}); + +logger.stream = { + write: message => logger.info(message.substring(0, message.lastIndexOf("\n"))) +}; + +module.exports = morgan( + ":method :url :status :response-time ms - :res[content-length]", + { stream: logger.stream } +);