Web Codecs API是浏览器层面提供的原生媒体处理接口，允许开发者直接访问和操作原始音频、视频数据，跳过传统媒体处理流程中的中间层，实现更高效的编码、解码、转码等操作，适合实时音视频处理、媒体编辑等场景。
Web Codecs API核心概念
在使用Web Codecs API处理原始流之前，需要了解几个核心对象：
- VideoEncoder：视频编码器，用于将原始视频帧编码为指定格式的压缩视频数据
- VideoDecoder：视频解码器，用于将压缩视频数据解码为原始视频帧
- AudioEncoder：音频编码器，用于将原始音频数据编码为压缩音频格式
- AudioDecoder：音频解码器，用于将压缩音频数据解码为原始音频数据
- EncodedVideoChunk：编码后的视频数据块，是编码器的输出和解码器的输入
- EncodedAudioChunk：编码后的音频数据块，是音频编码器的输出和解码器的输入
处理原始视频流
解码原始视频流
如果拿到的是编码后的视频数据块，可使用VideoDecoder解码为原始视频帧，首先需要初始化解码器：
// 初始化视频解码器
const videoDecoder = new VideoDecoder({
output: (videoFrame) => {
// 处理解码后的原始视频帧
console.log('解码得到视频帧，宽度:', videoFrame.displayWidth, '高度:', videoFrame.displayHeight);
// 使用完帧之后需要关闭，释放资源
videoFrame.close();
},
error: (err) => {
console.error('视频解码错误:', err);
}
});
// 配置解码器，需要匹配输入视频的编码格式
videoDecoder.configure({
codec: 'vp8', // 编码格式，如vp8、vp9、avc1等
codedWidth: 1280,
codedHeight: 720
});
// 假设收到编码后的视频数据块，创建EncodedVideoChunk并送入解码器
const encodedChunkData = new Uint8Array([/* 实际的编码视频数据 */]);
const encodedVideoChunk = new EncodedVideoChunk({
type: 'key', // 帧类型，key表示关键帧，delta表示非关键帧
timestamp: 0, // 时间戳，单位微秒
duration: 33333, // 帧时长，单位微秒，对应30fps
data: encodedChunkData
});
videoDecoder.decode(encodedVideoChunk);
// 解码完成后刷新解码器
videoDecoder.flush();
编码原始视频帧为视频流
如果已经有原始视频帧，需要编码为压缩视频流，可使用VideoEncoder：
// 初始化视频编码器
const videoEncoder = new VideoEncoder({
output: (encodedVideoChunk) => {
// 处理编码后的视频数据块，可存储或传输
console.log('编码得到视频块，时间戳:', encodedVideoChunk.timestamp);
},
error: (err) => {
console.error('视频编码错误:', err);
}
});
// 配置编码器参数
videoEncoder.configure({
codec: 'vp8',
width: 1280,
height: 720,
bitrate: 2000000, // 码率，单位bps
framerate: 30 // 帧率
});
// 创建原始视频帧，这里以Canvas生成的帧为例
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
const ctx = canvas.getContext('2d');
// 绘制简单内容到Canvas
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 1280, 720);
// 从Canvas生成VideoFrame
const videoFrame = new VideoFrame(canvas, {
timestamp: 0,
duration: 33333
});
// 送入编码器编码
videoEncoder.encode(videoFrame);
// 编码完成后关闭帧释放资源
videoFrame.close();
// 编码完成后刷新编码器
videoEncoder.flush();
处理原始音频流
解码原始音频流
音频解码流程和视频类似，使用AudioDecoder处理编码后的音频数据块：
// 初始化音频解码器
const audioDecoder = new AudioDecoder({
output: (audioData) => {
// 处理解码后的原始音频数据
console.log('解码得到音频数据，采样率:', audioData.sampleRate, '通道数:', audioData.numberOfChannels);
// 使用完音频数据后关闭释放资源
audioData.close();
},
error: (err) => {
console.error('音频解码错误:', err);
}
});
// 配置音频解码器
audioDecoder.configure({
codec: 'opus', // 音频编码格式，如opus、aac等
sampleRate: 48000,
numberOfChannels: 2
});
// 创建编码后的音频数据块
const encodedAudioData = new Uint8Array([/* 实际的编码音频数据 */]);
const encodedAudioChunk = new EncodedAudioChunk({
type: 'key',
timestamp: 0,
duration: 1000000, // 1秒音频
data: encodedAudioData
});
// 送入解码器解码
audioDecoder.decode(encodedAudioChunk);
// 刷新解码器
audioDecoder.flush();
编码原始音频数据为音频流
原始音频数据编码为压缩音频流使用AudioEncoder，示例如下：
// 初始化音频编码器
const audioEncoder = new AudioEncoder({
output: (encodedAudioChunk) => {
// 处理编码后的音频数据块
console.log('编码得到音频块，大小:', encodedAudioChunk.byteLength);
},
error: (err) => {
console.error('音频编码错误:', err);
}
});
// 配置音频编码器
audioEncoder.configure({
codec: 'opus',
sampleRate: 48000,
numberOfChannels: 2,
bitrate: 128000 // 音频码率
});
// 创建原始音频数据，这里生成1秒的静音数据
const sampleRate = 48000;
const numberOfChannels = 2;
const length = sampleRate; // 1秒采样数
const audioData = new AudioData({
format: 'f32', // 音频数据格式，f32表示32位浮点型
sampleRate: sampleRate,
numberOfChannels: numberOfChannels,
numberOfFrames: length,
timestamp: 0,
data: new Float32Array(length * numberOfChannels) // 初始化为静音数据
});
// 送入编码器编码
audioEncoder.encode(audioData);
// 关闭音频数据释放资源
audioData.close();
// 刷新编码器
audioEncoder.flush();
注意事项
- 所有的
VideoFrame、AudioData对象使用完成后必须调用close()方法，否则会造成内存泄漏 - 编码和解码器的配置参数必须和输入数据的格式匹配，否则会导致处理失败
- 时间戳和时长单位都是微秒，处理时需要注意单位转换
- Web Codecs API目前主流现代浏览器都已经支持，但在使用前建议检查兼容性
Web Codecs API提供了底层的音视频处理能力，相比传统的MediaRecorder等接口，灵活性更高，适合需要自定义处理原始流的业务场景，开发者可根据实际需求选择合适的接口组合。
Web_Codecs_API原始音频流原始视频流媒体处理修改时间：2026-07-15 03:06:35