---
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](
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