stop the screen sharing stream after it's recording is done

Hashim-K · Mar 15, 2024 · 4e30b20 · 4e30b20
1 parent 1a42f6a
commit 4e30b20
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/frontend/src/components/recording/ScreenRecorder.tsx b/frontend/src/components/recording/ScreenRecorder.tsx
@@ -19,6 +19,7 @@ function ScreenRecorder({
   setScreenRecorderState,
   generateCode,
 }: Props) {
+  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
     null
   );
@@ -33,6 +34,7 @@ function ScreenRecorder({
         video: true,
         audio: { echoCancellation: true },
       });
+      setMediaStream(stream);
 
       // TODO: Test across different browsers
       // Create the media recorder
@@ -55,6 +57,7 @@ function ScreenRecorder({
         );
 
         const dataUrl = await blobToBase64DataUrl(completeBlob);
+
         setScreenRecordingDataUrl(dataUrl);
         setScreenRecorderState(ScreenRecorderState.FINISHED);
       };
@@ -69,10 +72,18 @@ function ScreenRecorder({
   };
 
   const stopScreenRecording = () => {
+    // Stop the recorder
     if (mediaRecorder) {
       mediaRecorder.stop();
       setMediaRecorder(null);
     }
+
+    // Stop the screen sharing stream
+    if (mediaStream) {
+      mediaStream.getTracks().forEach((track) => {
+        track.stop();
+      });
+    }
   };
 
   const kickoffGeneration = () => {