diff --git a/.gitignore b/.gitignore
index 92b3fa43..bf415adc 100644
--- a/.gitignore
+++ b/.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
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea0e841c..eaad623b 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/README.md b/README.md
index 8ffbdf36..3da5213d 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,34 @@
# Twilio Video Quickstart for JavaScript
-[](http://travis-ci.org/twilio/video-quickstart-js) [](https://ci.appveyor.com/project/markandrus/video-quickstart-js)
+[](http://travis-ci.org/twilio/video-quickstart-js) [](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.
+
+
+
+## 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
```
@@ -27,21 +36,43 @@ 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
+```
-
+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
diff --git a/examples/autorenderhint/public/index.css b/examples/autorenderhint/public/index.css
new file mode 100644
index 00000000..e021fc00
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/examples/autorenderhint/public/index.html b/examples/autorenderhint/public/index.html
new file mode 100644
index 00000000..10e7041a
--- /dev/null
+++ b/examples/autorenderhint/public/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Video Track Automatic Controls
+
+
+
+
+
+
+