Logging

README.md

@@ -1,38 +1,39 @@
-
 # 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
 ```
 
 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.

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",

server/index.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /**
  * Load Twilio configuration from .env config file - the following environment
@@ -7,51 +7,55 @@
  * 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");
 });
 
 /**
  * Generate an Access Token for a chat application user - it generates a random
  * 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);
 });

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 }
+);