Merge pull request #1690 from handellm/add_gdm_record_support

Record: add gDM recording support.
webrtc · Dec 18, 2024 · c23f961 · c23f961
2 parents 86ba3f1 + 9086df2
commit c23f961
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/src/content/getusermedia/record/css/main.css b/src/content/getusermedia/record/css/main.css
@@ -9,7 +9,7 @@
   margin: 0 3px 10px 0;
   padding-left: 2px;
   padding-right: 2px;
-  width: 99px;
+  width: 120px;
 }
 
 button:last-of-type {

diff --git a/src/content/getusermedia/record/index.html b/src/content/getusermedia/record/index.html
@@ -44,7 +44,8 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
     <video id="recorded" playsinline loop></video>
 
     <div>
-        <button id="start">Start camera</button>
+        <button id="start-gum">Start camera</button>
+        <button id="start-gdm">Start screenshare</button>
         <button id="record" disabled>Start Recording</button>
         <button id="play" disabled>Play</button>
         <button id="download" disabled>Download</button>

diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js
@@ -144,7 +144,7 @@ function stopRecording() {
 
 function handleSuccess(stream) {
   recordButton.disabled = false;
-  console.log('getUserMedia() got stream:', stream);
+  console.log('Got stream:', stream);
   window.stream = stream;
 
   const gumVideo = document.querySelector('video#gum');
@@ -159,27 +159,37 @@ function handleSuccess(stream) {
   codecPreferences.disabled = false;
 }
 
-async function init(constraints) {
+async function init(constraints, isGetDisplayMedia) {
   try {
-    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    const stream = isGetDisplayMedia ?
+        await navigator.mediaDevices.getDisplayMedia(constraints) :
+        await navigator.mediaDevices.getUserMedia(constraints);
     handleSuccess(stream);
   } catch (e) {
-    console.error('navigator.getUserMedia error:', e);
-    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
+    console.error('Source open error:', e);
+    errorMsgElement.innerHTML = `Source error: ${e.toString()}`;
   }
 }
 
-document.querySelector('button#start').addEventListener('click', async () => {
-  document.querySelector('button#start').disabled = true;
+async function onStart(isGetDisplayMedia) {
+  document.querySelector('button#start-gum').disabled = true;
+  document.querySelector('button#start-gdm').disabled = true;
   const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
   const constraints = {
     audio: {
-      echoCancellation: {exact: hasEchoCancellation}
+      echoCancellation: hasEchoCancellation
     },
     video: {
       width: 1280, height: 720
     }
   };
   console.log('Using media constraints:', constraints);
-  await init(constraints);
+  await init(constraints, isGetDisplayMedia);
+}
+
+document.querySelector('button#start-gum').addEventListener('click', async () => {
+  await onStart(false);
+});
+document.querySelector('button#start-gdm').addEventListener('click', async () => {
+  await onStart(true);
 });