Emitting Artifactsv4.0.176
Sometimes you wish to generate additional files when rendering your video. For example:
- A
.srt
subtitle file - A
.txt
containing chapters of the video - A
CREDITS
file for the assets used in the video - Debug information from the render.
You can use the <Artifact>
component to emit arbitrary files from your video.
note
Emitting artifacts is not currently supported by @remotion/cloudrun
.
Example
MyComp.tsxtsx
importReact from 'react';import {Artifact ,useCurrentFrame } from 'remotion';import {generateSubtitles } from './subtitles';export constMyComp :React .FC = () => {constframe =useCurrentFrame ();return (<>{frame === 0 ? (<Artifact filename ="captions.srt"content ={generateSubtitles ()} />) : null}</>);};
MyComp.tsxtsx
importReact from 'react';import {Artifact ,useCurrentFrame } from 'remotion';import {generateSubtitles } from './subtitles';export constMyComp :React .FC = () => {constframe =useCurrentFrame ();return (<>{frame === 0 ? (<Artifact filename ="captions.srt"content ={generateSubtitles ()} />) : null}</>);};
Rules of artifacts
The asset should only be rendered for one single frame of the video. Otherwise, the asset will get emitted multiple times.It is possible to emit multiple assets, but they may not have the same filename.
For the
content
prop it is possible to pass a string
, or a Uint8Array
for binary data. Passing an
Uint8Array
should not be considered faster due to it having to be serialized.
Receiving artifacts
In the CLI or Studio
Artifacts get saved to out/[composition-id]/[filename]
when rendering a video.
Using renderMedia()
, renderStill()
or renderFrames()
Use the onArtifact
callback to receive the artifacts.
render.mjstsx
import type {VideoConfig } from 'remotion';constcomposition :VideoConfig = {width : 100,height : 100,fps : 30,defaultProps : {},props : {},defaultCodec : null,id : 'hi',durationInFrames : 100,};constserveUrl = 'http://localhost:8080';constinputProps = {};
render.mjstsx
import type {VideoConfig } from 'remotion';constcomposition :VideoConfig = {width : 100,height : 100,fps : 30,defaultProps : {},props : {},defaultCodec : null,id : 'hi',durationInFrames : 100,};constserveUrl = 'http://localhost:8080';constinputProps = {};