Skip to main content
Version: 0.12

Render the Movie

In this section, you'll learn how to render your movie. You can render your movie to a <canvas> element, stream it with WebRTC or record it to a Blob.

Render to Canvas

To render your movie to the provided <canvas> element and the movie's audio context, you can use the play() method:

movie.play().then(() => {
console.log('Movie finished playing!');
});

Stream

To stream your movie with WebRTC, you can use the stream() method:

movie.stream({
frameRate: 30,
onStart: (stream: MediaStream) => {
console.log('Streaming!')

// Use `stream`
},
}).then(() => {
console.log('Stream reached the end or was interrupted')
})

Record to Blob

To record your movie to a Blob, you can use the record() method:

movie.record({
frameRate: 30,
}).then(blob => {
console.log('Movie finished recording!');
console.log('Blob:', blob);
});

Conclusion

This concludes the tutorial. You can now create movies with Etro!