Canvas Video Recorder

A browser-based video recorder that captures webcam footage through an HTML canvas element. One can change the captured webcam while recording.

Features

• Record video from any connected webcam
• Configurable resolution (240p to 4K)
• Configurable frame rate (15, 20, 30, or 60 fps)
• Real-time FPS monitoring during recording
• Audio recording support
• Live preview with recording timer
• Download recordings as MP4 or WebM
• Switch cameras during recording

Usage

1. Open index.html in a browser
2. Grant camera and microphone permissions
3. Select your preferred resolution, frame rate, and camera
4. Click "Start Recording" to begin
5. Click "Stop Recording" when finished
6. Preview the recording and download if satisfied

How It Works

The application draws video frames from the webcam onto a hidden canvas using setInterval at the target frame rate, then captures the canvas as a MediaStream for recording. This approach allows for consistent frame rate control regardless of the webcam's native capabilities, and is more resource-efficient than using requestAnimationFrame since it only executes at the exact rate needed.

Browser Support

Requires a modern browser with support for:

• MediaRecorder API
• Canvas captureStream
• getUserMedia