如何实现低延迟WebRTC视频流与WebSocket状态驱动的大屏可视化？

Vue3 ：封装 WebRTC 低延迟视频流与 WebSocket 实时状态驱动的大屏可视化 在工业互联网和智慧安防领域，实时监控大屏是核心业务场景之一。本文将分享在最近的“油罐车作业智能监控系统”中，如何利用 Vue3 + TypeScript 技术栈，实现低延迟的 WebRTC 视频流播放，以及基于 WebSocket 的全链路作业状态实时同步。 一、 业务背景与要求 我们公司需要开发一个监控大屏，实时展示油罐车在卸油作业过程中的监控画面，并同步显示 AI 识别出的作业状态（如：是否佩戴安全帽、是否连接静电球、卸油操作步骤等）,原本是打算采用 videojs 来实现视频播放，但是在开发中发现，videojs 的延迟较高（3-10 秒），无法满足实时风控需求，后来使用了别的一些视频播放库，如 hls.js、flv.js 等，但是这些库的延迟也较高（1-3 秒），无法达到业主要求，最后去了解了下直播用的啥插件，尝试了了下 webRtc 效果还不错。 什么是 WebRTC？ WebRTC (Web Real-Time Communication)是一项开源技术，旨在让浏览器和移动应用通过简单的 API 实现实时音视频通信和数据传输，而无需安装任何插件。它由 Google、Mozilla、Opera 等巨头推动，已成为 W3C 和 IETF 的国际标准。 WebRTC 的核心在于点对点 (P2P)通信能力。不同于传统的流媒体技术（如 HLS、RTMP）通常需要经过服务器中转和缓存，WebRTC 允许两个客户端直接建立连接，从而极大地降低了延迟。 核心用法： 信令交换 (Signaling)：虽然 WebRTC 是 P2P 的，但在建立连接前，双方需要通过一个“中间人”（信令服务器，通常使用 WebSocket，用普通的 http 请求也可以）来交换元数据。 SDP (Session Description Protocol)：交换媒体能力信息（如编码格式、分辨率）。双方通过 Offer 和 Answer 模式进行协商。 ICE (Interactive Connectivity Establishment)：交换网络地址候选者 (ICE Candidates)，用于穿越 NAT/防火墙建立连接。 建立连接：通过 RTCPeerConnection API 建立 P2P 通道。 媒体流传输：连接建立后，音视频流直接在两端传输，延迟通常控制在 500ms 以内。 关于 webRtc 信令交换原理，和更多用途，可参考管网(https://webrtc.org.cn/)。 技术优势： 低延迟：WebRTC 基于 P2P 通信，延迟通常在 500ms 以内，满足实时监控需求。 跨平台：支持所有现代浏览器（如 Chrome、Firefox、Safari）和移动应用（如 Android、iOS）。 无需插件：无需安装任何插件，直接在浏览器中运行。 安全：所有通信均在 HTTPS 环境下进行，确保数据隐私。 二、 WebRTC 播放器的优雅封装 为了复用逻辑并隔离底层复杂度，我封装了一个 WebRTCPlayer 类，专门负责与信令服务器交互和流媒体渲染。 1. 核心类设计 (WebRTCPlayer.ts) 我用 WebSocket 作为信令通道，设计了一套信令交互协议。