WebGPU video processing experiment

Video processing with WebGPU

This project explores browser-native video composition using WebGPU for high-performance layer rendering. It previews a timeline with multiple video, image, and audio layers, then exports the composed frames through WebCodecs and MediaBunny as an MP4.

Compose on GPU Video frames and image overlays are rendered with WebGPU.
Preview timeline Use play, pause, and scrub controls before exporting.
Export MP4 Frames are captured from OffscreenCanvas and encoded with WebCodecs.

Demo composition

The preview and export below use this timeline (1280×720, 30 fps):

export const DEMO_COMPOSITION = new Composition(30, 1280, 720, {
  outputFilename: 'composition-export.mp4',
})
  .addLayer(new VideoClip(demoAssetUrl('samples/video.mp4'), 0, 5))
  .addLayer(new VideoClip(demoAssetUrl('samples/video-2.mp4'), 5))
  .addLayer(new AudioClip(demoAssetUrl('samples/video-2.mp4'), 5))
  .addLayer(new AudioClip(demoAssetUrl('samples/video.mp4'), 0, 5))
  .addLayer(new ImageClip(demoAssetUrl('samples/overlay.png'), 1, 3, 0.62, 0.08, 0.32, 0.32, 0.92))
  .addLayer(new ImageClip(demoAssetUrl('samples/overlay-2.png'), 1, 3, 0, 0.08, 0.32, 0.32, 0.92));

Initializing…