Convert a video
You can convert a video in the browser from one format to another using the convertMedia() function from @remotion/webcodecs.
πΌ Important License Disclaimer
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".
We consider a team of 4 or more people a "company".
For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of
In a future version of
@remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.For individuals and teams up to 3: You can use this package for free.
This is a short, non-binding explanation of our license. See the License itself for more details.
The following input formats are supported:
- ISO Base Media (
.mp4,.mov,.m4a) - Matroska (
.mkv,.webm) .avi- MPEG Transport Stream (
.ts) .wav,.mp3.flac.aac- HLS (
.m3u8)
The following output formats are supported:
- MP4
- WebM
- WAV
The following output video codecs are supported:
- VP8 (WebM only)
- VP9 (WebM only)
- H.264 (MP4 only)
The following output audio codecs are supported:
- Opus (WebM only)
- AAC (MP4 only)
- PCM (WAV only)
Installationβ
Install the @remotion/webcodecs and @remotion/media-parser packages:
- npm
- bun
- pnpm
- yarn
npm i --save-exact @remotion/webcodecs@4.0.404 @remotion/media-parser@4.0.404
pnpm i @remotion/webcodecs@4.0.404 @remotion/media-parser@4.0.404
bun i @remotion/webcodecs@4.0.404 @remotion/media-parser@4.0.404
yarn --exact add @remotion/webcodecs@4.0.404 @remotion/media-parser@4.0.404
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.π§ Unstable API
This package is experimental.
We might change the API at any time, until we remove this notice.
We might change the API at any time, until we remove this notice.
Basic conversionsβ
Converting from an URLβ
(needs to be CORS-enabled)
Converting an MP4 to a WebMtsxconvertMedia } from'@remotion/webcodecs';constresult =awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'webm',});constblob =awaitresult .save ();
Converting from a File:β
Converting a filetsxconvertMedia } from'@remotion/webcodecs';// Get an actual file from an <input type="file"> elementconstfile =newFile ([], 'video.mp4');constresult =awaitconvertMedia ({src :file ,container : 'webm',});constblob =awaitresult .save ();
Specifying the output codecβ
You can specify the output codec by passing the videoCodec and audioCodec options:
Converting to VP9tsxconvertMedia } from'@remotion/webcodecs';constresult =awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'webm',videoCodec : 'vp9',audioCodec : 'opus',});constblob =awaitresult .save ();
Saving the converted videoβ
The convertMedia() function returns a result object with a save() method that you need to call to get the converted video as a Blob.
Download the converted videoβ
Download converted videotsxconvertMedia } from'@remotion/webcodecs';constresult =awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'webm',});constblob =awaitresult .save ();// Create download linkconsturl =URL .createObjectURL (blob );constlink =document .createElement ('a');link .href =url ;link .download ='converted-video.webm';document .body .appendChild (link );link .click ();document .body .removeChild (link );URL .revokeObjectURL (url );
Upload the converted videoβ
Upload converted videotsxconvertMedia } from'@remotion/webcodecs';constresult =awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'webm',});constblob =awaitresult .save ();// Upload to serverconstformData =newFormData ();formData .append ('video',blob , 'converted-video.webm');awaitfetch ('/api/upload', {method : 'POST',body :formData ,});
Display the converted videoβ
Display converted videotsxconvertMedia } from'@remotion/webcodecs';constresult =awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'webm',});constblob =awaitresult .save ();// Display in video elementconsturl =URL .createObjectURL (blob );constvideo =document .createElement ('video');video .src =url ;video .controls =true;document .body .appendChild (video );// Don't forget to clean up when done// URL.revokeObjectURL(url);
Advanced conversionsβ
See Track Transformation for how you can get more control over the conversion.