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

Vue2项目实战：基于WebRTC的大华RTSP视频流播放方案

news 2026/4/22 19:24:32

1. 为什么需要WebRTC播放RTSP视频流

在安防监控、智能家居等场景中，我们经常需要在前端页面展示摄像头的实时画面。大华摄像头默认输出的RTSP协议视频流，但浏览器原生并不支持直接播放RTSP流。这时候就需要WebRTC这个"中间人"来帮忙了。

我刚开始接触这个需求时，尝试过几种方案：

用FFmpeg转码为HLS：延迟高达3-5秒
使用RTMP协议：需要Flash支持，现在基本被淘汰
WebRTC方案：延迟能控制在500ms以内，完全满足实时性要求

WebRTC就像个翻译官，它能把摄像头说的"RTSP方言"翻译成浏览器能听懂的"WebRTC普通话"。这个过程中最妙的是不需要额外的流媒体服务器，直接在浏览器和摄像头之间建立点对点连接。

2. 环境准备与工具配置

2.1 硬件和基础软件准备

首先你需要：

大华网络摄像头（我用的型号是DH-IPC-HDW3449T）
本地开发电脑（Windows/Mac都行）
Vue2项目（我用的是vue-cli 4.x创建的）

重点说下摄像头配置：

登录摄像头后台（通常是192.168.1.108）
进入"配置 > 音视频"菜单
视频编码必须选择H.264！这是WebRTC能识别的唯一编码格式
分辨率建议设为1280x720，码率2048kbps

2.2 WebRTC-Streamer工具部署

这个开源工具是我们的核心武器，下载后解压会看到：

webrtc-streamer/ ├── webrtc-streamer.exe ├── html/ │ ├── adapter.min.js │ └── webrtcstreamer.js

启动服务有两种方式：

直接双击exe（默认端口8000）
命令行启动（推荐）：

webrtc-streamer.exe -H 0.0.0.0:8000 -o

参数说明：

-H指定监听地址和端口
-o启用硬件加速（降低CPU占用）

我建议把启动命令写成bat脚本，方便下次使用。

3. Vue2项目集成实战

3.1 前端组件开发

在components目录新建Camera.vue：

<template> <div class="video-container"> <video id="dahuaVideo" autoplay muted playsinline style="width: 100%; height: auto" ></video> </div> </template> <script> import adapter from '@/assets/webrtc/adapter.min.js' import WebRtcStreamer from '@/assets/webrtc/webrtcstreamer.js' export default { props: { rtspUrl: { type: String, required: true } }, data() { return { streamer: null } }, mounted() { this.initVideo() }, methods: { initVideo() { const videoEl = document.getElementById('dahuaVideo') this.streamer = new WebRtcStreamer(videoEl, window.location.protocol + '//' + window.location.hostname + ':8000') // 超时设置（单位毫秒） this.streamer.options.connectionTimeout = 5000 this.streamer.options.heartbeatTimeout = 3000 this.streamer.connect(this.rtspUrl) } }, beforeDestroy() { if (this.streamer) { this.streamer.disconnect() this.streamer = null } } } </script>

3.2 使用组件的正确姿势

在页面中使用时要注意：

<template> <div> <Camera :rtsp-url="rtspUrl" v-if="streamReady" /> </div> </template> <script> import Camera from '@/components/Camera.vue' export default { components: { Camera }, data() { return { rtspUrl: 'rtsp://admin:123456@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0', streamReady: false } }, mounted() { // 等WebRTC服务启动后再加载组件 setTimeout(() => { this.streamReady = true }, 1000) } } </script>

4. 常见问题排查指南

4.1 画面黑屏问题排查

我踩过的坑包括：

编码格式错误：必须用H.264，在摄像头后台确认
端口冲突：检查8000端口是否被占用
跨域问题：开发时配置vue.config.js

module.exports = { devServer: { proxy: { '/webrtc': { target: 'http://localhost:8000', changeOrigin: true } } } }

4.2 性能优化建议

当需要同时播放多路视频时：

降低分辨率到640x480
调整帧率为15fps
使用Web Worker并行处理多个流
设置合理的缓存策略：

this.streamer.options = { mediaConstraints: { audio: false, video: { width: { ideal: 1280 }, height: { ideal: 720 } } }, bandwidth: { video: 1500 // 限制码率(kbps) } }

5. 进阶应用场景

5.1 实现云台控制

通过axios发送PTZ控制命令：

controlPTZ(command) { const params = { command: command, channel: 1, speed: 50 // 云台速度1-100 } axios.get('http://192.168.1.108/ptz', { params }) }

常用命令包括：

左转：left
右转：right
放大：zoomin
缩小：zoomout

5.2 录像回放功能集成

结合大华NVR的API实现：

fetchRecordList() { return axios.get('http://nvr-ip/api/record/list', { params: { startTime: '2023-07-01 00:00:00', endTime: '2023-07-01 23:59:59', channel: 1 } }) }

在实际项目中，这套方案已经稳定运行了8个月，日均播放时长超过5小时。最关键的是保持WebRTC-Streamer服务稳定运行，建议用PM2等工具做进程守护。当视频流中断时，可以通过心跳检测自动重连，给用户更流畅的体验。

查看全文

http://www.jsqmd.com/news/683382/