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

Описание и применение

Создание локального экспортера слайдшоу из фотографий в браузере с использованием Canvas и MediaRecorder, без загрузки данных на сервер.

Задача

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

Результат

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

Рабочий процесс

• 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.

Доказательства

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.

Источник

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.

Источник

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

Источник