第1章
WebRTC初探
什么是WebRTC · 发展历史 · 核心应用场景 · 技术架构概览
概念基础
第2章
浏览器兼容性与环境搭建
主流浏览器支持 · getUserMedia兼容 · 本地HTTPS环境
环境兼容
第3章
媒体流获取实战
摄像头视频 · 麦克风音频 · 音视频同时获取 · 权限处理
getUserMedia实战
第4章
媒体约束精讲
分辨率/帧率 · 采样率/声道 · 设备ID · 降噪处理
约束高级
第5章
视频流渲染
绑定video元素 · 播放/暂停 · 镜像效果 · 自适应尺寸
渲染video
第6章
音频可视化基础
AnalyserNode · 实时频谱图 · 波形图 · 性能优化
音频可视化
第7章
Canvas截图原理
Canvas 2D · drawImage · 视频帧绘制 · 导出图片数据
Canvas核心
第8章
截图功能实战
拍照按钮 · 截图分辨率 · 倒计时拍照 · 连拍功能
截图交互
第9章
截图美化与编辑
滤镜(灰度/反转/模糊) · 裁剪 · 水印 · 缩放旋转
编辑滤镜
第10章
截图保存与分享
PNG/JPEG · 图片质量 · 下载功能 · Web Share API
保存分享
第11章
MediaRecorder入门
API概述 · MIME类型 · 创建实例 · 录制状态管理
录制基础
第12章
录制控制实战
开始/暂停/恢复/停止 · 错误处理 · 时长限制
控制状态
第13章
录制数据获取
dataavailable事件 · Blob · ArrayBuffer · 大文件分片
数据Blob
第14章
视频录制实战
摄像头 · 屏幕(getDisplayMedia) · 画中画 · 音频流
视频屏幕
第15章
录制文件保存
Blob URL · 预览播放 · 下载视频 · 自定义文件名
保存下载
第16章
录制进度与状态
录制计时器 · 状态指示灯 · 已录制时长 · 进度条
进度UI
第17章
高级录制功能
时间戳 · 叠加文字 · 分段录制 · 自动停止
高级时间戳
第18章
录制性能优化
码率控制 · 关键帧间隔 · 硬件加速 · 低性能降级
性能编码
第19章
音视频合成基础
Canvas合成帧 · 音频混音 · MediaStream合成 · Web Audio
合成音频
第20章
视频剪辑基础
时间裁剪 · 视频拼接 · 变速播放 · 倒放效果
剪辑编辑
第21章
实时滤镜录制
CSS滤镜 · Canvas逐帧处理 · 美颜效果 · 性能优化
滤镜实时
第22章
屏幕录制实战
getDisplayMedia详解 · 共享屏幕/窗口/标签页 · 系统音频
屏幕共享
第23章
录制文件上传
FormData · 分片上传 · 上传进度 · 断点续传
上传网络
第24章
录制文件转码
FFmpeg.wasm · 格式转换 · 提取音频 · 压缩视频
转码FFmpeg
第25章
录制文件播放
自定义播放器 · 播放/暂停/进度 · 倍速 · 字幕叠加
播放器控制
第26章
多人录制方案
多流同时录制 · 同步多个录制器 · 合并视频 · 时间同步
多人同步
第27章
录制错误处理
常见错误 · 设备占用 · 中断恢复 · 权限撤销
错误健壮性
第28章
录制安全与隐私
HTTPS强制 · 用户授权 · 内容加密 · 本地存储
安全隐私
第29章
移动端适配
浏览器兼容 · 触摸事件 · 屏幕适配 · 性能优化
移动端适配
第30章
综合实战项目
完整录制+截图+编辑+导出 · 架构设计 · 部署测试
项目全流程