Stop screencast recorder when user removes permission / stops using b…

…rowser button. (streamlit#4180)
edgar88 · Dec 20, 2021 · 497e3fc · 497e3fc
1 parent b0ff1af
commit 497e3fc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/frontend/src/hocs/withScreencast/withScreencast.tsx b/frontend/src/hocs/withScreencast/withScreencast.tsx
@@ -97,7 +97,10 @@ function withScreencast(
     public startRecording = async (): Promise<any> => {
       const { recordAudio } = this.state
 
-      this.recorder = new ScreenCastRecorder({ recordAudio })
+      this.recorder = new ScreenCastRecorder({
+        recordAudio,
+        onErrorOrStop: () => this.stopRecording(),
+      })
 
       try {
         await this.recorder.initialize()
@@ -125,15 +128,18 @@ function withScreencast(
         })
       }
 
-      if (
-        currentState === "RECORDING" &&
-        this.recorder.getState() !== "inactive"
-      ) {
-        outputBlob = await this.recorder.stop()
-        this.setState({
-          outputBlob,
-          currentState: "PREVIEW_FILE",
-        })
+      if (currentState === "RECORDING") {
+        if (this.recorder.getState() === "inactive") {
+          this.setState({
+            currentState: "OFF",
+          })
+        } else {
+          outputBlob = await this.recorder.stop()
+          this.setState({
+            outputBlob,
+            currentState: "PREVIEW_FILE",
+          })
+        }
       }
     }
 

diff --git a/frontend/src/lib/ScreenCastRecorder.ts b/frontend/src/lib/ScreenCastRecorder.ts
@@ -20,6 +20,7 @@ const BLOB_TYPE = "video/webm"
 
 interface ScreenCastRecorderOptions {
   recordAudio: boolean
+  onErrorOrStop: () => void
 }
 
 class ScreenCastRecorder {
@@ -31,6 +32,8 @@ class ScreenCastRecorder {
 
   private mediaRecorder: MediaRecorder | null
 
+  private onErrorOrStopCallback: () => void
+
   /** True if the current browser likely supports screencasts. */
   public static isSupportedBrowser(): boolean {
     return (
@@ -42,8 +45,9 @@ class ScreenCastRecorder {
     )
   }
 
-  constructor({ recordAudio }: ScreenCastRecorderOptions) {
+  constructor({ recordAudio, onErrorOrStop }: ScreenCastRecorderOptions) {
     this.recordAudio = recordAudio
+    this.onErrorOrStopCallback = onErrorOrStop
 
     this.inputStream = null
     this.recordedChunks = []
@@ -102,10 +106,21 @@ class ScreenCastRecorder {
       return false
     }
 
+    const logRecorderError = (e: any): void => {
+      logWarning(`mediaRecorder.start threw an error: ${e}`)
+    }
+
+    this.mediaRecorder.onerror = (e: any): void => {
+      logRecorderError(e)
+      this.onErrorOrStopCallback()
+    }
+
+    this.mediaRecorder.onstop = (): void => this.onErrorOrStopCallback()
+
     try {
       this.mediaRecorder.start()
     } catch (e) {
-      logWarning(`mediaRecorder.start threw an error: ${e}`)
+      logRecorderError(e)
       return false
     }