reflex-app / reflex-app/reflex

Add video recording

Open
#277 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Feature Request
Dominant language
Vue
Stars
34
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Recently wanted to create a specific viewport-sized screen recording of a website. Quite difficult to get a high-quality, exact video recording with most free/OS-level tools. You could try this with Puppeteer/Playwright, but in my experience the video output had color differences and low quality (it's not really made for this purpose). Built-in QuickTime Player and Kap can kind of do this, but to capture a browser tab you need to precisely position the capture window, which is frustrating when you make a mistake.

What if you could just select a screen in Reflex, click "Record", "Stop recording", and then you get a MP4 video file?

Task

  • Add video recording using Screen Capture API ffmpeg (WASM)
  • Start/stop recording UI
  • Optional settings: video height/width, FPS, quality (low, medium, high)
  • Choose save location

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by tracing the Electron/Vue screen-selection UI and reviewing the Screen Capture API and ffmpeg (WASM) usage; done means selecting a screen, starting and stopping a recording, producing an MP4, and supporting the requested save location and optional settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
electron
Domain
audio-video-rtc, desktop, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.