本文由ScriptEcho平台提供技术支持
项目地址：传送门
实时视频物体识别：在浏览器中使用 YOLOv9
应用场景介绍
实时视频物体识别是一种计算机视觉技术，可以实时检测和识别视频流中的物体。该技术广泛应用于各种领域，例如：
- **安全监控：**检测可疑活动或人员。
- **零售：**识别客户并跟踪他们的购物行为。
- **医疗：**辅助诊断和治疗。
- **自动驾驶：**检测障碍物和行人。
代码基本功能介绍
本代码实现了一个实时视频物体识别应用程序，它利用 YOLOv9 模型在浏览器中本地运行。该应用程序具有以下功能：
- **物体检测：**识别视频流中的物体并绘制边界框。
- **物体分类：**识别检测到的物体并显示其类别标签。
- **实时处理：**连续处理视频流并实时显示结果。
- **可定制：**允许用户调整检测阈值和图像大小以优化性能。
功能实现步骤及关键代码分析说明
1. 模型和处理器的加载
const model = await AutoModel.from_pretrained(model_id);
const processor = await AutoProcessor.from_pretrained(model_id);使用 AutoModel 和 AutoProcessor 从 Hugging Face Hub 加载预训练的 YOLOv9 模型和处理器。
2. 用户界面和控件
<div id="controls">
<div>
<label>图片大小</label>
(<label id="size-value">128</label>)
<br />
<input
id="size"
type="range"
min="64"
max="256"
step="32"
value="128"
disabled
/>
</div>
<div>
<label>阈值</label>
(<label id="threshold-value">0.25</label>)
<br />
<input
id="threshold"
type="range"
min="0.01"
max="1"
step="0.01"
value="0.25"
disabled
/>
</div>
</div>此部分创建用户界面，允许用户调整检测阈值和图像大小。
3. 视频流处理
navigator.mediaDevices.getUserMedia(
{ video: true }, // Ask for video
).then((stream) => {
// Set up the video and canvas elements.
video.srcObject = stream;
video.play();使用 navigator.mediaDevices.getUserMedia() 启动视频流，并将其分配给视频元素。
4. 渲染边界框和标签
function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h]) {
if (score < threshold) return; // Skip boxes with low confidence
// Generate a random color for the box
const color = COLOURS[id % COLOURS.length];
// Draw the box
const boxElement = document.createElement('div');
boxElement.className = 'bounding-box';
Object.assign(boxElement.style, {
borderColor: color,
left: 100 * xmin / w + '%',
top: 100 * ymin / h + '%',
width: 100 * (xmax - xmin) / w + '%',
height: 100 * (ymax - ymin) / h + '%',
})
// Draw label
const labelElement = document.createElement('span');
labelElement.textContent = `${model.config.id2label[id]} (${(100 * score).toFixed(2)}%)`;
labelElement.className = 'bounding-box-label';
labelElement.style.backgroundColor = color;
boxElement.appendChild(labelElement);
overlay.appendChild(boxElement);
}此函数根据模型输出绘制边界框和标签。它考虑了检测阈值和图像大小。
5. 实时处理循环
window.requestAnimationFrame(updateCanvas);此代码启动一个实时处理循环，它不断从视频流中读取帧，处理它们并显示结果。
总结与展望
本代码展示了如何在浏览器中使用 YOLOv9 模型实现实时视频物体识别。它提供了可定制的界面，允许用户调整检测参数。
经验与收获：
- 学习了如何使用 Hugging Face Transformers 库加载和使用预训练模型。
- 了解了如何在浏览器中处理视频流。
- 获得了实时物体识别的实际经验。
未来拓展与优化：
- 探索其他物体识别模型，例如 Faster R-CNN 或 Mask R-CNN。
- 集成图像增强技术以提高检测精度。
- 优化代码以提高处理速度。
- 开发一个移动应用程序版本。
更多组件： 
- 获取更多Echos本文由ScriptEcho平台提供技术支持项目地址：传送门
