Chapter 244: Video manipulation

Core Idea

You can draw frames of a <Video> from @remotion/media, <OffthreadVideo> or a <Html5Video> onto a <canvas> element using the drawImage() API.

Key Concepts

• Basic example
• Alternative: Effects
• Before v4.0.190

Code Examples

export const VideoOnCanvas: React.FC = () => {
  const canvas = useRef<HTMLCanvasElement>(null);
  const {width, height} = useVideoConfig();

  // Process a frame
  const onVideoFrame = useCallback(
    (frame: CanvasImageSource) => {
      if (!canvas.current) {
        return;
      }
      const context = canvas.current.getContext('2d');

      if (!context) {
        return;
      }

      context.filter = 'grayscale(100%)';
      context.drawImage(frame, 0, 0, width, height);
    },
    [height, width],
  );

  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <Video
          // Hide the original video tag
          style={{opacity: 0}}
          onVideoFrame={onVideoFrame}
          src="https://remotion.media/BigBuckBunny.mp4"
        />
      </AbsoluteFill>
      <AbsoluteFill>
        <canvas ref={canvas} width={width} height={height} />
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for Video manipulation from the official docs.

Key Takeaways

1. Understand basic example when working with Video manipulation.
2. Understand alternative: effects when working with Video manipulation.
3. Understand before v4.0.190 when working with Video manipulation.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.