From 213adfba1a0631dedfbe2d9c14146756ee3a00b8 Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Fri, 13 Oct 2017 08:59:05 +0200
Subject: [PATCH 01/11] Fix nit

---
 colors/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/colors/index.html b/colors/index.html
index ed8a903..55172e9 100644
--- a/colors/index.html
+++ b/colors/index.html
@@ -145,7 +145,7 @@
   <div>
     <img src="magenta-srgb.png">
   </div>
-  <div>No Color Profile</div>
+  <div>N/A</div>
   <div>
     <img src="red-nocolorprofile.png">
   </div>

From 570a9896ec25c8bc6d0f05a61ba4853eb591a302 Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Mon, 16 Oct 2017 14:56:28 +0200
Subject: [PATCH 02/11] Add colors gradient sample

---
 colors/gradient.html | 80 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 colors/gradient.html

diff --git a/colors/gradient.html b/colors/gradient.html
new file mode 100644
index 0000000..3de0264
--- /dev/null
+++ b/colors/gradient.html
@@ -0,0 +1,80 @@
+<style>
+  body {
+    display: grid;
+    grid-template-columns: 300px auto;
+    grid-column-gap: 24px;
+    grid-row-gap: 1px;
+  }
+  h2 {
+    margin: 0;
+    line-height: 150px;
+  }
+  div, canvas {
+    display: block;
+    width: 300px;
+    height: 150px;
+  }
+</style>
+
+<div id="div"></div>
+<h2>div.style.background = "linear-gradient"</h2>
+
+<canvas id="linearGradientCanvas"></canvas>
+<h2>canvas.getContext('2d').createLinearGradient</h2>
+
+<canvas id="customCanvas"></canvas>
+<h2>Gamma Corrected Gradient&trade;</h2>
+  
+<script>
+div.style.background = 'linear-gradient(to right, #00FF00, #0000FF)';
+
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function map(value, fromSource, toSource) {
+  return (value - fromSource) / (toSource - fromSource);
+}
+
+function getColour(startColour, endColour, min, max, value) {
+  var startRGB = hexToRgb(startColour);
+  var endRGB = hexToRgb(endColour);
+  var percentFade = map(value, min, max);
+
+  var diffRed = Math.pow(endRGB.r, 2.2) - Math.pow(startRGB.r, 2.2);
+  var diffGreen = Math.pow(endRGB.g, 2.2) - Math.pow(startRGB.g, 2.2);
+  var diffBlue = Math.pow(endRGB.b, 2.2) - Math.pow(startRGB.b, 2.2);
+
+  var red = Math.pow( Math.pow(startRGB.r, 2.2) + (diffRed * percentFade), 1 / 2.2);
+  var green = Math.pow( Math.pow(startRGB.g, 2.2) + (diffGreen * percentFade), 1 / 2.2);
+  var blue = Math.pow( Math.pow(startRGB.b, 2.2) + (diffBlue * percentFade), 1 / 2.2);
+
+  var result = 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
+  return result;
+}
+
+var ctx = customCanvas.getContext('2d');
+for (var i = 0; i <= customCanvas.width; i++) {
+  var newColour = getColour('#00FF00', '#0000FF', 0, customCanvas.width, i);
+    
+  ctx.beginPath();
+  ctx.moveTo(i, 0);
+  ctx.lineTo(i, customCanvas.height);
+  ctx.strokeStyle = newColour;
+  ctx.stroke();
+}
+ 
+var ctx = linearGradientCanvas.getContext('2d');
+
+var grd = ctx.createLinearGradient(0, 0, linearGradientCanvas.width, 0);
+grd.addColorStop(0, '#00FF00');
+grd.addColorStop(1, '#0000FF');
+
+ctx.fillStyle = grd;
+ctx.fillRect(0, 0, 300, 150);
+</script>

From 7c2682ced140129fa78a7e550654f8fcf08fc8f0 Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Mon, 16 Oct 2017 16:46:10 +0200
Subject: [PATCH 03/11] Add color space for canvas

---
 colors/gradient.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/colors/gradient.html b/colors/gradient.html
index 3de0264..11aa31c 100644
--- a/colors/gradient.html
+++ b/colors/gradient.html
@@ -6,6 +6,7 @@
     grid-row-gap: 1px;
   }
   h2 {
+    font-family: monospace;
     margin: 0;
     line-height: 150px;
   }
@@ -23,8 +24,11 @@ <h2>div.style.background = "linear-gradient"</h2>
 <h2>canvas.getContext('2d').createLinearGradient</h2>
 
 <canvas id="customCanvas"></canvas>
-<h2>Gamma Corrected Gradient&trade;</h2>
+<h2>Gamma Corrected Gradient&trade; in JS</h2>
   
+<canvas id="colorSpaceCanvas"></canvas>
+<h2>canvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linearPixelMath: true })</h2>
+
 <script>
 div.style.background = 'linear-gradient(to right, #00FF00, #0000FF)';
 
@@ -69,6 +73,21 @@ <h2>Gamma Corrected Gradient&trade;</h2>
   ctx.stroke();
 }
  
+
+//
+
+var ctx = colorSpaceCanvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linearPixelMath: true });
+
+var grd = ctx.createLinearGradient(0, 0, linearGradientCanvas.width, 0);
+grd.addColorStop(0, '#00FF00');
+grd.addColorStop(1, '#0000FF');
+
+ctx.fillStyle = grd;
+ctx.fillRect(0, 0, 300, 150);
+
+
+//
+
 var ctx = linearGradientCanvas.getContext('2d');
 
 var grd = ctx.createLinearGradient(0, 0, linearGradientCanvas.width, 0);

From dfb2c1134969a4e72d041fca3c14118245a1d0b8 Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Tue, 17 Oct 2017 10:20:33 +0200
Subject: [PATCH 04/11] Add p3 and rec2020 canvas

---
 colors/gradient.html | 49 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/colors/gradient.html b/colors/gradient.html
index 11aa31c..5189422 100644
--- a/colors/gradient.html
+++ b/colors/gradient.html
@@ -4,11 +4,12 @@
     grid-template-columns: 300px auto;
     grid-column-gap: 24px;
     grid-row-gap: 1px;
+    align-items: center;
   }
   h2 {
     font-family: monospace;
-    margin: 0;
-    line-height: 150px;
+    font-weight: normal;
+    font-size: 100%;
   }
   div, canvas {
     display: block;
@@ -26,9 +27,15 @@ <h2>canvas.getContext('2d').createLinearGradient</h2>
 <canvas id="customCanvas"></canvas>
 <h2>Gamma Corrected Gradient&trade; in JS</h2>
   
-<canvas id="colorSpaceCanvas"></canvas>
+<canvas id="srgbColorSpaceCanvas"></canvas>
 <h2>canvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linearPixelMath: true })</h2>
 
+<canvas id="p3ColorSpaceCanvas"></canvas>
+<h2>canvas.getContext('2d', { colorSpace: 'p3' })</h2>
+
+<canvas id="rec2020ColorSpaceCanvas"></canvas>
+<h2>canvas.getContext('2d', { colorSpace: 'rec2020' })</h2>
+
 <script>
 div.style.background = 'linear-gradient(to right, #00FF00, #0000FF)';
 
@@ -76,7 +83,7 @@ <h2>canvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linear
 
 //
 
-var ctx = colorSpaceCanvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linearPixelMath: true });
+var ctx = linearGradientCanvas.getContext('2d');
 
 var grd = ctx.createLinearGradient(0, 0, linearGradientCanvas.width, 0);
 grd.addColorStop(0, '#00FF00');
@@ -88,12 +95,42 @@ <h2>canvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linear
 
 //
 
-var ctx = linearGradientCanvas.getContext('2d');
+var ctx = srgbColorSpaceCanvas.getContext('2d', { colorSpace: 'srgb', pixelFormat: 'float16', linearPixelMath: true });
 
-var grd = ctx.createLinearGradient(0, 0, linearGradientCanvas.width, 0);
+var grd = ctx.createLinearGradient(0, 0, srgbColorSpaceCanvas.width, 0);
 grd.addColorStop(0, '#00FF00');
 grd.addColorStop(1, '#0000FF');
 
 ctx.fillStyle = grd;
 ctx.fillRect(0, 0, 300, 150);
+
+
+
+
+//
+
+var ctx = p3ColorSpaceCanvas.getContext('2d', { colorSpace: 'p3' });
+
+var grd = ctx.createLinearGradient(0, 0, p3ColorSpaceCanvas.width, 0);
+grd.addColorStop(0, '#00FF00');
+grd.addColorStop(1, '#0000FF');
+
+ctx.fillStyle = grd;
+ctx.fillRect(0, 0, 300, 150);
+
+
+
+
+//
+
+var ctx = rec2020ColorSpaceCanvas.getContext('2d', { colorSpace: 'rec2020' });
+
+var grd = ctx.createLinearGradient(0, 0, rec2020ColorSpaceCanvas.width, 0);
+grd.addColorStop(0, '#00FF00');
+grd.addColorStop(1, '#0000FF');
+
+ctx.fillStyle = grd;
+ctx.fillRect(0, 0, 300, 150);
+
+
 </script>

From 1ca08b2cfeaa163a58f9a8cbfa492a625672762d Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Wed, 18 Oct 2017 10:32:53 +0200
Subject: [PATCH 05/11] Add catch for appendBuffer

---
 media/clearkey.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/media/clearkey.html b/media/clearkey.html
index ceda8e2..55739c5 100644
--- a/media/clearkey.html
+++ b/media/clearkey.html
@@ -138,7 +138,11 @@
           video.play();
         });
         console.log('Append Buffer', data);
-        sourceBuffer.appendBuffer(data);
+        try {
+          sourceBuffer.appendBuffer(data);
+        } catch(e) {
+          console.log(e);
+        }
       });
     } else {
       video.src = select.options[select.selectedIndex].value;

From ea807c0752e37797f8b2eaacf15b673058090815 Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Wed, 18 Oct 2017 11:00:09 +0200
Subject: [PATCH 06/11] Fixed range

---
 media/clearkey.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/media/clearkey.html b/media/clearkey.html
index 55739c5..d78454e 100644
--- a/media/clearkey.html
+++ b/media/clearkey.html
@@ -6,7 +6,7 @@
             value="https://storage.googleapis.com/fbeaufort-test/sample-video-encrypted-with-clear-lead.webm">VP9 - Clear Lead of 10s</option>
     <option data-mime-type="video/mp4; codecs=avc1.4d401f" data-range="bytes=0-2060760"
             value="https://storage.googleapis.com/fbeaufort-test/sample-video-encrypted-with-no-clear-lead.mp4">H264 - No Clear Lead</option>
-    <option data-mime-type="video/mp4; codecs=avc1.4d401f" data-range="bytes=0-60000000"
+    <option data-mime-type="video/mp4; codecs=avc1.4d401f" data-range="bytes=0-6000000"
             value="https://storage.googleapis.com/fbeaufort-test/sample-video-encrypted-with-clear-lead.mp4">H264 - Clear Lead of 10s</option>
   </optgroupdata=mime-type="" >
   <optgroup label="Not Encrypted">

From 29a99091fc8129ef94b474bc076da331652ed4ce Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Thu, 19 Oct 2017 12:18:28 +0200
Subject: [PATCH 07/11] Add video intelligence sample

---
 video-intelligence/blur.html | 87 ++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 video-intelligence/blur.html

diff --git a/video-intelligence/blur.html b/video-intelligence/blur.html
new file mode 100644
index 0000000..dbcf228
--- /dev/null
+++ b/video-intelligence/blur.html
@@ -0,0 +1,87 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #fafafa;
+}
+video {
+  width: 100%;
+  max-width: 640px;
+}
+input {
+  width: 100%;
+  max-width: 640px;
+  margin-bottom: 24px;
+}
+div {
+  width: 100%;
+  max-width: 640px;
+  margin-top: 24px;
+  white-space: pre-line;
+  height: 180px;
+  font-family: sans-serif;
+}
+.blur {
+  filter: blur(20px);
+}
+</style>
+<body>
+  <input id="userLabel" autofocus placeholder="Enter anything you want to blur in the video..."> 
+  <video id="video" loop muted autoplay src="https://storage.googleapis.com/fbeaufort-test/big-buck-bunny_trailer.webm"></video>
+  <p>Credits: Media files are © copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org </a>.</p>
+  <div id="div">Detecting objects with Google Cloud Video Intelligence API...</div>
+</body>
+<script>
+  (async _ => {
+ 
+  const key = 'AIzaSyA2IU3BRELRvD4FjoneK-jtJstO1bT3g1w';
+  const annotateRequestUrl = `https://videointelligence.googleapis.com/v1/videos:annotate?key=${key}`;
+  const body = JSON.stringify({ 
+    inputUri: 'gs://fbeaufort-test/big-buck-bunny_trailer.webm',
+    features: ['LABEL_DETECTION'] 
+  });
+
+  const annotateResponse = await fetch(annotateRequestUrl, { method: 'POST', body });
+  const name = (await annotateResponse.json()).name;
+  
+  (async function getLabelAnnotations() {
+    const operationRequestUrl = `https://videointelligence.googleapis.com/v1/operations/${name}?key=${key}`;
+
+    const operationResponse = await fetch(operationRequestUrl);
+    const json = await operationResponse.json();
+
+    if (!json.done) {
+      setTimeout(getLabelAnnotations, 1000);
+      return;
+    }
+
+    const labelAnnotations = json.response.annotationResults[0].labelAnnotations;
+    div.textContent = 'Detected Objects: ' + labelAnnotations.map(l => l.description).join(', ');
+
+    video.addEventListener('timeupdate', function() {
+      const filteredLabelAnnotations = labelAnnotations.filter(l => l.description.toLowerCase() === userLabel.value.toLowerCase());
+      if (filteredLabelAnnotations.length === 0) {
+        return;
+      }
+      let shouldBlurVideo = false;
+      for (const location of filteredLabelAnnotations[0].locations) {
+        if (!location.segment.startTime || !location.segment.endTime) {
+          continue;
+        }
+        if (video.currentTime > parseFloat(location.segment.startTime) &&
+            video.currentTime < parseFloat(location.segment.endTime)) {
+          shouldBlurVideo = true;
+          break;
+        }
+      }
+      video.classList.toggle('blur', shouldBlurVideo);
+    });
+  })();
+
+  })();
+</script>
+

From 11907a11a8de771f8987b2a83642d9e1a07d65cf Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Thu, 19 Oct 2017 13:37:16 +0200
Subject: [PATCH 08/11] Add media vibration sample

---
 media/vibrate.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 media/vibrate.html

diff --git a/media/vibrate.html b/media/vibrate.html
new file mode 100644
index 0000000..64e43c6
--- /dev/null
+++ b/media/vibrate.html
@@ -0,0 +1,46 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+  body { margin: 24px 12px; background-color: #fafafa; }
+  video { max-width: 100%; max-height: 240px; }
+</style>
+<h2>Media Vibrations</h2>
+<video id="video" loop controls crossorigin controlsList="nodownload" src="https://storage.googleapis.com/fbeaufort-test/big-buck-bunny_trailer.webm"></video>
+<p>Credits: Media files are © copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org </a>.</p>
+<script>
+video.addEventListener('loadedmetadata', function() {
+
+  let volume = 0;
+
+  const stream = video.captureStream();
+  const audioContext = new AudioContext();
+  const source = audioContext.createMediaStreamSource(stream);
+  
+  const processor = audioContext.createScriptProcessor(512 /* bufferSize */);
+  processor.addEventListener('audioprocess', onAudioProcessed);
+  
+  source.connect(processor);
+  processor.connect(audioContext.destination);
+  
+  function onAudioProcessed(event) {
+    const samples = event.inputBuffer.getChannelData(0);
+    
+    // Do a root-mean-square on the samples 
+    const total = samples.reduce((sum, value) => sum + value * value, 1);
+    const rms = Math.sqrt(total / samples.length);
+  
+    // Now smooth this out with the averaging factor applied
+    // to the previous sample - take the max here because we
+    // want "fast attack, slow release."
+    volume = Math.max(rms, volume * 0.95 /* averaging factor */);
+  }
+  
+  (function detectHighVolume() {
+    if (volume > 0.1) {
+      navigator.vibrate(100);
+    }
+    requestAnimationFrame(detectHighVolume);
+  })();
+
+});
+</script>
+

From 7b4e607a5d6d0c164425c97f3319b4fb4dfe0c4c Mon Sep 17 00:00:00 2001
From: Joseph Medley <jmedley@google.com>
Date: Thu, 19 Oct 2017 12:33:56 -0700
Subject: [PATCH 09/11] Make the preload property easier to find on the
 internet.

---
 media/smart-video-preload.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/media/smart-video-preload.html b/media/smart-video-preload.html
index 970dfc6..8745f3a 100644
--- a/media/smart-video-preload.html
+++ b/media/smart-video-preload.html
@@ -109,10 +109,10 @@ <h1>Smart Video Preload 🐤</h1>
         }
       }
 
-      const fakeVideo = document.createElement('video');
-      fakeVideo.preload = 'auto';
-      dataSaverStatus.textContent = (fakeVideo.preload === 'none' ? 'ON' : 'OFF');
-      if (fakeVideo.preload === 'none') {
+      const fakeMediaElement = document.createElement('video');
+      fakeMediaElement.preload = 'auto';
+      dataSaverStatus.textContent = (fakeMediaElement.preload === 'none' ? 'ON' : 'OFF');
+      if (fakeMediaElement.preload === 'none') {
         dataSaverStatus.classList.add('warning');
         result = false;
       }

From 0bb91403edc58438f396c6ff8053a4020845a6df Mon Sep 17 00:00:00 2001
From: Joseph Medley <jmedley@google.com>
Date: Thu, 19 Oct 2017 12:46:41 -0700
Subject: [PATCH 10/11] Make it clear where certain APIs come from.

---
 media/smart-video-preload.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/media/smart-video-preload.html b/media/smart-video-preload.html
index 8745f3a..f2d093f 100644
--- a/media/smart-video-preload.html
+++ b/media/smart-video-preload.html
@@ -92,6 +92,8 @@ <h1>Smart Video Preload 🐤</h1>
         result = false;
       }
 
+      // Requies Chrome 61 desktop, Chrome for Android 38, or
+      //  another implementing browser.
       if ('connection' in navigator) {
         networkStatus.textContent = navigator.connection.type;
         if (navigator.connection.type == 'cellular') {
@@ -100,6 +102,7 @@ <h1>Smart Video Preload 🐤</h1>
         }
       }
 
+      // Requires Chrome 38 or later, or another implementing browser.
       if ('getBattery' in navigator) {
         const battery = await navigator.getBattery();
         batteryStatus.textContent = (battery.charging ? 'Charging' : (Math.round(battery.level * 100) + '%'));
@@ -117,6 +120,7 @@ <h1>Smart Video Preload 🐤</h1>
         result = false;
       }
 
+      // Requires Chrome 63 or later, or another implementing browser.
       if ('deviceMemory' in navigator) {
         deviceMemoryStatus.textContent = navigator.deviceMemory + ' GiB';
         if (navigator.deviceMemory < 1) {
@@ -125,6 +129,7 @@ <h1>Smart Video Preload 🐤</h1>
         }
       }
 
+      // Requires Chrome 55 or later, or another implementing browser.
       if ('storage' in navigator) {
         const { quota, usage } = await navigator.storage.estimate();
         storageStatus.textContent = formatBytes(quota - usage);

From 922f75793162b13919b39ed34d29063d4038977b Mon Sep 17 00:00:00 2001
From: Francois Beaufort <beaufort.francois@gmail.com>
Date: Fri, 20 Oct 2017 18:14:01 +0200
Subject: [PATCH 11/11] Add WIP demo for CDS

---
 image-capture/live-photo-settings.html | 412 +++++++++++++++++++++++++
 1 file changed, 412 insertions(+)
 create mode 100644 image-capture/live-photo-settings.html

diff --git a/image-capture/live-photo-settings.html b/image-capture/live-photo-settings.html
new file mode 100644
index 0000000..aede977
--- /dev/null
+++ b/image-capture/live-photo-settings.html
@@ -0,0 +1,412 @@
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Image Capture Playground</title>
+<style>
+  body { margin: 0 auto; }
+  video { height: 100vh; width: 100vw; object-fit: cover; z-index: -1; position: absolute; }
+  canvas { display: inline-block; }
+  #devices { line-height: 24px; padding: 24px; text-align: center }
+  label { padding-right: 24px; 
+      font-weight: 300;
+      font-family: 'Product Sans', Arial, sans-serif;
+      -webkit-font-smoothing: antialiased; }
+  pre { padding: 12px 8px; }
+  #controls label { margin: 0 20px; line-height: 24px; font-size: 16px; margin-bottom: 12px;
+    display: block; text-transform: capitalize; }
+  select { 
+      font-weight: 300;
+      font-family: 'Product Sans', Arial, sans-serif;
+    margin-bottom: 4px;
+    margin-left: 20px;
+    background: #333;
+    border: 0;
+    display: block;
+    height: 36px;
+    color: white;
+    padding: 4px;
+    border-radius: 4px;
+}
+  button { margin: 4px 0 }
+  .fg { width: 100%; height: 100%; position: absolute; object-fit: cover; margin: 0; top: 0; left: 0; right: 0; bottom: 0; }
+  #dashboard { background: #333; padding: 4px; }
+  #shots { background: #eee; margin: 0 -8; }
+  #controls { height: calc(100vh - 72px); overflow: scroll; max-width: 412px; margin: 0 auto;}
+}
+</style>
+
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Product+Sans">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-light_green.min.css">
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+
+<video id="video" autoplay></video>
+<div id="devices"></div>
+<div id="controls"></div>
+<div id="shots"></div>
+
+<script>
+var imageCapture;
+var takePhotoSettings = {};
+
+localStorage.deviceId = localStorage.deviceId || 'default';
+
+// Ask permission first and enumerate devices after...
+navigator.mediaDevices.getUserMedia({video : true})
+.then(stream => {
+  // Stop tracks.
+  stream.getTracks().forEach(track => track.stop());
+  return navigator.mediaDevices.enumerateDevices()
+})
+.then(devices => {
+  var videoInputDevices = devices.filter(device => (device.kind == 'videoinput'));
+  videoInputDevices.forEach(device => {
+    var input = document.createElement('input');
+    input.type = 'radio';
+    input.classList.add('mdl-radio__button');
+    input.name = 'device';
+    input.value = device.deviceId;
+    input.id = device.deviceId;
+    input.checked = (localStorage.deviceId == device.deviceId);
+    input.onclick = function(event) {
+      localStorage.deviceId = event.target.value;
+      getUserMedia();
+    }
+    var label = document.createElement('label');
+    var span = document.createElement('span');
+    span.classList.add('mdl-radio__label',);
+    if (device.label.includes(', ')) {
+      span.textContent = device.label.split(', ')[1];
+    } else {
+      span.textContent = device.label;
+    }
+    label.setAttribute('for', device.deviceId);
+    label.classList.add('mdl-radio', 'mdl-js-radio');
+    label.appendChild(input);
+    label.appendChild(span);
+    componentHandler.upgradeElement(label);
+
+    document.querySelector('#devices').appendChild(label);
+  });
+  if (localStorage.deviceId == 'default') {
+    document.querySelector('#devices input').click();
+  } else {
+    document.querySelector('#devices input:checked') && document.querySelector('#devices input:checked').click();
+  }
+})
+.catch(error => {
+  let pre = document.createElement('pre');
+  pre.innerText = error.name;
+  document.querySelector('#controls').appendChild(pre);
+  console.log(error);
+});
+
+function getUserMedia() {
+  var constraints = {
+    video: {
+      width: { ideal: 1920 },
+      height: { ideal: 1080 },
+      deviceId: { exact: localStorage.deviceId }
+    }
+  };
+  document.querySelector('#controls').innerHTML = '';
+  document.querySelector('#shots').innerHTML = '';
+  navigator.mediaDevices.getUserMedia(constraints)
+  .then(mediaStream => {
+    video.srcObject = mediaStream;
+    video.onplay = function() {
+      imageCapture = new ImageCapture(mediaStream.getVideoTracks()[0]);
+      // Remove timeout when crbug.com/711524 is fixed.
+      setTimeout(initControls, 500);
+    }
+  })
+  .catch(error => {
+    let pre = document.createElement('pre');
+    pre.innerText = error.name;
+    document.querySelector('#controls').appendChild(pre);
+    console.log(error);
+  });
+}
+
+function initControls() {
+  let capabilities = imageCapture.track.getCapabilities();
+  let settings = imageCapture.track.getSettings();
+  let constraints = imageCapture.track.getConstraints();
+  for (let capabilityName in capabilities) {
+    let capability = capabilities[capabilityName];
+    if (capability.toString() === '[object MediaSettingsRange]') {
+      let value = settings[capabilityName];
+      addInputRange(capabilityName, value, capability);
+    } else if (typeof(capability) == 'boolean') {
+      let value = settings[capabilityName];
+      addInputCheckbox(capabilityName, value);
+    } else if (Array.isArray(capability)) {
+      let value = settings[capabilityName];
+      addSelect(capabilityName, value, capability);
+    }
+  }
+  delete(constraints['deviceId']);
+  imageCapture.getPhotoSettings()
+  .then(photoSettings => {
+    return Promise.resolve();
+    return imageCapture.getPhotoCapabilities()
+    .then(photoCapabilities => {
+      document.querySelector('#controls').appendChild(document.createElement('br'));
+      if (photoCapabilities['fillLightMode'].length) {
+        let select = document.createElement('select');
+        select.id = 'fillLightMode';
+        select.oninput = function(event) {
+          takePhotoSettings['fillLightMode'] = event.target.value;
+        }
+        for (capability of photoCapabilities['fillLightMode']) {
+          let option = document.createElement('option');
+          option.value = capability;
+          option.textContent = capability;
+          if (capability == photoSettings.fillLightMode) {
+            option.selected = true;
+          }
+          select.appendChild(option);
+        }
+        var label = document.createElement('label');
+        label.textContent = 'fillLightMode';
+        label.setAttribute('for', 'fillLightMode');
+        document.querySelector('#controls').appendChild(select);
+        document.querySelector('#controls').appendChild(label);
+      }
+      if (photoCapabilities['redEyeReduction'] === 'controllable') {
+        let input = document.createElement('input');
+        input.id = 'redEyeReduction';
+        input.type = 'checkbox';
+        input.checked = photoSettings.redEyeReduction;
+        input.onchange = function(event) {
+          takePhotoSettings['redEyeReduction'] = event.target.checked;
+        }
+        var label = document.createElement('label');
+        label.textContent = 'redEyeReduction';
+        label.setAttribute('for', 'redEyeReduction');
+        document.querySelector('#controls').appendChild(input);
+        document.querySelector('#controls').appendChild(label);
+      }
+      ['imageWidth', 'imageHeight'].forEach(rangeName => {
+        let range = photoCapabilities[rangeName];
+        if (range == null) {
+          return;
+        }
+        let input = document.createElement('input');
+        input.id = rangeName;
+        input.type = 'range';
+        input.classList.add('mdl-slider', 'mdl-js-slider');
+        input.min = range.min;
+        input.max = range.max;
+        input.step = range.step;
+        input.value = photoSettings[rangeName];
+        input.onchange = function(event) {
+          takePhotoSettings[rangeName] = event.target.value;
+          document.querySelector('label[for=' + rangeName +']').textContent = rangeName;
+        }
+        var label = document.createElement('label');
+        label.textContent = rangeName;
+        label.setAttribute('for', rangeName);
+        document.querySelector('#controls').appendChild(input);
+        document.querySelector('#controls').appendChild(label);
+        componentHandler.upgradeElement(input);
+      });
+    });
+  });
+}
+
+function addInputRange(capabilityName, value, range) {
+  let input = document.createElement('input');
+  input.id = capabilityName;
+  input.type = 'range';
+  input.classList.add('mdl-slider', 'mdl-js-slider');
+  input.min = range.min;
+  input.max = range.max;
+  input.step = Math.round(range.step * 100) / 100;
+  input.value = value;
+  input.oninput = function(event) {
+    let options = {};
+    options[capabilityName] = event.target.value;
+    applyConstraints(options);
+    document.querySelector('label[for=' + capabilityName +']').textContent = capabilityName;
+  }
+  var label = document.createElement('label');
+  if (value >= range.min && value <= range.max) {
+    label.textContent = capabilityName;
+  } else {
+    label.textContent = capabilityName;
+  }
+  label.setAttribute('for', capabilityName);
+  document.querySelector('#controls').appendChild(input);
+  document.querySelector('#controls').appendChild(label);
+  componentHandler.upgradeElement(input);
+}
+
+function addInputCheckbox(capabilityName, value) {
+  let input = document.createElement('input');
+  input.id = capabilityName;
+  input.type = 'checkbox';
+  input.classList.add('mdl-checkbox__input',);
+  input.value = value;
+  input.onchange = function(event) {
+    let options = {};
+    options[capabilityName] = event.target.checked;
+    applyConstraints(options);
+  }
+  var label = document.createElement('label');
+  label.setAttribute('for', capabilityName);
+  label.classList.add('mdl-checkbox', 'mdl-js-checkbox');
+  var span = document.createElement('span');
+  span.classList.add('mdl-checkbox__label',);
+  span.textContent = capabilityName;
+
+  label.appendChild(input);
+  label.appendChild(span);
+  document.querySelector('#controls').appendChild(label);
+  componentHandler.upgradeElement(label);
+}
+
+function addSelect(capabilityName, value, capabilities) {
+  if (capabilities.length <= 1) {
+    return;
+  }
+  let select = document.createElement('select');
+  select.id = capabilityName;
+  select.disabled = (capabilities.length <= 1);
+  select.oninput = function(event) {
+    let options = {};
+    options[capabilityName] = event.target.value;
+    applyConstraints(options);
+  }
+  for (capability of capabilities) {
+    let option = document.createElement('option');
+    option.value = capability;
+    option.textContent = capability;
+    option.selected = (capability == value);
+    select.appendChild(option);
+  }
+  var label = document.createElement('label');
+  label.textContent = capabilityName;
+  label.setAttribute('for', capabilityName);
+  document.querySelector('#controls').appendChild(select);
+  document.querySelector('#controls').appendChild(label);
+}
+
+function applyConstraints(options) {
+  imageCapture.track.applyConstraints({advanced: [ options ]})
+  .then(_ => {
+    let constraints = imageCapture.track.getConstraints();
+    delete(constraints['deviceId']);
+  });
+}
+
+
+
+function getSupportedConstraints() {
+  let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
+  let pre = document.createElement('pre');
+  pre.innerText = JSON.stringify(supportedConstraints, 0, 2);
+  document.querySelector('#shots').appendChild(pre);
+}
+
+function getCapabilities() {
+  let capabilities = imageCapture.track.getCapabilities();
+  let pre = document.createElement('pre');
+  for (let capabilityName in capabilities) {
+    pre.innerText += `${capabilityName}: `;
+    let capability = capabilities[capabilityName];
+    if (capability.toString() === '[object MediaSettingsRange]') {
+      pre.innerText += `{ min: ${capability.min}, max: ${capability.max}, step: ${capability.step} }\r\n`;
+    } else {
+      pre.innerText += JSON.stringify(capability) + '\r\n';
+    }
+  }
+  document.querySelector('#shots').appendChild(pre);
+}
+
+function getSettings() {
+  let settings = imageCapture.track.getSettings();
+  let pre = document.createElement('pre');
+  pre.innerText += JSON.stringify(settings, 0, 2);
+  document.querySelector('#shots').appendChild(pre);
+}
+
+function getPhotoCapabilities() {
+  imageCapture.getPhotoCapabilities()
+  .then(photoCapabilities => {
+    let pre = document.createElement('pre');
+    for (let capabilityName in photoCapabilities) {
+      pre.innerText += `${capabilityName}: `;
+      let capability = photoCapabilities[capabilityName];
+      if (capability && capability.toString() === '[object MediaSettingsRange]') {
+        pre.innerText += `{ min: ${capability.min}, max: ${capability.max}, step: ${capability.step} }\r\n`;
+      } else {
+        pre.innerText += JSON.stringify(capability) + '\r\n';
+      }
+    }
+    document.querySelector('#shots').appendChild(pre);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+}
+
+function getPhotoSettings() {
+  imageCapture.getPhotoSettings()
+  .then(photoSettings => {
+    let pre = document.createElement('pre');
+    pre.innerText += JSON.stringify(photoSettings, 0, 2);
+    document.querySelector('#shots').appendChild(pre);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+}
+
+function grabFrame() {
+  return imageCapture.grabFrame()
+  .then(imageBitmap => appendCanvas(imageBitmap))
+  .catch(error => {
+    console.log(error);
+  });
+}
+
+function takePhoto() {
+  const settings = takePhotoSettings;
+  return imageCapture.takePhoto(settings)
+  .then(blob => createImageBitmap(blob))
+  .then(imageBitmap => appendCanvas(imageBitmap, settings))
+  .catch(error => {
+    console.log(error);
+  });
+}
+
+function grabFrameAndTakePhoto() {
+  grabFrame()
+  takePhoto();
+}
+
+function appendCanvas(imageBitmap, options) {
+  let canvas = document.createElement('canvas');
+  canvas.width = imageBitmap.width;
+  canvas.height = imageBitmap.height;
+  canvas.style.height = '180';
+
+  let context = canvas.getContext('2d');
+  context.drawImage(imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height);
+  context.font = canvas.height / 12 + 'px Cousine';
+  context.fillStyle = 'deeppink';
+  context.textBaseline = 'top';
+  context.fillText(`${canvas.width}x${canvas.height}`, 4, 0);
+  let offset = canvas.height / 12;
+  if (options) {
+    for (let option of Object.keys(options)) {
+      context.fillText(option + '=' + options[option], 4, offset);
+      offset += canvas.height / 12;
+    }
+  }
+  document.querySelector('#shots').appendChild(canvas);
+}
+
+video.addEventListener('click', function() {
+  video.classList.toggle('fg');
+});
+</script>