Master

.gitignore

@@ -44,18 +44,11 @@ jspm_packages
 
 # Misc
 .DS_Store
+package-lock.json
 
 # The generated index.js
-quickstart/public/index.js
-examples/bandwidthconstraints/public/index.js
-examples/codecpreferences/public/index.js
-examples/localvideofilter/public/index.js
-examples/localvideosnapshot/public/index.js
-examples/mediadevices/public/index.js
+**/public/index.js
 
 # The generated helpers.js
-examples/bandwidthconstraints/public/helpers.js
-examples/codecpreferences/public/helpers.js
-examples/localvideofilter/public/helpers.js
-examples/localvideosnapshot/public/helpers.js
-examples/mediadevices/public/helpers.js
+**/public/helpers.js
+**/public/helpers*.js

CHANGELOG.md

@@ -1,6 +1,11 @@
+
 # 1.0.0
 =======
-
+* Updated Media Device Selection app to Connect to Room.
+* Added an example app to demonstrate Network quality API.
+* Added an example app to demonstrate Room State Changes.
+* Added an example app to demonstrate Dominant Speaker API.
+* Updated twilio-video to 2.0.0.
 * Added an example app to demonstrate Codec Preferences API.
 * Added an example app to demonstrate Bandwidth Constraints API.
 * Added an example app to demonstrate Local Video Filter.

README.md

@@ -1,47 +1,78 @@
 # 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)
+
+_For Twilio Video 1.x Quickstart, go [here](https://github.com/twilio/video-quickstart-js/tree/1.x)._
+
+## Overview
 
 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:
+own video apps with Twilio Video.
+
+![screenshot of chat app](quickstart/public/quickstart.png)
+
+## Setup Requirements
 
-* 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).
+Before we begin, we need to collect all the config values we need to run the application:
 
-## A Note on API Keys
+- Account SID: Your primary Twilio account identifier - find this [in the console here](https://www.twilio.com/console).
+- API Key SID: Used to authenticate - [generate one here](https://www.twilio.com/console/runtime/api-keys).
+- API Key Secret: Used to authenticate - [just like the above, you'll get one here](https://www.twilio.com/console/runtime/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, 
+### A Note on API Keys
+
+When you generate an API key pair at the URLs above, your API Key Secret will only
+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
 ```
 
+## Running The Application
+
 Now we should be all set! Run the application:
+
 ```bash
 npm start
 ```
 
-Your application should now be running at [http://localhost:3000](http://localhost:3000). Just enter
-the name of the room you want to join and click on 'Join Room'. Then,
-open another tab and join the same room. Now, you should see your own
-video in both the tabs!
+Your application should now be running at [http://localhost:3000](http://localhost:3000). You will
+be prompted to test and choose your microphone and camera. On desktop browsers, your choices will
+be saved. _On mobile browsers, you will be asked to test and choose your microphone and camera every
+time you load the application in order to make sure they are not reserved by another application_.
+
+After choosing your input devices, you will be prompted to enter your Room name and user name, following
+which you will join the Room. Now, all you have to do is open another tab and join the same Room in order
+to see and hear yourself on both tabs!
+
+[joinroom.js](quickstart/src/joinroom.js) demonstrates how to use the SDK APIs to build a multi-party
+video sesssion. You can start building your own application by incorporating this code into your own
+application, and build your user interface around it.
+
+## Running On Multiple Devices
+
+You can use [ngrok](https://ngrok.com/) to try your application
+on different devices by creating a secure tunnel to your application server:
+
+```bash
+ngrok http 3000
+```
 
-![screenshot of chat app](https://s3.amazonaws.com/com.twilio.prod.twilio-docs/images/video2.original.png)
+You will get a URL of the form `https://a1b2c3d4.ngrok.io` which can be loaded on a browser from a device
+different than the one where your application server is running.
 
 ## Examples
 

examples/autorenderhint/public/index.css

@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300');
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+[data-toggle="collapse"].collapsed .if-not-collapsed {
+  display: none;
+}
+
+[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
+  display: none;
+}
+
+.align {
+  align-content: flex-start;
+}
+
+div.container-fluid {
+  height: 100%;
+}
+
+div.row {
+  height: 100%;
+}
+
+div.row.thin-gutters {
+  margin: 0 2px 0 2px;
+}
+
+div.row.thin-gutters > .col,
+div.row.thin-gutters > [class*="col-"] {
+  padding: 8px 8px;
+}
+
+div.card {
+  border: none;
+  overflow-y: auto;
+}
+
+div.card-block {
+  margin: 5px;
+}
+
+div.col-sm-6, div.col-sm-6 {
+  max-height: fit-content;
+}
+
+
+pre.language-javascript {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 13px;
+}
+
+pre.language-javascript a {
+  color: aquamarine;
+  text-decoration: underline;
+}
+
+pre.language-javascript a:hover {
+  text-decoration: none;
+}
+
+div#media-container {
+  position: relative;
+  display: grid;
+  grid-template-areas: 'content';
+  max-width: 100%;
+}
+
+span#trackIsSwitchedOff {
+  position: absolute;
+  z-index: 3;
+  width: 67px;
+  font-size: .9em;
+  right: 1%;
+  top: 1%;
+  align-items: center;
+  max-width: max-content;
+}
+
+video {
+  width: 100% !important;
+  height: auto !important;
+  border: none;
+}
+
+div#bg-img {
+  width: 100% !important;
+  height: auto !important;
+  background-color: lightgrey !important;
+  background-image: url('https://static0.twilio.com/marketing/bundles/archetype/img/logo-wordmark.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+  box-sizing: content-box;
+}
+
+div.bitrategraph {
+  margin-top: 5px;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  div.col-sm-8, div.col-sm-4 {
+    max-width: 100%;
+    flex: 100%;
+  }
+
+  div.col-sm-8 {
+    height: 40%;
+  }
+
+  div.col-sm-4 {
+    height: 60%;
+  }
+
+  pre.language-javascript {
+    font-size: 12px;
+  }
+}

examples/autorenderhint/public/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Video Track Automatic Controls</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
+  <link rel="stylesheet" href="prism.css">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row thin-gutters align">
+      <div class="col-sm-6">
+        <div class="card">
+          <div class="card-block">
+            <h4 class="card-title">
+              Video Track Automatic Controls
+            </h4>
+            <button class="btn btn-primary collapsed d-md-none" type="button" data-toggle="collapse" data-target="#collapseSnippet" aria-expanded="false" aria-controls="collapseSnippet">
+              <span class="if-collapsed">Show Code</span>
+              <span class="if-not-collapsed">Hide Code</span>
+            </button>
+            <div class="collapse dont-collapse-sm d-md-block" id="collapseSnippet">
+              <pre id="shown-snippet" class="language-javascript"></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="card">
+          <div class="card-block">
+            <h4 class="card-title">Remote Video Controls</h4>
+            <div id="userControls">
+              <div class="card-block">
+                Toggle Visibility:
+                <button id="showVideo" type="button" class="btn btn-primary disabled">Show</button>
+                <button id="hideVideo" type="button" class="btn btn-primary disabled">Hide</button>
+              </div>
+              <div class="card-block">
+                Video Size:
+                <select id= "renderDimensionsOption" class="btn btn-primary dropdown-toggle disabled">
+                  <option value="" disabled selected hidden>Render Dimensions</option>
+                  <option value="qHD">960x540</option>
+                  <option value="VGA">640x480</option>
+                  <option value="QCIF">176x144</option>
+                </select>
+              </div>
+            </div>
+            <div class="card-block">
+              <h4 class="card-title">Remote Video Track</h4>
+              <div id="media-container" style="width: 960px; height: 540px">
+                <div id="bg-img" aria-hidden="true" hidden></div>
+                <video id="remotevideo" aria-hidden="true"></video>
+                <span id="trackIsSwitchedOff" class="badge badge-success"></span>
+              </div>
+            </div>
+            <h4 class="card-title">Video Bitrate</h4>
+            <div id="videobitrategraph" class="bitrategraph">
+              <canvas id="videobitratecanvas"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="index.js"></script>
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+</body>
+</html>