处理音视频业务

前言
一、音视频业务的本质（先把"是什么"讲清楚）
二、音视频业务的完整生命周期（核心主线）
- 1、采集（Capture）
- 2、预处理（Processing）
- 3、编码（Encoding）
- 4、传输（Transmission）
- - （1）、文件式传输（非实时）
  - [（2）、流式传输（实时 / 准实时）](#（2）、流式传输（实时 / 准实时）)
- 5、解码（Decoding）
- 6、渲染（Rendering）
- 7、控制（Control）
三、三大典型音视频业务形态（非常重要）
- [1、点播系统（Video on Demand）](#1、点播系统（Video on Demand）)
- [2、直播系统（Live Streaming）](#2、直播系统（Live Streaming）)
- 3、实时音视频（RTC）
三、前端音视频处理的业务场景
[四、前端技术栈与 API](#四、前端技术栈与 API)
- 1、媒体捕获与播放
- 2、前端录制
- 3、视频帧处理与滤镜
- 4、音频处理
- 5、流式与分片上传
- 6、实时通信（WebRTC）
- [7、格式转换 / 转码](#7、格式转换 / 转码)
五、前端在音视频系统中的真实职责
六、前端音视频处理的重点与难点
七、前端优化建议
八、常见的坑
九、音视频业务的"设计原则"（总结）

前言

音视频不是前端的"功能点"，而是前端工程能力的"天花板业务"。

它同时考验：

浏览器底层理解

性能优化能力

状态机设计

网络与系统思维

一、音视频业务的本质（先把"是什么"讲清楚）

音视频业务的本质 = 时间连续信号的采集、编码、传输、解码、渲染。

「音视频业务」和普通 CRUD 最大的不同点只有一句话：

音视频不是"数据"，而是"流"

因此它天然具备这些特征：

特性	含义
强时序	音画必须按时间顺序
高数据量	秒级就能产生 MB 级数据
容错要求高	卡顿 100ms 用户就能感知
不可回滚	播放/直播不能像请求失败重试
多终端差异	浏览器、系统、设备能力差异极大

这直接决定了：

音视频一定是"系统工程"，不是简单 API 调用。

二、音视频业务的完整生命周期（核心主线）

所有音视频业务，都可以抽象为这 7 个阶段：

typescript 复制代码

采集 → 预处理 → 编码 → 传输 → 解码 → 渲染 → 控制

下面我们逐段拆解（前端重点）。

1、采集（Capture）

本质：

把物理世界的声波 / 光信号转成数字信号

前端对应：

摄像头
麦克风
屏幕（屏幕共享）

核心 API：

navigator.mediaDevices.getUserMedia()
navigator.mediaDevices.getDisplayMedia()

关键点（非常重要）：

问题	本质
权限	浏览器安全模型
分辨率	性能 vs 清晰度
帧率	流畅度 vs 带宽
采样率	音质 vs 体积

❗采集阶段选错参数，后面全部都会被放大成问题

2、预处理（Processing）

视频预处理：

裁剪
缩放
镜像
美颜 / 滤镜
虚拟背景

音频预处理：

增益（音量）
降噪
回声消除
混音

前端技术：

技术	用途
Canvas	视频逐帧处理
WebGL	GPU 加速滤镜
Web Audio API	音频信号处理
AudioWorklet	低延迟音频处理

❗预处理是前端最"吃性能"的阶段

3、编码（Encoding）

本质：

把"原始信号"压缩成可传输的格式

常见编码格式：

类型	编码
视频	H.264 / H.265 / VP8 / VP9
音频	AAC / Opus / MP3

前端的现实：

浏览器不允许你手写编码器，只能使用浏览器内置编码 或 WASM（ffmpeg.wasm）

关键认知：

typescript 复制代码

编码 = 性能、画质、带宽三者取舍

4、传输（Transmission）

两大路线：

文件式传输（非实时）
流式传输（实时 / 准实时）

（1）、文件式传输（非实时）

功能：

上传
下载
点播

特点：

可分片
可重试
可校验

（2）、流式传输（实时 / 准实时）

功能：

直播
通话

特点：

不能回滚
延迟优先
丢帧可接受

传输协议全景：

场景	协议
点播	HTTP / HTTPS
直播	HLS / DASH / FLV
通话	WebRTC（UDP）
推流	RTMP / SRT

❗前端能直接参与的：HTTP / HLS / WebRTC

5、解码（Decoding）

本质：

typescript 复制代码

把压缩数据 → 原始音视频帧

前端现实：

由浏览器解码器完成
<video>、<audio> 内部自动处理

难点：

编码格式兼容性
硬解 / 软解切换
解码失败兜底

6、渲染（Rendering）

视频渲染：

技术	场景
`<video>`	常规播放
Canvas	自定义渲染
WebGL	高性能特效

音频渲染：

AudioContext.destination
耳机 / 扬声器输出

核心指标：

首帧时间
卡顿率
AV 同步

7、控制（Control）

音视频系统 ≠ 播放，而是一个"状态机"。

控制维度：

播放 / 暂停
Seek
倍速
清晰度切换
音轨 / 字幕
网络自适应

三、三大典型音视频业务形态（非常重要）

1、点播系统（Video on Demand）

典型产品：

教育视频
视频网站

核心关注点：

秒开
拖拽不卡
多清晰度

技术组合：

typescript 复制代码

视频切片 + HLS/DASH + CDN

2、直播系统（Live Streaming）

特点：

维度	要求
延迟	秒级
稳定	高
并发	极高

前端关注：

播放端
弱网自适应
卡顿恢复

3、实时音视频（RTC）

特点：

指标	要求
延迟	< 300ms
同步	极高
丢包	可容忍

技术核心：

typescript 复制代码

WebRTC + STUN / TURN

三、前端音视频处理的业务场景

前端涉及音视频处理的业务主要有以下几类：

音视频播放
- 视频/音频的播放、暂停、拖动、音量控制。
- 常用于视频教程、直播、短视频等场景。
实时音视频采集
- 通过浏览器获取用户摄像头和麦克风数据。
- 场景：视频会议、在线面试、实时直播、短视频拍摄。
音视频录制
- 本地录制音视频并保存或上传。
- 场景：短视频应用、语音留言、课堂录制。
音视频处理
- 前端加工：裁剪、滤镜、变速、音频增益、去噪。
- 格式转换：mp4 ↔ webm、wav ↔ mp3。
- 场景：短视频剪辑、音频编辑、直播特效。
音视频实时通信（RTC）
- WebRTC 技术，实现点对点或多端实时视频通话。
- 场景：会议系统、在线教育、远程医疗。
音视频流式处理
- 大文件分段上传、边录制边上传。
- 场景：长视频上传、直播推流。

四、前端技术栈与 API

1、媒体捕获与播放

HTML5 原生标签：

html 复制代码

<video id="video" controls autoplay></video>
<audio id="audio" controls></audio>

优点：最简单、兼容好。
缺点：功能有限，不能直接处理视频帧。

Media Devices API：

typescript 复制代码

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    video.srcObject = stream;
  });

用于获取摄像头/麦克风流。
可结合 <canvas> 做滤镜处理。

2、前端录制

MediaRecorder API：

typescript 复制代码

let recorder = new MediaRecorder(stream);
let chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  video.src = url;
};
recorder.start();

优势：纯前端即可录制音视频。
限制：浏览器兼容性、格式支持有限（Chrome 支持 webm）。

3、视频帧处理与滤镜

Canvas + requestAnimationFrame：

typescript 复制代码

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

function drawFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 对 imageData.data 进行滤镜处理
  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(drawFrame);
}

drawFrame();

可以实现：灰度、模糊、亮度、对比度等滤镜。
可以结合 WebGL 做 GPU 加速。

4、音频处理

Web Audio API：

typescript 复制代码

const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);
const gainNode = audioCtx.createGain();
source.connect(gainNode).connect(audioCtx.destination);
gainNode.gain.value = 2; // 放大音量

可做：

音量调整、均衡器
音频滤波、降噪
可视化（频谱图、波形图）

5、流式与分片上传

场景：大视频文件，上传进度实时显示。

实现方式：

分片读取文件（File API + Blob.slice）
通过 fetch 或 XMLHttpRequest 上传
可结合 Service Worker 或 Web Worker 处理数据

typescript 复制代码

const chunkSize = 1024*1024; // 1MB
for (let start = 0; start < file.size; start += chunkSize) {
  const chunk = file.slice(start, start + chunkSize);
  await uploadChunk(chunk);
}

6、实时通信（WebRTC）

概念：点对点实时音视频通信。

流程：

获取本地媒体流（getUserMedia）
创建 RTCPeerConnection
信令服务器交换 offer/answer 和 ICE candidates
远端视频播放

typescript 复制代码

const pc = new RTCPeerConnection();
stream.getTracks().forEach(track => pc.addTrack(track, stream));
pc.ontrack = e => { remoteVideo.srcObject = e.streams[0]; };

难点：网络穿透、延迟优化、多端同步。

7、格式转换 / 转码

前端可使用 FFmpeg.js 实现：

mp4 → webm
wav → mp3
视频裁剪、分辨率修改

示例：

typescript 复制代码

await ffmpeg.load();
ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
await ffmpeg.run('-i', 'input.mp4', '-ss', '00:00:10', '-t', '10', 'output.mp4');
const data = ffmpeg.FS('readFile', 'output.mp4');

注意：前端性能受限，适合短视频或轻量级处理。

五、前端在音视频系统中的真实职责

❗非常重要的一点认知纠正：

前端不是"播放器开发者"，而是"音视频控制与体验工程师"

前端负责的核心事情：

参数选择（分辨率 / 帧率）
状态管理（播放状态机）
性能调度（帧处理 / Worker）
异常兜底（断流 / 失败）
用户体验（延迟感知、反馈）

六、前端音视频处理的重点与难点

重点	难点	解决方案
音视频采集	摄像头/麦克风权限、浏览器兼容性	MediaDevices API + 兼容策略
音视频播放	自适应格式、跨浏览器播放	HTML5 video/audio + HLS/DASH 播放库
实时处理	滤镜、帧处理性能	Canvas/WebGL GPU 加速
音频处理	音量、均衡器、降噪	Web Audio API，离线处理或 Web Worker
大文件上传	内存占用、上传进度	分片 + 流式上传 + Worker
实时通信	NAT 穿透、延迟	WebRTC + TURN/STUN 服务器
转码	浏览器性能、文件大小	ffmpeg.wasm 或服务端转码

七、前端优化建议

1、性能优化

视频帧处理尽量在 Web Worker 或 GPU 上做。
Canvas 滤镜尽量批量处理，避免每帧 CPU 计算。
大文件分片上传，避免一次性占用内存。

2、用户体验

实时显示上传进度。
录制时显示倒计时/预览。
对不同浏览器做兼容提示。

3、安全与权限

HTTPS 必须获取摄像头和麦克风。
对上传视频进行校验，防止恶意文件。

4、开源工具推荐

视频播放：video.js, hls.js
视频编辑：ffmpeg.wasm
实时通信：simple-peer, socket.io + WebRTC

八、常见的坑

1、性能是第一杀手

JS 主线程阻塞 = 花屏 / 断音
Canvas 滤镜 = CPU 爆炸

Web Worker / WebGL 是必选项

2、音画不同步

视频慢
音频快
seek 后错位

时间戳 + 缓冲区管理

3、浏览器碎片化

浏览器	问题
Safari	编码格式少
Chrome	WebM 优
移动端	性能差

4、网络不可控

抖动
丢包
NAT

自适应码率（ABR）是生命线

九、音视频业务的"设计原则"（总结）

如果你以后设计任何音视频系统，记住这 6 条：

永远优先保证"不断"
延迟 > 清晰度
音频 > 视频
能丢帧，不可卡帧
前端只做"轻处理"
状态机设计比 UI 更重要

处理音视频业务

目录

前言

一、音视频业务的本质（先把"是什么"讲清楚）

二、音视频业务的完整生命周期（核心主线）

1、采集（Capture）

2、预处理（Processing）

3、编码（Encoding）

4、传输（Transmission）

（1）、文件式传输（非实时）

（2）、流式传输（实时 / 准实时）

5、解码（Decoding）

6、渲染（Rendering）

7、控制（Control）

三、三大典型音视频业务形态（非常重要）

1、点播系统（Video on Demand）

2、直播系统（Live Streaming）

3、实时音视频（RTC）

三、前端音视频处理的业务场景

四、前端技术栈与 API

1、媒体捕获与播放

2、前端录制

3、视频帧处理与滤镜

4、音频处理

5、流式与分片上传

6、实时通信（WebRTC）

7、格式转换 / 转码

五、前端在音视频系统中的真实职责

六、前端音视频处理的重点与难点

七、前端优化建议

1、性能优化

2、用户体验

3、安全与权限

4、开源工具推荐

八、常见的坑

1、性能是第一杀手

2、音画不同步

3、浏览器碎片化

4、网络不可控

九、音视频业务的"设计原则"（总结）