🎥 Mediabunny：浏览器端的媒体处理工具库

// 典型应用场景：视频元数据解析
import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';

const analyzeMedia = async (file: Blob) => {
  const input = new Input({
    source: new BlobSource(file), // [1] 从Blob读取数据
    formats: ALL_FORMATS,         // [2] 支持所有格式
  });

  // [3] 获取视频轨道元数据
  const videoTrack = await input.getPrimaryVideoTrack();
  console.log(`分辨率: ${videoTrack.displayWidth}x${videoTrack.displayHeight}`);
  
  // [4] 获取音频轨道元数据
  const audioTrack = await input.getPrimaryAudioTrack();
  console.log(`采样率: ${audioTrack.sampleRate}Hz`);
  
  // [5] 计算视频时长（秒）
  const duration = await input.computeDuration();
  return { videoTrack, audioTrack, duration };
};

class Input {
  constructor(options: {
    source: MediaSource;        // 输入源实现
    formats?: ContainerFormat[]; // 支持的格式
    bufferSize?: number;         // 内部缓冲区大小
  });
  
  // 获取媒体时长(秒)
  async computeDuration(): Promise<number>;
  
  // 获取视频轨道
  async getVideoTracks(): Promise<VideoTrack[]>;
  
  // 创建媒体接收器
  createSampleSink(track: MediaTrack): SampleSink;
}

// 创建视频帧处理流水线
const processVideo = async (input: Input) => {
  const videoTrack = await input.getPrimaryVideoTrack();
  const sink = input.createSampleSink(videoTrack);
  
  // 获取特定时间点的视频帧
  const frameAt5s = await sink.getSample(5.0);
  
  // 帧处理示例：转换为灰度图
  const processFrame = (frame: VideoFrame) => {
    const canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
    const ctx = canvas.getContext('2d');
    ctx.drawImage(frame, 0, 0);
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // RGB转灰度算法
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i+1] + data[i+2]) / 3;
      data[i] = avg;     // R
      data[i+1] = avg;   // G
      data[i+2] = avg;   // B
    }
    
    ctx.putImageData(imageData, 0, 0);
    return canvas.transferToImageBitmap();
  };
  
  // 遍历所有视频帧
  for await (const frame of sink.samples()) {
    const processed = processFrame(frame);
    // 发送到渲染管线...
    frame.close(); // 重要！释放内存
  }
};

// WebRTC直播转HLS实现
class LiveTranscoder {
  private input: Input;
  private output: Output;
  
  constructor(stream: MediaStream) {
    // [1] 从WebRTC流创建输入源
    this.input = new Input({
      source: new MediaStreamSource(stream)
    });
    
    // [2] 创建HLS分片输出
    this.output = new Output({
      format: new HLSOutputFormat({
        segmentDuration: 6, // 6秒分片
      }),
      target: new HTTPPostTarget('/api/upload-hls')
    });
    
    // [3] 创建转码管道
    this.conversion = Conversion.init({
      input: this.input,
      output: this.output
    });
  }
  
  async start() {
    // [4] 启动实时转码
    await this.conversion.execute({
      realtime: true // 启用实时模式
    });
  }
}

// 注册AV1软件编码器
import { registerCustomEncoder } from 'mediabunny/encoding';

class AV1SoftwareEncoder implements VideoEncoder {
  async configure(config: VideoEncoderConfig) {
    // 初始化编码器实例
  }
  
  async encode(frame: VideoFrame) {
    // 实现AV1编码逻辑
    return encodedData;
  }
}

// 注册到Mediabunny系统
registerCustomEncoder({
  codec: 'av01',
  encoderFactory: () => new AV1SoftwareEncoder()
});

import { Input, FileSource } from 'mediabunny';
import fs from 'fs';

// 创建Node.js可读流适配器
class NodeStreamSource {
  constructor(private stream: fs.ReadStream) {}
  
  async read(buffer: Uint8Array) {
    return new Promise((resolve) => {
      this.stream.once('data', (chunk) => {
        buffer.set(chunk);
        resolve(chunk.length);
      });
    });
  }
}

// 在Node.js中处理媒体文件
const processInNode = async (filePath: string) => {
  const stream = fs.createReadStream(filePath);
  const input = new Input({
    source: new NodeStreamSource(stream), // [1] 自定义Node源
    formats: ALL_FORMATS
  });
  
  // [2] 执行标准处理流程...
};

// 高效帧处理模式
const processFrames = async (sink: SampleSink) => {
  // 方案1：直接处理（高内存）
  const allFrames = await sink.getAllSamples(); // 谨慎使用！
  
  // 方案2：流式处理（推荐）
  const frameIterator = sink.samples({ 
    batchSize: 10, // 每批10帧
    maxQueue: 3    // 最大缓冲3批
  });
  
  for await (const frames of frameIterator) {
    // 批量处理帧数据
    await Promise.all(frames.map(processFrame));
    
    // 及时释放内存
    frames.forEach(frame => frame.close());
  }
};

// 主线程
const worker = new Worker('./video-worker.js');

worker.postMessage({
  type: 'start-processing',
  source: blobSource, // 可转移对象
  config: { /* ... */ }
});

// Worker线程 (video-worker.js)
import { initBackend } from 'mediabunny/worker';

initBackend(self, {
  handleMessage: async (msg) => {
    if (msg.type === 'start-processing') {
      const input = new Input({ source: msg.source });
      // ...执行处理逻辑
    }
  }
});