基于Transformers.js的实时视频物体识别

db3ba1b36e58fe7827f78095bbcbd9b1.png

本文由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平台提供技术支持

项目地址：传送门

最后编辑于：2024.05.23 18:26:05