From a86597eabae5ee1f2d1fb244bae7866f376a0b35 Mon Sep 17 00:00:00 2001
From: Mounir Lamouri <mlamouri@fb.com>
Date: Wed, 13 Nov 2024 14:14:23 -0800
Subject: [PATCH] use media recorder to record stream and add button to
 download it

---
 getdisplaymedia/index.html |  1 +
 getdisplaymedia/main.js    | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/getdisplaymedia/index.html b/getdisplaymedia/index.html
index ecf7d47..08abfa1 100644
--- a/getdisplaymedia/index.html
+++ b/getdisplaymedia/index.html
@@ -35,6 +35,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>
+    <button id="replayButton" disabled>Replay</button>
     <fieldset id="options" style="display:none">
       <legend>Advanced options</legend>
       <select id="displaySurface">
diff --git a/getdisplaymedia/main.js b/getdisplaymedia/main.js
index 0c7ec29..355cb39 100644
--- a/getdisplaymedia/main.js
+++ b/getdisplaymedia/main.js
@@ -10,6 +10,10 @@
 const preferredDisplaySurface = document.getElementById('displaySurface');
 const startButton = document.getElementById('startButton');
 const stopButton = document.getElementById('stopButton');
+const replayButton = document.getElementById('replayButton');
+
+let recorder = null;
+let recordChunks =[];
 
 if (adapter.browserDetails.browser === 'chrome' &&
     adapter.browserDetails.version >= 107) {
@@ -34,6 +38,14 @@ function handleSuccess(stream) {
     startButton.disabled = false;
     preferredDisplaySurface.disabled = false;
   });
+
+  recorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" });
+  recorder.start(1000);
+  recorder.addEventListener('dataavailable', e => {
+    console.log('dataavailable');
+    recordChunks.push(e.data);
+    console.log(e.data);
+  });
 }
 
 function handleError(error) {
@@ -48,7 +60,6 @@ function errorMsg(msg, error) {
   }
 }
 
-
 startButton.addEventListener('click', () => {
   const options = {audio: true, video: true};
   const displaySurface = preferredDisplaySurface.options[preferredDisplaySurface.selectedIndex].value;
@@ -58,6 +69,7 @@ startButton.addEventListener('click', () => {
   navigator.mediaDevices.getDisplayMedia(options)
       .then(handleSuccess, handleError).then(() => {
         stopButton.disabled = false;
+        replayButton.disabled = true;
       })
 });
 
@@ -65,6 +77,26 @@ stopButton.addEventListener('click', () => {
   startButton.disabled = false;
   stopButton.disabled = true;
   video.srcObject.getTracks().forEach(track => track.stop());
+
+  recorder.addEventListener('stop', e => {
+    replayButton.disabled = false;
+  });
+  recorder.stop();
+});
+
+replayButton.addEventListener('click', () => {
+  const d = new Date();
+  const blob = new Blob(recordChunks, { type: recorder.mimeType });
+  const url =  URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.style = 'display: none';
+  a.download = 'recording ' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDay() + '_' + d.getHours() + ':' + d.getMinutes() + '.webm';
+  a.click();
+
+  // Cleaning up.
+  URL.revokeObjectURL(url);
+  recordChunks = [];
 });
 
 if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {