Merge branch 'gh-pages' into no-pool

Author: fippo

src/content/getusermedia/getdisplaymedia/index.html

@@ -35,7 +35,15 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
 
     <video id="gum-local" autoplay playsinline muted></video>
     <button id="startButton" disabled>Start</button>
-
+    <fieldset id="options" style="display:none">
+      <legend>Advanced options</legend>
+      <select id="displaySurface">
+        <option value="default" selected>Show default sharing options</option>
+        <option value="browser">Prefer to share a browser tab</option>
+        <option value="window">Prefer to share a window</option>
+        <option value="monitor">Prefer to share an entire screen</option>
+      </select>
+    </fieldset>
     <div id="errorMsg"></div>
 
     <p>Display the screensharing stream from <code>getDisplayMedia()</code> in a video element.</p>

src/content/getusermedia/getdisplaymedia/js/main.js

@@ -7,14 +7,22 @@
  */
 'use strict';
 
-// Polyfill in Firefox.
-// See https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
-if (adapter.browserDetails.browser == 'firefox') {
+const preferredDisplaySurface = document.getElementById('displaySurface');
+const startButton = document.getElementById('startButton');
+
+if (adapter.browserDetails.browser === 'chrome' &&
+    adapter.browserDetails.version >= 107) {
+  // See https://developer.chrome.com/docs/web-platform/screen-sharing-controls/
+  document.getElementById('options').style.display = 'block';
+} else if (adapter.browserDetails.browser === 'firefox') {
+  // Polyfill in Firefox.
+  // See https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
   adapter.browserShim.shimGetDisplayMedia(window, 'screen');
 }
 
 function handleSuccess(stream) {
   startButton.disabled = true;
+  preferredDisplaySurface.disabled = true;
   const video = document.querySelector('video');
   video.srcObject = stream;
 
@@ -23,6 +31,7 @@ function handleSuccess(stream) {
   stream.getVideoTracks()[0].addEventListener('ended', () => {
     errorMsg('The user has ended sharing the screen');
     startButton.disabled = false;
+    preferredDisplaySurface.disabled = false;
   });
 }
 
@@ -38,9 +47,14 @@ function errorMsg(msg, error) {
   }
 }
 
-const startButton = document.getElementById('startButton');
+
 startButton.addEventListener('click', () => {
-  navigator.mediaDevices.getDisplayMedia({video: true})
+  const options = {audio: true, video: true};
+  const displaySurface = preferredDisplaySurface.options[preferredDisplaySurface.selectedIndex].value;
+  if (displaySurface !== 'default') {
+    options.video = {displaySurface};
+  }
+  navigator.mediaDevices.getDisplayMedia(options)
       .then(handleSuccess, handleError);
 });
 

src/css/main.css

@@ -236,6 +236,14 @@ ul {
   margin: 0 0 0.5em 0;
 }
 
+fieldset {
+  margin: 0 0 1em 0;
+}
+
+fieldset > select {
+  margin-top: 1em;
+}
+
 @media screen and (max-width: 650px) {
   .highlight {
     font-size: 1em;
@@ -263,5 +271,3 @@ ul {
     font-size: 20px;
   }
 }
-
-