浏览器实时播放摄像头数据并通过 Yolo 进行图像识别

安装 Ultralytics 之后，可以直接通过本地获取摄像头数据流，并通过 Yolo 模型实时进行识别。大多情况下，安装本地程序成本比较高，需要编译打包等等操作，如果可以直接通过浏览器显示视频，并实时显示识别到的对象类型就会方便很多。本文将通过 JS 原生代码 + 后台 Yolo 识别服务实现浏览器实时显示并识别对象类型的效果。

后发服务

后台服务采用 Python Flask 框架实现图片识别的 Rest API，开发之前，首先安装 Ultralytics 环境，我们使用官方的 DockerImage，用官方镜像作为基础镜像，安装相关依赖。

Dockerfile

# Use the ultralytics/ultralytics image as the base
FROM ultralytics/ultralytics:latest

# Update package lists and install vim
RUN apt-get update && apt-get install -y vim

# Install Flask using pip
RUN pip install flask flask-cors

# Set the working directory
WORKDIR /app

# Copy the current directory contents into the container at /app
COPY . /app

# Expose port 5000 for Flask
EXPOSE 5000

# Command to run the Flask application

App.py
后台 Rest API，/detect，解析 base64 图片，并返回识别到的图片分类和位置信息。

import os
from flask import Flask, request, jsonify
from ultralytics import YOLO
import cv2
import numpy as np

# Initialize Flask app
app = Flask(__name__)

# Load YOLOv8 model
model = YOLO('yolov8n.pt')  # You can change 'yolov8n.pt' to other versions like 'yolov8m.pt' or 'yolov8x.pt'

# Function to perform object detection
def detect_objects(image):
    results = model(image)
    detections = []
    for result in results:
        for box in result.boxes:
            x1, y1, x2, y2 = map(int, box.xyxy)
            class_id = int(box.cls)
            confidence = box.conf
            detections.append({
                'class_id': class_id,
                'label': model.names[class_id],
                'confidence': float(confidence),