HTML5视频帧抓取是以前端canvas实时读取video像素流，用于封面生成、GIF提取、滤镜处理及绿幕合成；需监听loadeddata/seeked事件、匹配原生尺寸、控制帧率与编码，并采用HSV色域抠像和线性插值合成。
HTML5 视频内容提取与 Canvas 帧抓取不是“导出视频”本身，而是以 video 元素为像素源，通过 canvas 实时读取、处理、保存画面数据。它不依赖后端，但对时机、跨域、尺寸和性能有明确要求。实际落地时，核心是把 video 当作动态图像流来用，而非媒体容器。
视频封面图自动生成
用户上传 MP4 后，前端自动截取第 1 秒、第 3 秒、第 5 秒三帧，生成高清 PNG 封面供选择。关键点：
- 监听 loadeddata 事件确保元数据就绪，再设置
video.currentTime = 1并等待 seeked 触发后再绘制 - canvas 宽高设为
video.videoWidth和video.videoHeight，避免 CSS 缩放导致模糊 - 每帧调用
ctx.drawImage(video, 0, 0)后立即执行canvas.toBlob(callback, 'image/jpeg', 0.9)，压缩兼顾清晰与体积
短视频平台动图预览（GIF 提取）
从本地视频中抽取连续 20 帧（间隔 100ms），合成轻量 GIF。浏览器原生不支持 GIF 编码，需引入轻量库如 gif.js 或 omggif：
- 用
requestAnimationFrame控制帧采集节奏，避免主线程阻塞 - 每帧调用
canvas.toDataURL('image/png')获取 base64，再解码为 Uint8Array 输入 GIF 编码器 - 限制输出尺寸（如统一缩放到 320×180），大幅降低内存占用和编码耗时
实时视频滤镜与边缘检测
摄像头或本地视频流叠加灰度、反色、Sobel 边缘等效果，全程纯前端运行：
立即学习“前端免费学习笔记（深入）”；
- video 元素必须设
autoplay、muted、playsinline（尤其 iOS） - 使用
getImageData()获取像素后，按 RGBA 四字节一组遍历；灰度转换推荐加权公式：0.299 * r + 0.587 * g + 0.114 * b - Sobel 算子计算梯度时，边界像素跳过或补零，阈值建议设为 30–80（视光照强度调整）
绿幕抠像与背景合成
适用于在线虚拟直播、教育互动场景，非专业级但响应快、免部署：
- 需两个 canvas：一个隐藏用于像素分析（videoCanvas），一个显示合成结果（outputCanvas）
- HSV 色域判断比 RGB 更稳定——绿色区域通常满足
h ∈ [45, 75]、s > 30、v > 50（单位：°、%、%） - 合成时手动线性插值：
outR = fgR × fgA + bgR × (1 − fgA)，alpha 归一化到 0–1 再参与计算
