处理音视频业务

前言

音视频不是前端的“功能点”，而是前端工程能力的“天花板业务”。
它同时考验：

• 浏览器底层理解
• 性能优化能力
• 状态机设计
• 网络与系统思维

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

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

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

• 音视频不是“数据”，而是“流”

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

这直接决定了：

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

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

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

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

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

1、采集（Capture）

本质：

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

前端对应：

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

核心 API：

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

关键点（非常重要）：

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

2、预处理（Processing）

视频预处理：

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

音频预处理：

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

前端技术：

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

3、编码（Encoding）

本质：

• 把“原始信号”压缩成可传输的格式

常见编码格式：

前端的现实：

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

关键认知：

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

4、传输（Transmission）

两大路线：

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

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

功能：

• 上传
• 下载
• 点播

特点：

• 可分片
• 可重试
• 可校验

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

功能：

• 直播
• 通话

特点：

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

传输协议全景：

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

5、解码（Decoding）

本质：

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

前端现实：

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

难点：

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

6、渲染（Rendering）

视频渲染：

音频渲染：

• AudioContext.destination
• 耳机 / 扬声器输出

核心指标：

• 首帧时间
• 卡顿率
• AV 同步

7、控制（Control）

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

控制维度：

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

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

1、点播系统（Video on Demand）

典型产品：

• 教育视频
• 视频网站

核心关注点：

• 秒开
• 拖拽不卡
• 多清晰度

技术组合：

视频切片+HLS/DASH+CDN

2、直播系统（Live Streaming）

特点：

前端关注：

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

3、实时音视频（RTC）

特点：

技术核心：

WebRTC+STUN/TURN

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

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

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

四、前端技术栈与 API

1、媒体捕获与播放

HTML5 原生标签：

<videoid="video"controlsautoplay></video><audioid="audio"controls></audio>

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

Media Devices API：

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

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

2、前端录制

MediaRecorder API：

letrecorder=newMediaRecorder(stream);letchunks=[];recorder.ondataavailable=e=>chunks.push(e.data);recorder.onstop=()=>{constblob=newBlob(chunks,{type:'video/webm'});consturl=URL.createObjectURL(blob);video.src=url;};recorder.start();

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

3、视频帧处理与滤镜

Canvas + requestAnimationFrame：

constcanvas=document.createElement('canvas');constctx=canvas.getContext('2d');functiondrawFrame(){ctx.drawImage(video,0,0,canvas.width,canvas.height);letimageData=ctx.getImageData(0,0,canvas.width,canvas.height);// 对 imageData.data 进行滤镜处理ctx.putImageData(imageData,0,0);requestAnimationFrame(drawFrame);}drawFrame();

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

4、音频处理

Web Audio API：

constaudioCtx=newAudioContext();constsource=audioCtx.createMediaStreamSource(stream);constgainNode=audioCtx.createGain();source.connect(gainNode).connect(audioCtx.destination);gainNode.gain.value=2;// 放大音量

可做：

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

5、流式与分片上传

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

实现方式：

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

constchunkSize=1024*1024;// 1MBfor(letstart=0;start<file.size;start+=chunkSize){constchunk=file.slice(start,start+chunkSize);awaituploadChunk(chunk);}

6、实时通信（WebRTC）

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

流程：

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

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

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

7、格式转换 / 转码

前端可使用 FFmpeg.js 实现：

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

示例：

awaitffmpeg.load();ffmpeg.FS('writeFile','input.mp4',awaitfetchFile(file));awaitffmpeg.run('-i','input.mp4','-ss','00:00:10','-t','10','output.mp4');constdata=ffmpeg.FS('readFile','output.mp4');

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

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

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

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

前端负责的核心事情：

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

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

七、前端优化建议

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、浏览器碎片化

4、网络不可控

• 抖动
• 丢包
• NAT

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

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

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

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