Add ability to stop recording.

mounirlamouri · Nov 13, 2024 · 3d5203d · 3d5203d
1 parent afbb255
commit 3d5203d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/getdisplaymedia/index.html b/getdisplaymedia/index.html
@@ -34,6 +34,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
 
     <video id="video" autoplay playsinline controls></video>
     <button id="startButton" disabled>Start</button>
+    <button id="stopButton" disabled>Stop</button>
     <fieldset id="options" style="display:none">
       <legend>Advanced options</legend>
       <select id="displaySurface">

diff --git a/getdisplaymedia/main.js b/getdisplaymedia/main.js
@@ -9,6 +9,7 @@
 
 const preferredDisplaySurface = document.getElementById('displaySurface');
 const startButton = document.getElementById('startButton');
+const stopButton = document.getElementById('stopButton');
 
 if (adapter.browserDetails.browser === 'chrome' &&
     adapter.browserDetails.version >= 107) {
@@ -55,7 +56,15 @@ startButton.addEventListener('click', () => {
     options.video = {displaySurface};
   }
   navigator.mediaDevices.getDisplayMedia(options)
-      .then(handleSuccess, handleError);
+      .then(handleSuccess, handleError).then(() => {
+        stopButton.disabled = false;
+      })
+});
+
+stopButton.addEventListener('click', () => {
+  startButton.disabled = false;
+  stopButton.disabled = true;
+  video.srcObject.getTracks().forEach(track => track.stop());
 });
 
 if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {