Repository navigation
Video export — in-browser render to MP4/WebM/MP3 - #41
Merged
Merged
Conversation
Html5Audio is unsupported by @remotion/web-renderer; @remotion/media's Audio works in both the Player preview and in-browser rendering. The ducking envelope now feeds the volume prop as a pure frame callback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
exportVideo renders the existing composition to MP4 (H.264/AAC), WebM (VP9/Opus), or audio-only MP3 via renderMediaOnWeb — fully client-side, no backend. The Project Store writes results into an exports/ subfolder; top-level enumeration skips directories, so exports never re-enter the media bin. Format specs live in their own module so the editor shell can import them without pulling the renderer into the main bundle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Export Video button in the header opens a dialog where the user picks the format (MP4/WebM/MP3) and where to save — the project's exports/ folder or anywhere via showSaveFilePicker. Rendering shows a progress bar with cancel; if saving fails after a successful render, the blob can still be saved elsewhere. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Drives both export paths against a preview build: MP4 into exports/ (decoded in-page to verify dimensions, duration, and audio track) and WebM to a mocked showSaveFilePicker target. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…null assertion Caret ranges on the core Remotion packages could float past the pinned web-renderer on a future install and trip Remotion's version-mismatch check; exact-pin all five together. Narrow the error blob to a const instead of asserting non-null in the JSX handler. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #40
What
Export the slideshow (picture + soundtrack, ducking applied) as a single file, rendered fully in the browser by
@remotion/web-renderer— no backend. The Export dialog offers a format (MP4 H.264/AAC, WebM VP9/Opus, audio-only MP3) and a destination: the project'sexports/subfolder or anywhere viashowSaveFilePicker(picked before the render starts). Progress bar with cancel; a failed save after a successful render can still be rescued via "Save elsewhere…".How
Html5Audioto@remotion/media'sAudio(required by the web renderer, supported by the Player), with the ducking envelope applied through the purevolumeAtFrameas a volume callback. New thin render entry pointcomposition/exportVideo.tswrapsrenderMediaOnWebwith the same component + RenderPlan the preview uses — WYSIWYG by construction.export-store.tswrites blobs intoexports/; top-level enumeration skips directories, so exports never re-enter the media bin. Timestamped filenames from the folder name.exportFormats.ts) uses type-only renderer imports. Main chunk shrank vs. before the feature.4.0.475(the renderer enforces version match).Testing
export-storetested against in-memory FS fakes (TDD); 222 tests, lint, build all green.scripts/playwright-export-smoke.mjs(run against a preview build, exit 0): exports MP4 toexports/, decodes it in-page asserting 1920×1080, expected duration, and a decodable audio track; then exports WebM through a mockedshowSaveFilePicker. ffprobe on a real artifact: h264 1920×1080 + aac, duration matching the RenderPlan.🤖 Generated with Claude Code