[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).

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