[Home]

Video → Canvas Capture

Goal: verify that a playing <video> can be rendered into a <canvas> (via drawImage(video, ...)), and that the resulting canvas output is capturable (via canvas.captureStream()).

Expected behavior:

• When the source video is playing, the canvas shows the moving video (not a black/blank frame).
• The “Canvas capture preview” (a <video> fed by canvas.captureStream()) shows the same moving content.
• No exceptions like SecurityError / “tainted canvas” when sampling pixels (if you use the default CORS-friendly source, the camera, or a local file).

Autoplay mode: add ?autoplay=1 to attempt to start playback automatically (muted). Optionally also auto-start draw/capture with &autodraw=1 and &autocapture=1. Use 0/false to disable.

Scripted play mode (no autoplay): add ?scriptplay=1 to call video.play() programmatically from user gestures (Load button / file picker / “Scripted play()”) without doing any automatic play attempts on page load.

Auto camera mode: add ?autocamera=1 to attempt starting the camera on page load (will prompt for permission; camera playback may still be blocked by playback policies).

Presets: ?autoplay=1, ?autoplay=1&autodraw=1&autocapture=1, ?scriptplay=1, ?scriptplay=1&autodraw=1&autocapture=1, ?scriptplay=1&scriptplaymute=1&autodraw=1&autocapture=1, ?autocamera=1&autodraw=1&autocapture=1

Test steps

1. Pick a source: load URL, pick a local file, or start the camera.
2. Press Play on the source video (camera should auto-play if permitted).
3. Tap “Start drawing video → canvas”. Confirm the canvas animates.
4. Tap “Start canvas capture preview”. Confirm the preview animates.
5. (Optional) Tap “Record 3 seconds” and play back/download the recording.

Log