Building a browser‑local photo slideshow exporter with Canvas and MediaRecorder

Description and use

A client‑side photo‑to‑video slideshow exporter built with Canvas and MediaRecorder, keeping all media local and private.

Problem

Create a private photo‑to‑video slideshow without uploading media to a server, avoiding watermarks and account requirements.

Outcome

A fully client‑side photo‑to‑video slideshow generator that respects user privacy, runs offline, and produces WebM or MP4 files without server involvement.

Workflow

• 1. Load selected photos and audio into the browser.
• 2. Decode each photo and draw it onto a 1280×720 canvas, handling landscape and portrait orientations appropriately.
• 3. Use requestAnimationFrame to render frames based on elapsed time, keeping preview and export timelines in sync.
• 4. Capture the canvas stream at 30 fps with canvas.captureStream(30).
• 5. Connect audio to a MediaStreamAudioDestinationNode and merge its track with the canvas video track.
• 6. Instantiate MediaRecorder with a supported MIME type (preferring WebM, falling back to MP4).
• 7. Record the stream; on dataavailable, assemble the final Blob and create an object URL for download.
• 8. Revoke the object URL before starting a new render to free memory.

Evidence

Turning a set of photos into a video does not require a server upload pipeline. A browser can draw frames to a canvas, combine that canvas stream with audio, and record the result locally with MediaRecorder.

Source

The renderer calculates the active slide from elapsed time rather than scheduling a separate timer for every image. That keeps the preview and exported sequence on the same timeline.

Source

For uploaded audio, an AudioContext connects the media element to a MediaStreamAudioDestinationNode. Its audio track is added to the canvas video track before recording.

Source