useMediabunnyAdapter

Usage notes

Use this hook when your app wants to manage transport with useTimelineMediaSync manually, inspect decoded frame state, or share one adapter across custom preview controls. For a ready-made transport hook, use useMediabunnyTimelineMedia. Ordinary URL source arrays are reconciled by value, preserving imperative replacements across equivalent props. Semantic prop changes reconcile the complete registry. Keep factories, track selectors, and custom option objects stable because their identity represents executable policy. Pass the currently resolved canvas element; changing it updates the adapter without recreating source inputs.

Signature

useMediabunnyAdapter(options: UseMediabunnyAdapterOptions): MediabunnyAdapter

Parameters

Returns

The current Mediabunny adapter, including readiness, status, decoded frame state, and sync callbacks.

Examples

import { useState } from 'react';
import { useMediabunnyAdapter } from '@techsquidtv/canvas-timeline-mediabunny-adapter/react';

const sources = [{
  sourceId: 'source-1',
  input: '/media/sample.mp4',
}];

export function DecoderStatus() {
  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
  const adapter = useMediabunnyAdapter({
    canvas,
    sources,
    mediabunny: () => import('mediabunny'),
  });

  return (
    <>
      <canvas ref={setCanvas} width={1280} height={720} />
      <p>{adapter.status}</p>
    </>
  );
}

Related links

• - MediabunnyAdapter - useMediabunnyTimelineMedia