Add Auto Picture-in-Picture sample (#628)

_layouts/default.html

@@ -37,6 +37,9 @@ limitations under the License.
     </script>
     {% assign sub_dirs = page.path | split: '/' | size | minus: 1 %}
     {% capture relative_path_to_root %}{% for i in (1..sub_dirs) %}../{% endfor %}{% endcapture %}
+    {% if page.manifest_url %}
+    <link rel="manifest" href="{{ page.manifest_url }}">
+    {% endif %}
     {% if page.icon_url %}
     <link rel="icon" href="{{ page.icon_url }}">
     {% else %}

auto-picture-in-picture/index.html

@@ -0,0 +1,60 @@
+---
+feature_name: Auto Picture-in-Picture
+chrome_version: 73
+feature_id: 5317876315586560
+check_min_version: true
+manifest_url: manifest.json
+---
+
+<h3>Background</h3>
+<p>
+Web apps for video meetings will benefit by allowing picture-in-picture when
+users switch back and forth between web apps and other applications or tabs.
+This is currently not possible because a user gesture is required to enter
+picture-in-picture.
+</p>
+<p>
+To support these use cases, a new <code>autopictureinpicture</code> attribute
+is added to the list of content attributes for video elements. This feature
+applies only to Progressive Web Apps users have installed on Desktop.
+</p>
+<p>
+Note: In Chrome 73, it is <a
+href="https://developers.chrome.com/origintrials">available for trials</a> so
+that websites can use it without any experimental flag.
+</p>
+
+<style>
+  video { background: #1e2327; border-radius: 4px; width: 100%; height: 360px; }
+</style>
+
+
+{% capture html %}
+<video id="video" autopictureinpicture></video>
+{% endcapture %}
+
+{% include html_snippet.html html=html %}
+{% include output_helper.html %}
+
+<script>
+  if (!('pictureInPictureEnabled' in document)) {
+    ChromeSamples.setStatus('The Picture-in-Picture API is not available.');
+  } else if (!document.pictureInPictureEnabled) {
+    ChromeSamples.setStatus('The Picture-in-Picture API is disabled.');
+  }
+
+  log = ChromeSamples.log;
+</script>
+
+<script>
+  navigator.serviceWorker.register('service-worker.js');
+</script>
+
+<script>
+  window.addEventListener('appinstalled', function() {
+    // Reload to trigger camera prompt if needed.
+    location.reload();
+  });
+</script>
+
+{% include js_snippet.html filename='index.js' %}

auto-picture-in-picture/index.js

@@ -0,0 +1,29 @@
+if (window.matchMedia("(display-mode: browser)").matches)
+  log('Warning! Install this sample app first.');
+else {
+  // If Progressive Web App is installed and running in a window,
+  // request user camera and show its stream in the video.
+  navigator.mediaDevices.getUserMedia({ video: true })
+  .then(stream => {
+    video.srcObject = stream;
+    return video.play();
+
+    // User can now show/hide window and video will enter and exit
+    // automatically Picture-in-Picture when the document's visibility
+    // changes.
+  });
+}
+
+video.addEventListener('enterpictureinpicture', function(event) {
+  log('> Video entered Picture-in-Picture');
+});
+
+video.addEventListener('leavepictureinpicture', function(event) {
+  log('> Video left Picture-in-Picture');
+});
+
+/* Feature support */
+
+if (!('autoPictureInPicture' in HTMLVideoElement.prototype)) {
+  log('Warning! Auto Picture-in-Picture is not available.');
+}

auto-picture-in-picture/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "Auto Picture-in-Picture Sample",
+  "icons": [
+    {
+      "src": "launcher-icon-0-75x.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-1x.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-1-5x.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-2x.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-3x.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-4x.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#9E9E9E",
+  "background_color": "#9E9E9E",
+  "start_url": "index.html",
+  "scope": "/auto-picture-in-picture/",
+  "display": "standalone",
+  "orientation": "landscape"
+}

auto-picture-in-picture/service-worker.js

@@ -0,0 +1,6 @@
+self.addEventListener('fetch', function(event) {
+  console.log(event.request.url);
+  if (!navigator.onLine) {
+    event.respondWith(new Response('offline ;('));
+  }
+});