HTML5本身不提供ShapeDetection API，当前浏览器中的Shape Detection API属Web Platform APIs，仅支持静态图像，不支持视频流处理；视频中移动物体轮廓识别需结合帧差法、Canvas像素处理与TensorFlow.js等模型实现。
HTML5 本身不提供 ShapeDetection API，目前也没有标准化的、原生支持视频中移动物体轮廓识别的 HTML5 特性。所谓“HTML5 中的 ShapeDetection”是一个常见误解——实际并不存在这样的内置接口。
当前浏览器中可用的视觉检测能力
现代浏览器（Chrome 90+、Edge 90+）提供了实验性但已逐步稳定的 Shape Detection API，但它属于 Web Platform APIs 的一部分，并非 HTML5 规范内容，且仅支持静态图像（ImageBitmap 或 HTMLImageElement），不支持直接处理视频帧流或运动目标追踪。
该 API 包含以下检测器：
- BarcodeDetector：识别条形码/二维码
- FaceDetector：检测静态人像中的面部矩形及关键点
- TextDetector：识别图像中文本区域（OCR 前端轻量替代）
- BodySegmentation（尚未标准化，部分实验版本支持）：需依赖 TensorFlow.js 等库实现
实现视频中移动物体轮廓识别的可行路径
要在前端对视频流做移动物体轮廓识别（如人形、车辆、自定义形状），需组合多项技术，核心思路是：逐帧采样 + 帧间差分/背景建模 + 轮廓提取 + 可选的深度模型推理。
立即学习“前端免费学习笔记（深入）”；
推荐方案如下：
-
用
video元素捕获实时流，通过requestVideoFrameCallback（Chrome 110+）或canvas.drawImage()定期抓取帧 -
在 Canvas 中进行像素级处理：转灰度、高斯模糊、阈值化、帧差法（
current - previous）提取运动区域 - 用
cv.findContours()类逻辑（借助 OpenCV.js）或 Canvas 2D API 的getImageData()+ 自研算法提取轮廓多边形 -
进阶需求（如语义分割）需引入轻量模型：例如 TensorFlow.js 的
@tensorflow-models/body-pix（人体）、@tensorflow-models/coco-ssd（通用物体检测），输出边界框或分割掩码，再转换为 SVG 路径或 canvas 绘制轮廓
一个最小可运行示例（运动轮廓粗略提取）
无需第三方模型，纯前端实现基础移动区域轮廓：
<video id="video" autoplay muted></video>
<canvas id="canvas" style="display:none"></canvas>
<canvas id="output" width="640" height="480"></canvas>
<p><script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const outputCanvas = document.getElementById('output');
const outCtx = outputCanvas.getContext('2d');</p><p>let prevFrame = null;</p><p>async function setupCamera() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
}</p><p>function detectMotionContour(frame) {
ctx.drawImage(frame, 0, 0, 640, 480);
const imageData = ctx.getImageData(0, 0, 640, 480);
const data = imageData.data;</p><p>if (!prevFrame) {
prevFrame = new Uint8ClampedArray(data);
return;
}</p><p>const motionMask = new Uint8ClampedArray(data.length / 4);
for (let i = 0; i < data.length; i += 4) {
const r1 = data[i], g1 = data[i+1], b1 = data[i+2];
const r2 = prevFrame[i], g2 = prevFrame[i+1], b2 = prevFrame[i+2];
const diff = Math.abs(r1-r2) + Math.abs(g1-g2) + Math.abs(b1-b2);
motionMask[i/4] = diff > 30 ? 255 : 0; // 阈值可调
}</p><p>// 简单连通域标记（示意，生产环境建议用 OpenCV.js findContours）
// 此处省略复杂轮廓拟合，仅绘制白色运动区域
outCtx.clearRect(0, 0, 640, 480);
outCtx.fillStyle = '#fff';
for (let y = 0; y < 480; y++) {
for (let x = 0; x < 640; x++) {
if (motionMask[y * 640 + x]) {
outCtx.fillRect(x, y, 1, 1);
}
}
}</p><p>// 更新上一帧
prevFrame.set(data);
}</p><p>video.addEventListener('play', () => {
const loop = () => {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
detectMotionContour(video);
}
requestAnimationFrame(loop);
};
loop();
});</p><p>setupCamera();
</script></p>注意事项与限制
该类方案存在明显约束：
- 纯客户端计算对性能敏感，高分辨率/高帧率易卡顿，建议降采样至 640×480 或更低
- 帧差法对光照变化、缓慢运动、重复纹理鲁棒性差；复杂场景需结合光流法或 AI 模型
- 浏览器不支持直接访问 GPU 加速的底层图像处理（如 WebGPU 形状检测仍在提案阶段）
- 隐私与权限：使用摄像头需用户明确授权，且
canvas污染后无法导出图像（跨域限制）
