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