Add demo files.

README.md

@@ -1,8 +1,8 @@
 ---
 title: Gradio Screen Recorder
-emoji: 💻
+emoji: 💻🎥
 colorFrom: blue
-colorTo: red
+colorTo: blue
 sdk: gradio
 sdk_version: 4.7.1
 app_file: app.py
@@ -10,4 +10,29 @@ pinned: false
 license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Gradio Screen Recorder
+
+This is a simple example of how a screen recorder button can be configured in Gradio.
+
+Depending on your current settings, you may need to grant permission to your browser to record your screen or to use your microphone if recording a voiceover.
+
+When there is time I may make it into a standalone component using the new support for custom components.
+
+## Dependencies
+This demo has a dependency on `ffmpeg` to convert `webm` files to `mp4` format. On linux (debian) install with `apt-get install ffmpeg`.
+
+## Limitations
+This demo uses the Media Recording API of supported browsers. Some details on Media Recording API limitations can be found [here](
+https://blog.addpipe.com/mediarecorder-api/#:~:text=Firefox%20or%20Chrome.-,Final%20Conclusions,-Although%20a%20simple)
+
+### TODO Features
+- Any way to work within colab cells given js restrictions?
+- Option to convert and save as gif rather than webm or mp4
+- Hotkeys for start / stop
+- Prerecording countdown [as in Streamlit](https://docs.streamlit.io/library/advanced-features/app-menu#:~:text=to%2Dpdf%20function.-,Record%20a%20screencast,-You%20can%20easily)
+- Streaming support via [MediaStream Web API?](https://dev.to/antopiras89/using-the-mediastream-web-api-to-record-screen-camera-and-audio-1c4n)?
+
+### TODO Cleanup
+- Address any limits on recording size (base64 string an issue?)
+- Additional error handling around recorder setup
+- Namespace window variables to prevent possible collisions

app.py

@@ -0,0 +1,42 @@
+import base64
+import pathlib
+import tempfile
+import gradio as gr
+
+recorder_js = pathlib.Path('recorder.js').read_text()
+main_js = pathlib.Path('main.js').read_text()
+record_button_js = pathlib.Path('record_button.js').read_text().replace('let recorder_js = null;', recorder_js).replace(
+    'let main_js = null;', main_js)
+
+
+def save_base64_video(base64_string):
+    base64_video = base64_string
+    video_data = base64.b64decode(base64_video)
+    with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as temp_file:
+        temp_filename = temp_file.name
+        temp_file.write(video_data)
+    print(f"Temporary MP4 file saved as: {temp_filename}")
+    return temp_filename
+
+
+with gr.Blocks(title="Screen Recorder Demo") as demo:
+    start_button = gr.Button("Record Screen 🔴")
+    video_component = gr.Video(interactive=True, show_share_button=True)
+
+
+    def toggle_button_label(returned_string):
+        if returned_string.startswith("Record"):
+            return gr.Button(value="Stop Recording ⚪"), None
+        else:
+            try:
+                temp_filename = save_base64_video(returned_string)
+            except Exception as e:
+                return gr.Button(value="Record Screen 🔴"), gr.Warning(f'Failed to convert video to mp4:\n{e}')
+            return gr.Button(value="Record Screen 🔴"), gr.Video(value=temp_filename, interactive=True,
+                                                                show_share_button=True)
+
+
+    start_button.click(toggle_button_label, start_button, [start_button, video_component], js=record_button_js)
+
+if __name__ == "__main__":
+    demo.launch()

main.js

@@ -0,0 +1,74 @@
+// main.js
+if (!ScreenCastRecorder.isSupportedBrowser()) {
+    console.error("Screen Recording not supported in this browser");
+}
+let recorder;
+let outputBlob;
+const stopRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+    let currentState = "RECORDING";
+    // We should do nothing if the user try to stop recording when it is not started
+    if (currentState === "OFF" || recorder == null) {
+        return;
+    }
+    // if (currentState === "COUNTDOWN") {
+    //     this.setState({
+    //         currentState: "OFF",
+    //     })
+    // }
+    if (currentState === "RECORDING") {
+        if (recorder.getState() === "inactive") {
+            // this.setState({
+            //     currentState: "OFF",
+            // })
+            console.log("Inactive");
+        }
+        else {
+            outputBlob = yield recorder.stop();
+            console.log("Done recording");
+            // this.setState({
+            //   outputBlob,
+            //   currentState: "PREVIEW_FILE",
+            // })
+            window.currentState = "PREVIEW_FILE";
+            const videoSource = URL.createObjectURL(outputBlob);
+            window.videoSource = videoSource;
+            const fileName = "recording";
+            const link = document.createElement("a");
+            link.setAttribute("href", videoSource);
+            link.setAttribute("download", `${fileName}.webm`);
+            link.click();
+        }
+    }
+});
+const startRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+    const recordAudio = true;
+    recorder = new ScreenCastRecorder({
+        recordAudio,
+        onErrorOrStop: () => stopRecording(),
+    });
+    try {
+        yield recorder.initialize();
+    }
+    catch (e) {
+        console.warn(`ScreenCastRecorder.initialize error: ${e}`);
+        //   this.setState({ currentState: "UNSUPPORTED" })
+        window.currentState = "UNSUPPORTED";
+        return;
+    }
+    // this.setState({ currentState: "COUNTDOWN" })
+    const hasStarted = recorder.start();
+    if (hasStarted) {
+        // this.setState({
+        //     currentState: "RECORDING",
+        // })
+        console.log("Started recording");
+        window.currentState = "RECORDING";
+    }
+    else {
+        stopRecording().catch(err => console.warn(`withScreencast.stopRecording threw an error: ${err}`));
+    }
+});
+
+// Set global functions to window.
+window.startRecording = startRecording;
+window.stopRecording = stopRecording;

record_button.js

@@ -0,0 +1,40 @@
+// Setup if needed and start recording.
+async () => {
+    // Set up recording functions if not already initialized
+    if (!window.startRecording) {
+        let recorder_js = null;
+        let main_js = null;
+    }
+
+    // Function to fetch and convert video blob to base64 using async/await without explicit Promise
+    async function getVideoBlobAsBase64(objectURL) {
+        const response = await fetch(objectURL);
+        if (!response.ok) {
+          throw new Error('Failed to fetch video blob.');
+        }
+
+        const blob = await response.blob();
+
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+
+        return new Promise((resolve, reject) => {
+          reader.onloadend = () => {
+            if (reader.result) {
+              resolve(reader.result.split(',')[1]); // Return the base64 string (without data URI prefix)
+            } else {
+              reject('Failed to convert blob to base64.');
+            }
+          };
+        });
+    }
+
+    if (window.currentState === "RECORDING") {
+        await window.stopRecording();
+        const base64String = await getVideoBlobAsBase64(window.videoSource);
+        return base64String;
+    } else {
+        window.startRecording();
+        return "Record";
+    }
+}

recorder.js

@@ -0,0 +1,112 @@
+// recorder.js
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const BLOB_TYPE = "video/webm";
+class ScreenCastRecorder {
+    /** True if the current browser likely supports screencasts. */
+    static isSupportedBrowser() {
+        return (navigator.mediaDevices != null &&
+            navigator.mediaDevices.getUserMedia != null &&
+            navigator.mediaDevices.getDisplayMedia != null &&
+            MediaRecorder.isTypeSupported(BLOB_TYPE));
+    }
+    constructor({ recordAudio, onErrorOrStop }) {
+        this.recordAudio = recordAudio;
+        this.onErrorOrStopCallback = onErrorOrStop;
+        this.inputStream = null;
+        this.recordedChunks = [];
+        this.mediaRecorder = null;
+    }
+    /**
+     * This asynchronous method will initialize the screen recording object asking
+     * for permissions to the user which are needed to start recording.
+     */
+    initialize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const desktopStream = yield navigator.mediaDevices.getDisplayMedia({
+                video: true,
+            });
+            let tracks = desktopStream.getTracks();
+            if (this.recordAudio) {
+                const voiceStream = yield navigator.mediaDevices.getUserMedia({
+                    video: false,
+                    audio: true,
+                });
+                tracks = tracks.concat(voiceStream.getAudioTracks());
+            }
+            this.recordedChunks = [];
+            this.inputStream = new MediaStream(tracks);
+            this.mediaRecorder = new MediaRecorder(this.inputStream, {
+                mimeType: BLOB_TYPE,
+            });
+            this.mediaRecorder.ondataavailable = e => this.recordedChunks.push(e.data);
+        });
+    }
+    getState() {
+        if (this.mediaRecorder) {
+            return this.mediaRecorder.state;
+        }
+        return "inactive";
+    }
+    /**
+     * This method will start the screen recording if the user has granted permissions
+     * and the mediaRecorder has been initialized
+     *
+     * @returns {boolean}
+     */
+    start() {
+        if (!this.mediaRecorder) {
+            console.warn(`ScreenCastRecorder.start: mediaRecorder is null`);
+            return false;
+        }
+        const logRecorderError = (e) => {
+            console.warn(`mediaRecorder.start threw an error: ${e}`);
+        };
+        this.mediaRecorder.onerror = (e) => {
+            logRecorderError(e);
+            this.onErrorOrStopCallback();
+        };
+        this.mediaRecorder.onstop = () => this.onErrorOrStopCallback();
+        try {
+            this.mediaRecorder.start();
+        }
+        catch (e) {
+            logRecorderError(e);
+            return false;
+        }
+        return true;
+    }
+    /**
+     * This method will stop recording and then return the generated Blob
+     *
+     * @returns {(Promise|undefined)}
+     *  A Promise which will return the generated Blob
+     *  Undefined if the MediaRecorder could not initialize
+     */
+    stop() {
+        if (!this.mediaRecorder) {
+            return undefined;
+        }
+        let resolver;
+        const promise = new Promise(r => {
+            resolver = r;
+        });
+        this.mediaRecorder.onstop = () => resolver();
+        this.mediaRecorder.stop();
+        if (this.inputStream) {
+            this.inputStream.getTracks().forEach(s => s.stop());
+            this.inputStream = null;
+        }
+        return promise.then(() => this.buildOutputBlob());
+    }
+    buildOutputBlob() {
+        return new Blob(this.recordedChunks, { type: BLOB_TYPE });
+    }
+}