新闻详情

新闻详情

首页 / 资讯中心 / 详情

基于 Plotly Dash + WebRTC + TensorRT 的实时推理可视化仪表盘:jetson-inference 的 webrtc-dash 实战指南

发布时间:2026/9/25 12:37:38来源:尧图网络
基于 Plotly Dash + WebRTC + TensorRT 的实时推理可视化仪表盘:jetson-inference 的 webrtc-dash 实战指南
人工智能计算机视觉深度学习微调【免费下载链接】jetson-inferenceHello AI World guide to deploying deep-learning inference networks and deep vision primitives with TensorRT and NVIDIA Jetson.项目地址https://gitcode.com/gh_mirrors/je/jetson-inference点击查看免费下载本篇技术指南以 jetson-inference 仓库中的 webrtc-dash 文档 为主体系统讲解如何用 Python 的 Plotly Dash 框架把 WebRTC 实时视频流、TensorRT DNN 推理、事件日志与可插拔动作Action插件整合成一个可动态配置的数据驱动仪表盘。读完本文你将掌握该示例的启动方式、模型加载与视频流配置流程并能基于仓库内置的 Action/EventFilter 基类自行编写带运行时可调属性的动作插件把检测到目标 → 触发响应的闭环落地到自己的应用里。概览Plotly Dash 在 Jetson 推理链路中的角色Plotly Dash 是一个基于 Python 的 Web 框架专门用于构建数据驱动的仪表盘和交互式界面。其前端基于 React.js把界面状态变化连接到运行在服务器端的 Python 回调函数因此可以快速开发出与后端处理管线、数据分析深度集成的富可视化应用。在 jetson-inference 的示例中位于 python/www/dash用户可以在网页上动态创建视频流Streams、加载 DNN 模型Models、实时查看事件Events并配置由事件触发的可扩展动作Actions。整条链路与仓库其他 WebApp 示例如 webrtc-flask.md、webrtc-recognizer.md一脉相承底层同样使用WebRTC传输实时视频、使用TensorRT执行推理。需要说明的是文档中明确标注该示例目前仍是一个概念验证proof-of-concept性质的在开发样本。项目目录结构从源码布局可以清晰看出前后端分层设计源码见 python/www/dash目录/文件职责app.pyDash 前端 Web 服务器入口webserveractions/动作插件目录如 alert.py启动时自动加载assets/CSS/JavaScript/图片等前端静态资源含 webrtc.jslayout/UI 组件导航栏、弹窗、视频播放器、事件表格/时间线等server/后端流媒体/处理服务Server、Model、Stream、Event、Action、EventFilterconfig.py默认配置定义首次运行时写入data/config.jsonrequirements.txtPython 依赖清单其中server包对外统一导出Server、Stream、Action、EventFilter、Event、Model六个类见 server/init.py这也是编写动作插件时的核心 API 面。运行示例启动仪表盘安装依赖并启动在 Jetson 设备上进入示例目录安装 Python 依赖后即可启动$ cd jetson-inference/python/www/dash $ pip3 install -r requirements.txt $ python3 app.py --detectionssd-mobilenet-v2 --poseresnet18-hand --actionresnet18-kinetics依赖清单见 requirements.txt包含dash、dash_auth、dash_bootstrap_components、dash_bootstrap_templates、dash-draggable、psutil、setproctitle、mergedeep、requests等。其中dash-draggable提供面板拖拽能力mergedeep用于配置文件的深度合并。启动后浏览器访问https://JETSON-IP:8050即可进入配置界面。8050 是默认端口可通过--portN命令行参数修改。note强烈建议在运行时启用 HTTPS/SSL。原因有两个一是保证 WebRTC 流与网页传输的加密安全二是浏览器只有在 HTTPS 下才允许调用客户端摄像头/麦克风权限。命令行参数与配置优先级从 app.py 的 argparse 定义可以看出webserver 支持以下参数参数默认值说明--host0.0.0.0全部接口前端 Web 服务器绑定的网卡--port8050前端 Web 服务器端口--ssl-key$SSL_KEY环境变量PEM 编码的 SSL/TLS 私钥路径用于启用 HTTPS--ssl-cert$SSL_CERT环境变量PEM 编码的 SSL/TLS 证书路径用于启用 HTTPS--resources无初始化后端资源模型/流所用的 JSON 配置文件路径此外 config.py 明确了整体配置的优先级从低到高为硬编码默认值 →data/config.json配置文件 → 环境变量$DASH_CONFIG_FILE、$SSL_CERT、$SSL_KEY、$STUN_SERVER→ 命令行参数。配置文件会在首次运行时由 load_config() 自动写入默认值后续可编辑data/config.json修改{ dash: { title: Hello AI World, host: 0.0.0.0, port: 8050, refresh: 2500, users: {} }, server: { name: server-backend, host: 0.0.0.0, rest_port: 49565, webrtc_port: 8554, ssl_cert: null, ssl_key: null, stun_server: null } }dash.refresh前端每 2500ms 向后端轮询一次服务器状态用于刷新导航结构见 app.py 的on_refresh回调它会调用Server.request(/resources)对比前后配置若未变化则通过PreventUpdate跳过更新。dash.users填入username: password键值对即可启用 Dash 的 HTTP Basic Auth 登录鉴权app.py。server.rest_port后端 JSON REST API 端口49565。server.webrtc_portWebRTC 服务器端口8554。server.stun_server覆盖默认的 WebRTC STUN 服务器默认stun.l.google.com:19302。前后端分离的进程架构app.py启动时除了运行 Dash Web 服务器还会通过Server(**config[server]).start()启动一个独立的后端进程见 server.py。这与仓库早期示例把流媒体跑在 webserver 同一进程的线程里的关键区别在于后端进程负责 WebRTC 采集/传输、TensorRT 推理以及事件/动作触发二者通过REST JSON 消息共享元数据视频数据始终留在流媒体进程中。这种独立进程的设计使得webserver 可以运行多个 worker 进行负载均衡例如部署到 Gunicorn 或其他生产级 WSGI 服务器。当以import app方式被 Gunicorn 加载时app.py 走else分支改为Server(**config[server]).connect()——先尝试连接已存在的后端进程若不存在则自动拉起见 server.py 的connect()重试逻辑。后端进程是daemonTrue的 multiprocessing 子进程父进程退出时它会自动退出server.py。后端Server内部用 Flask 搭建了一个精简 REST 服务server.py暴露的路由包括/status、/resources、/events、/streamsGET/POST、/modelsGET/POST、/actions、/actions/types、/actions/idGET/PUT。前端仪表盘的加载模型、增删流、启停动作等操作最终都通过 Server.request() 封装成的 REST 请求打到这些路由上。加载 DNN 模型进入仪表盘后第一件事通常是打开Models - Load Model菜单加载模型。目前支持加载预训练的分类与检测模型也支持导入自定义训练的 ONNX 模型。选中模型并确认后主页面底部会出现状态消息。加载通常耗时 5-10 秒如果某模型是首次加载TensorRT 可能还要花几分钟生成网络引擎TensorRT engine。为避免这种延迟建议先用仓库的imagenet.py/detectnet.py程序预加载一次该模型再运行本 WebApp。从源码看server/model.py 的Model类在type classification时构造imageNet可设置threshold置信度阈值与smoothing平滑参数在type detection时构造detectNetoutput_layers必须是包含scores与bbox键的 dict还可通过tracking参数启用目标跟踪。若类型不在两者之列会抛出invalid model type错误。导入自定义 ONNX 模型如果你用 Hello AI World 教程如 pytorch-cat-dog.md 的train.py或 pytorch-collect-detection.md 的train_ssd.py训练了自己的分类/检测模型可以在对话框中切到Import标签页填写模型信息模型文件需要已存在于服务器上你只需按使用imagenet.py/detectnet.py时的惯例填写输入/输出层名分类模型参见 pytorch-cat-dog.md 的Processing Images with TensorRT一节检测模型参见 pytorch-ssd.md 的对应小节。这些层名会作为input_layers/output_layers传入 Model.init()进而映射为imageNet(input_blob..., output_blob...)或detectNet(input_blob..., output_cvg..., output_bbox...)的 TensorRT 引擎输入输出 blob。创建视频流通过Streams - Add Stream菜单可以指定要推送的视频源以及要套用到该流上的 DNN 模型各类摄像头与视频设备的连接语法参见 Camera Streaming and Multimedia 文档涵盖 V4L2 摄像头、MIPI CSI、RTP/RTSP 等。注意当前示例尚不支持从浏览器网页摄像头browser webcams接收 WebRTC 输入但文档说明这一能力已在计划中。添加流之后从Streams菜单选中它即可打开对应的视频播放器面板小部件支持拖拽、缩放与折叠。从源码看server/stream.py 的Stream类用videoSource(source)打开输入用videoOutput(fwebrtc://:{server.webrtc_port}{name})建立 WebRTC 输出并在启用了 SSL 证书时自动附加--ssl-cert/--ssl-key参数同时强制--input-codecmjpeg与--output-encodercpu。每个流会克隆Model.clone(streamself)已加载模型中指定的若干模型每帧处理流程见 process()source.Capture()→ 每个模型model.process(img)→model.visualize(img)→output.Render(img)。事件系统DNN 输出变化的实时记录当某个 DNN 的输出发生变化时——例如分类结果改变或检测到新目标——系统会记录一个事件Event。打开Events菜单下的 Events Table 即可实时监控这些事件表格支持按列过滤与排序还可以在 Event Timeline 中可视化事件时间线图中y 轴表示置信度得分confidence scorex 轴表示时间每个目标类别对应一条独立的 trace。快速制作这类动态图表与表格正是 Plotly Dash 的强项你也可以在自建应用时继续扩展。Event 对象与产生机制事件对象定义在 server/event.py其核心字段包括属性含义id全局自增事件编号stream/model产生事件所属的流与模型classID/label目标类别 ID 与标签名score/maxScore当前得分 / 历史最高得分begin/end事件起始 / 最近更新时间戳frames事件持续的帧数scores(时间, 得分)序列供时间线绘制事件的产生逻辑在 server/model.py 的Model.process()中分类模型每次Classify(img)后若最高置信度的类别 ID 发生变化就创建新Event调用Event(...)其构造器会把事件追加到服务器列表并立即dispatch()若类别未变则调用last_event.update(score)更新现有事件追加得分点、累加帧数。而Event.dispatch()server/event.py会遍历所有已启用的 action逐个调用其on_event(self)回调——这就是事件驱动动作插件的核心枢纽。Actions事件驱动的可插拔动作插件Actions 是过滤事件并触发用户自定义代码的插件典型用途包括发送告警/通知、播放声音、产生物理响应等。动作的属性会通过 Web UI 暴露出来从而可以在运行时动态配置在项目的 actions/ 目录下添加你自己的动作类型后应用会在启动时自动加载这些模块并在 UI 中列出加载机制见 server.py 的load_actions()它遍历actions/下所有.py文件用importlib动态导入并通过inspect找出所有继承Action的子类及其property属性。用户可以创建同一动作类型的多个实例每个实例拥有相互独立的设置。编写第一个动作插件下面是文档给出的动作模板——一个简单的日志动作把检测到person且置信度超过 0.5 的事件打印到服务器终端from server import Action class MyAction(Action): def __init__(self): super().__init__() def on_event(self, event): if event.label person and event.score 0.5: print(Detected a person!) # do something动作插件应实现on_event()回调它接收系统中所有新建与更新的事件插件随后按领域相关标准过滤事件再触发某种响应。可访问的事件属性参见 Event 类。这段代码运行在后端流媒体进程中可以直接接触底层数据流且不会影响推理性能因为动作分发是在事件层完成的不阻塞采集/推理主循环的传输路径。Filters内置的事件过滤能力动作既可以实现自定义过滤逻辑也可以继承 EventFilter 混入类后者实现了默认过滤功能——如类别标签、最低置信度、最少持续帧数等——通过filter()函数调用。仓库自带的 BrowserAlert 插件就用了这套机制先过滤再检查/设置alert_triggered属性防止同一事件重复触发多次告警from server import Server, Action, EventFilter class BrowserAlert(Action, EventFilter): Action that triggers browser alerts and supports event filtering. def __init__(self): super(BrowserAlert, self).__init__() def on_event(self, event): if self.filter(event) and not hasattr(event, alert_triggered): Server.alert(fDetected {event.label} ({event.maxScore * 100:.1f}%)) event.alert_triggered TrueEventFilter.filter()的判定逻辑filter.py有标签列表且事件标签不在其中 → 不通过min_frames设了且event.frames min_frames→ 不通过min_score设了且event.maxScore min_score→ 不通过。Server.alert(text, level, duration)server.py会把提示文本追加到服务器告警队列由前端轮询展示。文档还提示在更高级的场景中你可能希望在事件其他方面发生变化时重新触发动作例如置信度显著偏离、或检测持续超过某段时间。Properties把插件属性暴露到 Web UI带property装饰器的插件属性会被自动暴露到 UI用户可在运行时动态修改。客户端/服务器之间的通信通过 REST JSON 查询透明完成。以 EventFilter 中的属性为例property def labels(self) - str: return ;.join(self._labels) labels.setter def labels(self, labels): self._labels [label.strip() for label in labels.split(;)] property def min_frames(self) - int: return self._min_frames min_frames.setter def min_frames(self, min_frames): self._min_frames int(min_frames) property def min_score(self) - float: return self._min_score min_score.setter def min_score(self, min_score): self._min_score float(min_score)关键约定getter 函数上标注的Python 类型提示type hints会告知前端该用哪种 UI 控件文本框、滑块、复选框等。目前支持的类型为str、int、float与bool。若省略类型提示则默认按字符串处理、显示文本框输入由你的插件自行负责解析/转换成目标类型。后端在load_actions()中正是通过inspect.signature(prop_obj.fget).return_annotation提取这些类型注解并在 Action.to_dict() 序列化时连同当前值、可变性mutable一起下发前端的。运行与部署建议HTTPS/SSL如前所述务必按 webrtc-server.md 的 Enabling HTTPS / SSL 一节生成自签名证书并设置$SSL_KEY/$SSL_CERT环境变量或使用--ssl-key/--ssl-cert参数。证书可存放在任意位置若使用 Docker 容器则建议放在/jetson-inference/data下因为它会被挂载到宿主机、退出容器后依然保留。首次访问使用自签名证书的页面时浏览器会弹出不受信任警告属正常现象。生产部署得益于前后端分离设计可以借助 Gunicorn 等多 worker WSGI 服务器加载本应用app.py的非__main__分支会自动connect()到后端进程实现协同。状态持久化data/config.json保存了仪表盘与后端的全部配置首次运行由 config.py 自动生成REST 层的/models、/streams路由也支持以 JSON 预载资源--resources参数 /$DASH_CONFIG_FILE。总结webrtc-dash 展示了 jetson-inference 生态中Web 前端交互 后端流式推理的一种进阶形态前端用 Plotly Dash 提供模型管理、流管理、事件可视化与动作配置的整套交互 UI后端用独立进程承载 WebRTC 采集/编码与 TensorRT 推理二者以 REST JSON 解耦。对于想构建自定义可视化推理应用的开发者本文梳理的四个核心扩展点最具复用价值——Model/Stream 的资源化抽象、Event 事件模型、Action EventFilter 插件机制以及property 类型提示驱动 UI 控件生成的约定。你可以参照 actions/alert.py 与 server/filter.py 的现成实现快速迭代出自己的事件驱动应用。赞分享人工智能计算机视觉深度学习微调【免费下载链接】jetson-inferenceHello AI World guide to deploying deep-learning inference networks and deep vision primitives with TensorRT and NVIDIA Jetson.项目地址https://gitcode.com/gh_mirrors/je/jetson-inference点击查看免费下载相关推荐终极指南如何在Windows上免费获得B站最佳观看体验终极指南如何在Windows上免费获得B站最佳观看体验 还在为Windows上观看B站视频卡顿、浏览器占用资源过高而烦恼吗BiliBili UWP客户端为你桌面应用音视频视频Jetson-inference项目中WebRTC在无互联网环境下的解决方案Jetson inference项目中WebRTC在无互联网环境下的解决方案 背景介绍 在基于NVIDIA Jetson平台的jetson inference项人工智能计算机视觉深度学习微调Fleet Flask Plotly/Dash用 REST API 构建自定义主机状态可视化仪表盘Fleet Flask Plotly/Dash用 REST API 构建自定义主机状态可视化仪表盘 本文介绍如何跳出 Fleet 自带的 Web UI后端前端企业应用运维网络安全上一篇mcp-agent 意图分类Intent Classification工作流实战从本地示例到云端部署下一篇终极免费字体解决方案如何用Montserrat开源字体提升你的设计品质创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Fission 有状态函数实战:StateConfig 键控状态 API 与 HRW 粘性路由全解析 2026/9/25 14:05:23

Fission 有状态函数实战:StateConfig 键控状态 API 与 HRW 粘性路由全解析

云原生后端 【免费下载链接】fission Fast and Simple Serverless Functions for Kubernetes 项目地址: https://gitcode.com/gh_mirrors/fi/fission 点击查看 免费下载 本文基于 RFC-0023: Stateful functions — keyed state API and sticky routing 编写&#x…

阅读更多 →
大模型算法之后,为什么产品经理成了最热门的岗位?TaoToken视角下的AI产品经理NPDP能力拆解 2026/9/25 14:05:10

大模型算法之后,为什么产品经理成了最热门的岗位?TaoToken视角下的AI产品经理NPDP能力拆解

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
TVA具身智能运行机理(44):适配国产NPU核心技巧解析 2026/9/25 14:04:58

TVA具身智能运行机理(44):适配国产NPU核心技巧解析

前沿技术探索:TVA智能体(简称TVA)TVA智能体(亦称“AI智能体视觉”)是依托Transformer架构与“因式智能体”理论构建的新型工业视觉系统,也是当前最具代表性的具身视觉技术之一。它有机融合深度强化学习&…

阅读更多 →
黄白助手 第 059 个开关:启用随机尾巴来源的位置、验证方法与风险边界 2026/9/25 14:04:51

黄白助手 第 059 个开关:启用随机尾巴来源的位置、验证方法与风险边界

🔥 个人主页: 杨利杰YJlio ❄️ 个人专栏: 《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》 《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》 《超简单:用Python让Excel飞起来》…

阅读更多 →
自从用上Claude Code后,敲代码真的好简单:TaoToken统一Key接入与settings.json配置实战 2026/9/25 14:04:45

自从用上Claude Code后,敲代码真的好简单:TaoToken统一Key接入与settings.json配置实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Codex 重置次数查询 Skill:把过期时间写进 config.toml 骨架 2026/9/25 14:04:38

Codex 重置次数查询 Skill:把过期时间写进 config.toml 骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉