Gradio全解20——Streaming：流式传输的多媒体应用（5）——基于WebRTC的摄像头实时目标检测

Gradio全解20------Streaming：流式传输的多媒体应用（5）------基于WebRTC的摄像头实时目标检测

• 本篇摘要
• [20. Streaming：流式传输的多媒体应用](#20. Streaming：流式传输的多媒体应用)
• • [20.5 基于WebRTC的摄像头实时目标检测](#20.5 基于WebRTC的摄像头实时目标检测)
  • • [20.5.1 环境配置及说明](#20.5.1 环境配置及说明)
    • • [1. WebRTC](#1. WebRTC)
      • [2. TURN服务器](#2. TURN服务器)
    • [20.5.2 推理函数实现](#20.5.2 推理函数实现)
    • • [1. 推理模型：YOLOv10](#1. 推理模型：YOLOv10)
      • [2. 推理代码](#2. 推理代码)
    • [20.5.3 Gradio演示实现](#20.5.3 Gradio演示实现)
    • [20.5.4 部署与扩展](#20.5.4 部署与扩展)
  • 参考文献：

本章目录如下：

1. 《Gradio全解20------Streaming：流式传输的多媒体应用（1）------流式传输音频：魔力8号球》；
2. 《Gradio全解20------Streaming：流式传输的多媒体应用（2）------构建对话式聊天机器人》；
3. 《Gradio全解20------Streaming：流式传输的多媒体应用（3）------实时语音识别技术》；
4. 《Gradio全解20------Streaming：流式传输的多媒体应用（4）------基于Groq的带自动语音检测功能的多模态Gradio应用》；
5. 《Gradio全解20------Streaming：流式传输的多媒体应用（5）------基于WebRTC的摄像头实时目标检测》；
6. 《Gradio全解20------Streaming：流式传输的多媒体应用（6）------构建视频流目标检测系统》。

本篇摘要

本章讲述流式传输的应用，包括音频、图像和视频格式的流式传输。

20. Streaming：流式传输的多媒体应用

本章讲述流式传输的应用，包括音频、图像和视频格式的流式传输。音频应用包括流式传输音频、构建音频对话式聊天机器人、实时语音识别技术和自动语音检测功能；图像应用包括基于WebRTC的摄像头实时目标检测；视频应用包括构建视频流目标检测系统。

20.5 基于WebRTC的摄像头实时目标检测

本指南将使用YOLOv10模型，结合Gradio 5.0的最新流式传输功能，实现用户摄像头画面的实时目标检测，最终效果演示如下：

20.5.1 环境配置及说明

首先安装所有依赖项。将以下内容添加到requirements.txt文件，并运行命令：pip install -r requirements.txt：

opencv-python
twilio
gradio>=5.0
gradio-webrtc
onnxruntime-gpu

我们将使用ONNX运行时来加速YOLOv10的推理。本文默认GPU可用，如果没有GPU，请将onnxruntime-gpu更改为onnxruntime，没有GPU的情况下，模型运行会较慢，导致演示体验出现延迟。

1. WebRTC

我们将使用OpenCV进行图像处理，并通过Gradio WebRTC自定义组件在底层使用WebRTC，实现近乎零延迟。WebRTC（网页实时通信）是一项支持网页应用及站点直接捕获、选择性流式传输音视频媒体、并在浏览器间无需中介而实现交换任意数据的技术。该技术标准集使数据共享与点对点远程会议成为可能，且用户无需安装插件或第三方软件。

借助WebRTC，我们可以为应用添加基于开放标准运行的实时通信功能。它支持在对等设备之间发送视频、语音和通用数据，使开发者能够构建强大的语音和视频通信解决方案，并且适用于所有现代浏览器以及所有主要平台的原生客户端。WebRTC采用的技术是开放网络标准，以常规JavaScript API的形式在所有主流浏览器中提供。关于WebRTC更多信息请参考：WebRTC API。

2. TURN服务器

如果我们想在任何云提供商上部署此应用程序，则需要使用Twilio的免费API来获取他们的TURN服务器。那么什么是TURN服务器，Twillio如何计费呢？

1. 什么是STUN、TURN和ICE？
   STUN、TURN和ICE是IETF（The Internet Engineering Task Force：国际互联网工程任务组）制定的标准协议组，用于在建立点对点通信会话时穿透NAT。具体作用如下：

• 当主机位于NAT防火墙后方时，可通过NAT会话穿透工具（STUN）发现其公网IP地址。若该主机需接收对端连接，会将此公网IP地址作为可连接地址提供。若NAT防火墙仍阻止主机直连，双方则连接至NAT中继穿透服务器（TURN），通过该服务器中转媒体流；
• WebRTC及其他VoIP技术栈通过支持ICE协议来提升IP通信的可靠性；交互式连接建立（ICE）是协调STUN与TURN实现主机间连接的综合性标准。

2. Twilio的作用及如何计费？
   Twilio网络穿透服务为兼容ICE的客户端（如支持WebRTC标准的浏览器）提供STUN和TURN服务。Twilio根据TURN服务器转发的数据量进行计费。TURN客户端需在TURN服务器上分配中继地址（即TURN会话），计费数据量为该会话中客户端发送与接收字节数之和。费用将计入创建该会话的TURN客户端关联的Twilio账户SID，按中转数据总量（以兆字节为单位）核算。请注意，不同Twilio区域适用不同费率标准。

关于TURN服务器更多信息请参考：Network Traversal Service。

20.5.2 推理函数实现

我们将从Hugging Face Hub下载YOLOv10模型，并实例化一个自定义推理类来使用该模型。本文不包含推理类的具体实现细节，但我们可以在下面链接查看完整源代码：freddyaboulton/webrtc-yolov10n，该实现主要参考了下面这个GitHub仓库：ibaiGorordo/ONNX-YOLOv8-Object-Detection 。

1. 推理模型：YOLOv10

近年来，YOLO系列因其在计算成本与检测性能之间的有效平衡，已成为实时目标检测领域的主导技术。研究者们针对YOLO的架构设计、优化目标、数据增强策略等方面进行了深入探索，取得了显著进展。然而，依赖非极大值抑制（NMS）的后处理方式阻碍了YOLO的端到端部署，并对推理延迟产生负面影响。此外，YOLO各组件设计缺乏全面深入的考量，导致明显的计算冗余并限制了模型能力，使得其效率欠佳而存在较大性能提升空间。

在YOLOv10中，旨在从后处理和模型架构两方面共同推进YOLO系列的性能-效率边界。为此，YOLOv10首先提出用于NMS-free训练的一致性双重分配策略，在保持高性能同时显著降低推理延迟；其次，引入面向YOLO的效率-精度全方位驱动模型的设计策略，从效率与精度两个维度系统优化YOLO的各个组件，大幅降低计算开销并提升模型能力。

这些技术共同构建了新一代实时端到端目标检测YOLO系列------YOLOv10。大量实验表明，YOLOv10在不同模型规模下均实现了最优的性能与效率表现，例如：

• 在COCO数据集相近AP（Accurate Performance）指标下，YOLOv10-S比RT-DETR-R18快1.8倍，且参数量与FLOPs减少2.8倍；
• 与YOLOv9-C相比，YOLOv10-B在同等性能下延迟降低46%，参数量减少25%。

YOLOv10的更多信息请参阅：YOLOv10: Real-Time End-to-End Object Detection。

截至发文前，YOLO系列的最新进展是YOLOE(ye)：实时全场景视觉系统，它是一个高效、统一且开放的目标检测与分割模型，能够像人眼一样实时感知任何物体。该模型支持多种提示机制（包括文本提示、视觉输入提示以及无提示范式），且完全开源，与封闭式YOLO模型相比，其具有零推理开销和零迁移开销的特性。YOLOE更多信息请参阅YOLOE: Real-Time Seeing Anything。

2. 推理代码

我们选择使用yolov10-n变体，因为它具有最低的延迟特性，具体性能数据可以参考YOLOv10 GitHub仓库README中的性能章节。也可以选择最新的yoloe，代码实现如下：

from huggingface_hub import hf_hub_download
# yolov10
from inference import YOLOv10

model_file = hf_hub_download(
    repo_id="onnx-community/yolov10n", filename="onnx/model.onnx"
)
model = YOLOv10(model_file)
# yoloe
from ultralytics import YOLOE

def init_model(model_id, is_pf=False):
    # model_id:"yoloe-v8s"(default),"yoloe-v8m","yoloe-v8l","yoloe-11s","yoloe-11m", "yoloe-11l"
    filename = f"{model_id}-seg.pt" if not is_pf else f"{model_id}-seg-pf.pt"
    path = hf_hub_download(repo_id="jameslahm/yoloe", filename=filename)
    model = YOLOE(path)
    return model
model = init_model("yoloe-v8s")

def detection(image, conf_threshold=0.3):
    image = cv2.resize(image, (model.input_width, model.input_height))
    # yolo10
    new_image = model.detect_objects(image, conf_threshold)
    # yoloe
    # new_image = model.predict(source=image, conf=conf_threshold)
    return new_image

我们的推理函数detection接受来自网络摄像头的numpy数组和一个期望的置信度阈值，像YOLO这样的目标检测模型会识别多个目标，并为每个目标分配一个置信度分数。置信度越低，出现误检的可能性越高，因此允许用户根据自身需要调整置信度阈值。该函数返回一个numpy数组，对应于输入图像，并在所有检测到的目标上绘制了边界框。

20.5.3 Gradio演示实现

Gradio演示很简单，主要实现以下几个特定功能：

1. 使用WebRTC自定义组件，确保输入和输出通过WebRTC与服务器进行发送/接收，WebRTC组件将同时作为输入和输出组件；
2. 利用stream事件的time_limit参数，该参数为每个用户的流设置处理时间。在多用户环境中，例如在Spaces上，我们将在此时间段后停止处理当前用户的流，并转向下一个用户；
3. 应用自定义CSS，使页面上的网络摄像头WebRTC和滑块Slider居中显示。

示例代码如下：

import gradio as gr
from gradio_webrtc import WebRTC
from twilio.rest import Client
import os

css = """.my-group {max-width: 600px !important; max-height: 600px !important;}
         .my-column {display: flex !important; justify-content: center !important; align-items: center !important;}"""
account_sid = os.environ.get("TWILIO_ACCOUNT_SID")
auth_token = os.environ.get("TWILIO_AUTH_TOKEN")
if account_sid and auth_token:
    client = Client(account_sid, auth_token)
    token = client.tokens.create()
    rtc_configuration = {
        "iceServers": token.ice_servers,
        "iceTransportPolicy": "relay",
    }
else:
    rtc_configuration = None
    
with gr.Blocks(css=css) as demo:
    gr.HTML(
        """
        <h1 style='text-align: center'>
        YOLOv10 Webcam Stream (Powered by WebRTC ⚡️)
        </h1>
        """
    )
    with gr.Column(elem_classes=["my-column"]):
        with gr.Group(elem_classes=["my-group"]):
            image = WebRTC(label="Stream", rtc_configuration=rtc_configuration)
            conf_threshold = gr.Slider(
                label="Confidence Threshold",
                minimum=0.0,
                maximum=1.0,
                step=0.05,
                value=0.30,
            )
        image.stream(
            fn=detection, inputs=[image, conf_threshold], outputs=[image], time_limit=10
        )

if __name__ == "__main__":
    demo.launch()

20.5.4 部署与扩展

该应用已部署在Hugging Face Spaces上，地址：freddyaboulton/webrtc-yolov10n，我们可以将它作为开发实时图像应用的起点。

如遇任何问题或有疑问，可以在Space页面提交issue或在WebRTC组件的GitHub仓库提出问题。

参考文献：

1. Streaming AI Generated Audio
2. Run Inference on servers
3. Spaces ZeroGPU: Dynamic GPU Allocation for Spaces