metadata

title: Gradio Screen Recorder
emoji: 💻🎥
colorFrom: blue
colorTo: blue
sdk: gradio
sdk_version: 4.7.1
app_file: app.py
pinned: false
license: apache-2.0

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

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
Streaming support via MediaStream Web API??

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