> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Vanilagy/mediabunny/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Get started quickly with code examples for common Mediabunny operations

This page provides a collection of short code snippets that showcase the most common operations you may use Mediabunny for.

## Read file metadata

Extract information about a media file without decoding the actual media data:

```typescript theme={null}
import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';

const input = new Input({
  formats: ALL_FORMATS, // Supporting all file formats
  source: new BlobSource(file), // Assuming a File instance
});

const duration = await input.computeDuration(); // in seconds
const allTracks = await input.getTracks(); // List of all tracks

// Extract video metadata
const videoTrack = await input.getPrimaryVideoTrack();
if (videoTrack) {
  videoTrack.displayWidth; // in pixels
  videoTrack.displayHeight; // in pixels
  videoTrack.rotation; // in degrees clockwise

  // Estimate frame rate (FPS)
  const packetStats = await videoTrack.computePacketStats(100);
  const averageFrameRate = packetStats.averagePacketRate;
}

// Extract audio metadata
const audioTrack = await input.getPrimaryAudioTrack();
if (audioTrack) {
  audioTrack.numberOfChannels;
  audioTrack.sampleRate; // in Hz
}

// Extract metadata tags
const tags = await input.getMetadataTags();
tags.title; // Title
tags.date; // Release date
tags.images[0]; // Cover art
tags.raw['TBPM']; // Custom tags
```

## Create new media files

Create a new media file from scratch using various sources:

```typescript theme={null}
import {
  Output,
  BufferTarget,
  Mp4OutputFormat,
  CanvasSource,
  AudioBufferSource,
  QUALITY_HIGH,
} from 'mediabunny';

// An Output represents a new media file
const output = new Output({
  format: new Mp4OutputFormat(), // The format of the file
  target: new BufferTarget(), // Where to write the file (here, to memory)
});

// Example: add a video track driven by a canvas
const videoSource = new CanvasSource(canvas, {
  codec: 'avc',
  bitrate: QUALITY_HIGH,
});
output.addVideoTrack(videoSource);

// Example: add an audio track driven by AudioBuffers
const audioSource = new AudioBufferSource({
  codec: 'aac',
  bitrate: QUALITY_HIGH,
});
output.addAudioTrack(audioSource);

// Set some metadata tags
output.setMetadataTags({
  title: 'My Movie',
  artist: 'Me',
});

await output.start();

// Add some video frames
for (let frame = 0; frame < 900; frame++) {
  await videoSource.add(frame / 30, 1 / 30);
}

// Add some audio data
await audioSource.add(audioBuffer1);
await audioSource.add(audioBuffer2);

await output.finalize();

const buffer = output.target.buffer; // ArrayBuffer containing the final MP4 file
```

<Info>
  * You can create files of many different formats - see [Output formats](/api/output-formats)
  * Media data can be added from different sources - see [Media sources](/advanced/media-sources)
</Info>

## Convert files

Convert between different media formats with automatic transmuxing or transcoding:

```typescript theme={null}
import {
  Input,
  Output,
  Conversion,
  ALL_FORMATS,
  BlobSource,
  BufferTarget,
  Mp4OutputFormat,
} from 'mediabunny';

// Create an input from the source file
const input = new Input({
  formats: ALL_FORMATS,
  source: new BlobSource(file),
});

// Define the output file
const output = new Output({
  format: new Mp4OutputFormat(),
  target: new BufferTarget(),
});

const conversion = await Conversion.init({ input, output });
if (!conversion.isValid) {
  // The conversion isn't possible and would error upon execution.
  // Check `discardedTracks` for the reasons.
  return;
}

// List of tracks that won't make it into the output:
conversion.discardedTracks;

conversion.onProgress = (progress) => {
  console.log(`Progress: ${progress * 100}%`);
};

await conversion.execute();
// Conversion is complete

const buffer = output.target.buffer; // ArrayBuffer containing the final MP4 file
```

<Tip>
  This code will automatically **transmux** (copy media data) when possible, and **transcode** (re-encode media data) when necessary.
</Tip>

## More examples

<Steps>
  <Step title="Read media data">
    Decode video frames and audio chunks from a media file:

    ```typescript theme={null}
    import {
      Input,
      ALL_FORMATS,
      BlobSource,
      VideoSampleSink,
      AudioSampleSink,
    } from 'mediabunny';

    const input = new Input({
      formats: ALL_FORMATS,
      source: new BlobSource(file),
    });

    // Read video frames
    const videoTrack = await input.getPrimaryVideoTrack();
    if (videoTrack) {
      const decodable = await videoTrack.canDecode();
      if (decodable) {
        const sink = new VideoSampleSink(videoTrack);

        // Get the video frame at timestamp 5s
        const videoSample = await sink.getSample(5);
        videoSample.timestamp; // in seconds
        videoSample.duration; // in seconds

        // Draw the frame to a canvas
        videoSample.draw(ctx, 0, 0);

        // Loop over all frames in the first 30s of video
        for await (const sample of sink.samples(0, 30)) {
          // Process each frame...
        }
      }
    }
    ```

    See [Media sinks](/advanced/media-sinks) for all the ways to extract media data from tracks.
  </Step>

  <Step title="Extract video thumbnails">
    Generate thumbnail images from video files:

    ```typescript theme={null}
    import {
      Input,
      ALL_FORMATS,
      BlobSource,
      CanvasSink,
    } from 'mediabunny';

    const input = new Input({
      formats: ALL_FORMATS,
      source: new BlobSource(file),
    });

    const videoTrack = await input.getPrimaryVideoTrack();
    if (videoTrack) {
      const decodable = await videoTrack.canDecode();
      if (decodable) {
        const sink = new CanvasSink(videoTrack, {
          width: 320, // Automatically resize the thumbnails
        });

        // Get the thumbnail at timestamp 10s
        const result = await sink.getCanvas(10);
        result.canvas; // HTMLCanvasElement | OffscreenCanvas
        result.timestamp; // in seconds
        result.duration; // in seconds

        // Generate five equally-spaced thumbnails through the video
        const startTimestamp = await videoTrack.getFirstTimestamp();
        const endTimestamp = await videoTrack.computeDuration();
        const timestamps = [0, 0.2, 0.4, 0.6, 0.8].map(
          (t) => startTimestamp + t * (endTimestamp - startTimestamp)
        );

        // Loop over these timestamps
        for await (const result of sink.canvasesAtTimestamps(timestamps)) {
          // Process each thumbnail...
        }
      }
    }
    ```
  </Step>

  <Step title="Compress media files">
    Reduce file size by resizing, lowering quality, or trimming:

    ```typescript theme={null}
    import {
      Input,
      Output,
      Conversion,
      ALL_FORMATS,
      BlobSource,
      BufferTarget,
      Mp4OutputFormat,
      QUALITY_LOW,
    } from 'mediabunny';

    const input = new Input({
      formats: ALL_FORMATS,
      source: new BlobSource(file),
    });

    const output = new Output({
      format: new Mp4OutputFormat(),
      target: new BufferTarget(),
    });

    const conversion = await Conversion.init({
      input,
      output,
      video: track => ({
        width: 480,
        bitrate: QUALITY_LOW,
        discard: track.number > 1, // Keep only the first video track
      }),
      audio: track => ({
        numberOfChannels: 1,
        bitrate: QUALITY_LOW,
        discard: track.number > 1, // Keep only the first audio track
      }),
      trim: {
        // Keep only the first 60 seconds
        start: 0,
        end: 60,
      },
      tags: {}, // Remove any metadata tags
    });

    await conversion.execute();
    ```
  </Step>

  <Step title="Record live media">
    Capture from webcam or microphone and save to a file:

    ```typescript theme={null}
    import {
      Output,
      BufferTarget,
      WebMOutputFormat,
      MediaStreamVideoTrackSource,
      MediaStreamAudioTrackSource,
      QUALITY_MEDIUM
    } from 'mediabunny';

    const userMedia = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    });
    const videoTrack = userMedia.getVideoTracks()[0];
    const audioTrack = userMedia.getAudioTracks()[0];

    const output = new Output({
      format: new WebMOutputFormat(),
      target: new BufferTarget(),
    });

    if (videoTrack) {
      const source = new MediaStreamVideoTrackSource(videoTrack, {
        codec: 'vp9',
        bitrate: QUALITY_MEDIUM,
      });
      output.addVideoTrack(source);
    }

    if (audioTrack) {
      const source = new MediaStreamAudioTrackSource(audioTrack, {
        codec: 'opus',
        bitrate: QUALITY_MEDIUM,
      });
      output.addAudioTrack(source);
    }

    await output.start();

    // Recording happens automatically...
    // Stop when ready:

    await output.finalize();
    ```
  </Step>
</Steps>

## Next steps

Now that you've seen the basics, dive deeper into specific topics:

<CardGroup cols={2}>
  <Card title="Reading media files" icon="book-open" href="/guides/reading-files">
    Learn about input sources, demuxers, and extracting data
  </Card>

  <Card title="Writing media files" icon="pen" href="/guides/writing-files">
    Understand output targets, muxers, and media sources
  </Card>

  <Card title="Converting media files" icon="arrows-rotate" href="/guides/converting-files">
    Master transmuxing, transcoding, and conversion options
  </Card>

  <Card title="Supported formats" icon="list" href="/concepts/formats-and-codecs">
    See the full list of container formats and codecs
  </Card>
</CardGroup>