18、HTML5 媒体处理与音频 API 技术解析

HTML5 媒体处理与音频 API 技术解析

1. Web Workers 在视频处理中的应用

在网页浏览器中实时处理视频时，Web Workers 可承担部分繁重的处理任务。下面分析其在不同视频处理场景中的应用。

1.1 性能对比

通过对比有无 Web Workers 的实现，来查看不同浏览器中算法的性能。以下是运动分割时，有无 Web Workers 的浏览器性能对比表：
| 浏览器 | 无 Web Workers | 有 Web Workers |
| ---- | ---- | ---- |
| Firefox | 36 | 22 |
| Safari | 35 | 29 |
| Chrome | 62 | 50 |
| Opera | 76 | 70 |

从表中可以看出，Safari 和 Opera 中 Web Worker 处理的帧数与单线程处理的帧数差异最小。Firefox 中 Web Worker 运行较慢，处理的帧数较少。使用 Web Workers 可减轻 Firefox 和 Chrome 主线程的压力，使视频播放更流畅，但 Opera 仍存在视频播放卡顿的问题，这是因为它在 Web Workers 上未使用适当的线程处理。

1.2 人脸检测

人脸检测通常基于肤色检测和肤色形成形状的分析。这里采用简单的肤色检测方法，即识别肤色区域。

肤色检测一般基于归一化 RGB 颜色，使用如下条件：

base = R + G + B
r =