js如何操作WebCodecs API 6个编解码技巧处理音视频流

let decoder = new VideoDecoder({
  output: frame => {
    // 处理解码后的帧
    console.log("Decoded Frame", frame);
    frame.close(); // 释放帧资源，非常重要！
  },
  error: e => {
    console.error("Decoding failed:", e);
  }
});

// 初始配置
decoder.configure({
  codec: 'avc1.42E01E', // H.264 Baseline Profile
  codedWidth: 640,
  codedHeight: 480
});

// 稍后，如果需要更改分辨率
decoder.configure({
  codec: 'avc1.42E01E',
  codedWidth: 1280,
  codedHeight: 720
});

// 解码
const encodedChunk = new EncodedVideoChunk({
  type: 'key',
  timestamp: 0,
  data: new Uint8Array([...]) // 你的编码数据
});

decoder.decode(encodedChunk);

let encoder = new VideoEncoder({
  output: chunk => {
    // 处理编码后的块
    console.log("Encoded Chunk", chunk);
  },
  error: e => {
    console.error("Encoding failed:", e);
  }
});

encoder.configure({
  codec: 'avc1.42E01E',
  width: 640,
  height: 480,
  bitrate: 1000000, // 初始码率：1Mbps
  framerate: 30
});

// 动态调整码率
encoder.encodeQueueSize = 0; // 立即生效
encoder.bitrate = 500000; // 调整为 500kbps

// 编码
const videoFrame = new VideoFrame(imageData, {
  timestamp: performance.now()
});
encoder.encode(videoFrame);
videoFrame.close(); // 释放帧资源

// 创建 EncodedVideoChunk
const videoChunk = new EncodedVideoChunk({
  type: 'key', // or 'delta'
  timestamp: 0,
  duration: 33333, // 微秒
  data: new Uint8Array([...])
});

// 创建 EncodedAudioChunk
const audioChunk = new EncodedAudioChunk({
  type: 'key', // or 'delta'
  timestamp: 0,
  duration: 20000, // 微秒
  data: new Uint8Array([...])
});

let audioEncoder = new AudioEncoder({
    output: (chunk) => {
        console.log("Encoded Audio Chunk", chunk);
    },
    error: (e) => {
        console.error("Audio Encoding failed:", e);
    }
});

audioEncoder.configure({
    codec: 'opus',
    sampleRate: 48000,
    numberOfChannels: 2, // 立体声
    bitrate: 128000
});

// 假设你有一个原始的音频 buffer
const rawAudioData = new Float32Array([...]); // 原始音频数据

// 创建 AudioData 对象
const audioData = new AudioData({
    format: 'f32-planar', // 32位浮点数，平面模式
    sampleRate: 44100,
    numberOfChannels: 1, // 单声道
    numberOfFrames: rawAudioData.length,
    data: rawAudioData
});

// 编码
audioEncoder.encode(audioData);
audioData.close();

// 创建一个 VideoFrame
const videoFrame = new VideoFrame(imageData, {
  timestamp: performance.now()
});

// 创建一个用于存储复制数据的 ArrayBuffer
const buffer = new ArrayBuffer(videoFrame.allocationSize());

// 将 VideoFrame 的数据复制到 ArrayBuffer
videoFrame.copyTo(buffer);

// 或者，复制到另一个 VideoFrame
const anotherVideoFrame = new VideoFrame(buffer, {
  timestamp: performance.now(),
  format: videoFrame.format,
  codedWidth: videoFrame.codedWidth,
  codedHeight: videoFrame.codedHeight
});

videoFrame.close();
anotherVideoFrame.close();

// WebTransport 连接
const transport = new WebTransport('https://example.com/webtransport');
await transport.ready;

// 发送编码后的视频块
encoder.output = chunk => {
  const writer = transport.datagrams.writable.getWriter();
  writer.write(chunk.data);
  writer.releaseLock();
};

// 接收解码后的视频帧 (示例，需要服务端配合)
transport.datagrams.readable.pipeTo(new WritableStream({
  write(chunk) {
    // 将 chunk (EncodedVideoChunk) 传递给解码器
    decoder.decode(chunk);
  }
}));

if ('VideoEncoder' in window && 'VideoDecoder' in window) {
  // 支持 WebCodecs
  console.log("WebCodecs is supported!");
} else {
  // 不支持 WebCodecs
  console.warn("WebCodecs is not supported in this browser.");
  // 提供备选方案，例如使用 Media Source Extensions (MSE)
}