Canvas Timeline
Package

Mediabunny Audio & Video Sync Adapter

Optional Mediabunny adapter for timeline media playback and frame access.

Use the Mediabunny adapter when your editor needs decoded canvas frames, local media inputs, or a timeline-aware media monitor instead of one native media element.

Overview

The Mediabunny adapter is for timeline preview monitors that need decoded media, not just a mounted <video> tag. It uses Mediabunny to open sources and decode frames and audio buffers, paints video frames to a canvas, queues decoded audio through Web Audio against the timeline clock, and exposes frame and duration state for monitor UI.

In React, start with useMediabunnyTimelineMedia. It creates the adapter and connects it to timeline playback. Drop down to useMediabunnyAdapter or createMediabunnyAdapter only when you are building custom sync, sharing an adapter between controls, or owning lifecycle outside React.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline-mediabunny-adapter mediabunny

Usage

Decode media without putting media in timeline state

Timeline clips keep lightweight sourceId values. Your app keeps the actual files, URLs, or Mediabunny inputs outside the timeline and passes matching source descriptors to the adapter.

  1. 1Give each media clip a stable sourceId.
  2. 2Create a sources array where each descriptor has an id matching a clip source id.
  3. 3Attach a canvas ref for decoded video frames.
  4. 4Pass the canvas ref, sources, and visual/audio layer selectors to useMediabunnyTimelineMedia inside a TimelineProvider.
  5. 5Use the returned transport helpers for playback and the returned duration/frame state for preview UI.

Example

Decoded canvas preview
import { useRef } from 'react';
import { useMediabunnyTimelineMedia } from '@techsquidtv/canvas-timeline-mediabunny-adapter/react';


const sourceId = 'clip-source-main';
const sources = [{ id: sourceId, url: '/media/preview.mp4' }] as const;
const layers = {
  visuals: { trackKind: 'visual', sourceId },
  audio: { trackKind: 'audio', sourceId },
} as const;


export function DecodedPreview() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const media = useMediabunnyTimelineMedia({
    canvasRef,
    sources,
    layers,
  });


  return <canvas ref={canvasRef} width={1280} height={720} onClick={() => void media.play()} />;
}