当前位置：首页 > news >正文

保姆级教程：用Vue3+webrtc-streamer搞定海康/大华监控的Web实时播放（附完整代码）

news 2026/5/23 14:29:06

Vue3与WebRTC-streamer实战：企业级监控视频流集成指南

监控系统在现代企业管理中扮演着重要角色，而将监控视频无缝集成到Web应用中已成为许多开发者的刚需。本文将带你从零开始，使用Vue3和webrtc-streamer实现海康、大华等主流监控设备的实时播放功能，并提供可直接用于生产环境的完整解决方案。

1. 技术选型与架构设计

在开始编码前，我们需要理解整个技术栈的工作原理。WebRTC-streamer作为一个轻量级的WebRTC网关，能够将RTSP视频流转为浏览器可识别的WebRTC流。与Vue3的结合则提供了现代化的前端开发体验。

核心组件交互流程：

监控设备通过RTSP协议输出视频流
webrtc-streamer服务将RTSP转换为WebRTC
Vue前端通过JavaScript API与webrtc-streamer交互
视频流最终在浏览器中渲染

为什么选择这个方案？

低延迟：WebRTC协议通常延迟在500ms以内
跨平台：无需插件即可在现代浏览器中运行
高效：利用浏览器原生能力，减少服务器转码压力

2. 服务端部署与配置

webrtc-streamer支持多种部署方式，下面我们将介绍生产环境中最常用的两种方案。

2.1 Windows服务部署

对于Windows服务器环境，建议将webrtc-streamer配置为系统服务：

下载最新Windows版本：

wget https://github.com/mpromonet/webrtc-streamer/releases/download/v0.6.4/webrtc-streamer-v0.6.4-Windows-AMD64.zip

解压并安装为服务：

# 以管理员身份运行PowerShell .\webrtc-streamer.exe --install-as-service --service-name WebRTCStreamer

配置服务自动重启：

sc failure "WebRTCStreamer" reset= 86400 actions= restart/1000

2.2 Linux系统部署

Linux环境下推荐使用systemd管理服务：

# 创建服务配置文件 sudo tee /etc/systemd/system/webrtc-streamer.service <<EOF [Unit] Description=WebRTC Streamer Service After=network.target [Service] ExecStart=/opt/webrtc-streamer/webrtc-streamer -H 8000 WorkingDirectory=/opt/webrtc-streamer Restart=always User=webrtc [Install] WantedBy=multi-user.target EOF

启动并启用服务：

sudo systemctl daemon-reload sudo systemctl start webrtc-streamer sudo systemctl enable webrtc-streamer

3. Vue3项目集成

现在我们将webrtc-streamer集成到Vue3项目中，创建一个可复用的视频组件。

3.1 前端依赖准备

首先，将必要的JS文件放入public目录：

public/ ├── js/ │ ├── webrtcstreamer.js │ └── adapter.min.js

在index.html中引入：

<script src="/js/adapter.min.js"></script> <script src="/js/webrtcstreamer.js"></script>

3.2 创建视频组件

新建src/components/VideoStreamer.vue：

<script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' const props = defineProps({ serverUrl: { type: String, required: true }, rtspUrl: { type: String, required: true } }) const videoRef = ref(null) let streamer = null onMounted(() => { streamer = new WebRtcStreamer(videoRef.value.id, props.serverUrl) streamer.connect(props.rtspUrl) }) onBeforeUnmount(() => { if (streamer) { streamer.disconnect() streamer = null } }) </script> <template> <video ref="videoRef" id="video-stream" autoplay playsinline controls class="video-element" ></video> </template> <style scoped> .video-element { max-width: 100%; border: 1px solid #ddd; border-radius: 4px; } </style>

4. 生产环境优化

4.1 多厂商RTSP地址适配

不同厂商设备的RTSP地址格式各异，我们需要统一处理：

// utils/rtspParser.js export function generateRtspUrl(device) { const { brand, ip, port, username, password, channel } = device const auth = username && password ? `${username}:${password}@` : '' const urls = { hikvision: `rtsp://${auth}${ip}:${port}/h264/ch${channel}/main/av_stream`, dahua: `rtsp://${auth}${ip}:${port}/cam/realmonitor?channel=${channel}&subtype=0`, uniview: `rtsp://${auth}${ip}:${port}/live/main/${channel}` } return urls[brand.toLowerCase()] || '' }

4.2 错误处理与重连机制

增强组件的健壮性：

<script setup> // ...其他导入 import { useRetry } from '@/composables/useRetry' const { retry } = useRetry(3, 1000) const connectStream = async () => { try { await retry(() => { if (!streamer) return return new Promise((resolve, reject) => { streamer.connect(props.rtspUrl, () => { console.log('Connection established') resolve() }) }) }) } catch (error) { console.error('Failed to connect after retries', error) } } </script>

5. 安全与性能优化

5.1 跨域解决方案

配置Nginx反向代理：

server { listen 80; server_name yourdomain.com; location /webrtc/ { proxy_pass http://localhost:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }

5.2 多路视频流管理

当需要同时显示多个摄像头时：

<script setup> const cameras = ref([ { id: 1, name: 'Entrance', brand: 'hikvision', ip: '192.168.1.100', channel: 1 }, // ...其他摄像头 ]) const activeCamera = ref(null) function switchCamera(camera) { activeCamera.value = camera } </script> <template> <div class="camera-grid"> <div v-for="camera in cameras" :key="camera.id" @click="switchCamera(camera)" > <VideoStreamer v-if="activeCamera?.id === camera.id" :server-url="serverUrl" :rtsp-url="generateRtspUrl(camera)" /> </div> </div> </template>

6. 实际应用中的经验分享

在多个项目中实施这套方案后，我们发现以下几点特别值得注意：

带宽管理：每个WebRTC流大约需要2-4Mbps带宽，在监控中心显示多路视频时要考虑服务器带宽
硬件加速：在Linux服务器上，启用硬件加速可以显著降低CPU使用率：

./webrtc-streamer --hwaccel vaapi --vaapi_device /dev/dri/renderD128

移动端适配：iOS设备需要特殊处理：

// 检测iOS设备 const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) if (isIOS) { videoElement.setAttribute('playsinline', '') videoElement.setAttribute('muted', '') }