Vue3+WebRtcServer实现海康监控rtsp流视频的跨域播放解决方案

1. 为什么你的海康监控视频在Vue3里播不出来最近好几个做安防项目的朋友都跟我吐槽同一个问题他们在Vue3项目里想直接播放海康威视摄像头的RTSP视频流结果要么黑屏要么疯狂报跨域错误。浏览器控制台里一片红全是“Access-Control-Allow-Origin”之类的错误搞得人头大。其实这个问题太典型了。你想啊现代浏览器出于安全考虑搞了个“同源策略”。简单来说就是你前端页面比如跑在localhost:8080不能随便去请求另一个来源比如你的视频流服务器192.168.1.100:554的资源除非对方明确告诉你“我允许”。海康摄像头的RTSP流默认可不会在响应头里加这个允许跨域的标记所以浏览器直接就给你拦截了视频自然出不来。那怎么办呢传统路子有好几种但各有各的坑。比如用后端做代理让前端去请求自己的后端服务后端再去拉摄像头的流。这方法稳是稳但增加了服务器负担延迟也可能上去。还有用Flash或者浏览器插件这都什么年代了兼容性和安全性都是问题。所以我今天要跟你聊的是现在更流行、也更“现代”的一种方案WebRTC。你可能听过它主要用在视频会议、在线教育这些实时互动场景。但它有个兄弟叫WebRtcStreamer是个非常轻量的“翻译官”它能把摄像头的RTSP流“翻译”成浏览器原生支持的WebRTC流。这样一来浏览器就像在看一个普通的视频一样流畅播放而且天然绕过了很多跨域限制因为WebRTC协议本身的设计就更开放一些。这个方案特别适合我们这种Vue3的前端开发者不需要动太多后端架构在前端层面就能搞定大部分问题。接下来我就手把手带你用Vue3 WebRtcStreamer把海康监控视频稳稳当当地播出来。2. 环境准备搭建你的WebRTC“中转站”工欲善其事必先利其器。我们第一步不是写代码而是先把关键的“翻译官”——WebRtcStreamer的服务端给跑起来。你可以把它理解为一个独立的小服务专门负责对接摄像头并把RTSP流转换成WebRTC流。2.1 获取并启动WebRtcStreamer服务器WebRtcStreamer有很多现成的实现我们这里用一个比较流行的、基于C的版本它提供了编译好的可执行文件开箱即用。下载服务器程序你可以去GitHub上搜索“webrtc-streamer”找到对应的release页面。根据你的服务器操作系统Windows/Linux下载对应的压缩包。比如对于Linux你可能下载到一个叫webrtc-streamer-v0.6.0-Linux-x86_64.tar.gz的文件。解压并运行在服务器上可以是你的开发机也可以是一台内网服务器解压这个文件。你会看到里面有个可执行文件通常就叫webrtc-streamer。# Linux/macOS 示例 tar -zxvf webrtc-streamer-v0.6.0-Linux-x86_64.tar.gz cd webrtc-streamer-v0.6.0-Linux-x86_64 ./webrtc-streamer运行后你应该能看到控制台输出服务启动的信息默认会在8000端口启动一个HTTP服务。验证服务打开浏览器访问http://你的服务器IP:8000。如果能看到一个简单的Web页面上面有视频播放器和一些配置项说明服务启动成功了。这个页面其实就是WebRtcStreamer自带的测试客户端。关键点这个服务器程序需要和你的海康摄像头网络互通。最好把它部署在和摄像头同一个局域网内的机器上这样延迟最低。如果你的Vue3前端项目是跑在本地开发服务器如localhost:5173那么webrtc-streamer也可以就运行在你的本地电脑上同样注意摄像头网络可达。2.2 理解服务端的关键参数直接运行./webrtc-streamer用的是默认配置。但在实际项目中我们可能需要调整一些参数。你可以通过命令行参数来配置# 示例指定HTTP服务端口并允许所有CORS跨域请求开发时常用 ./webrtc-streamer --port 8080 --allow-origin * # 更安全的做法是只允许你的前端域名 ./webrtc-streamer --port 8000 --allow-origin http://localhost:5173这里重点说下--allow-origin参数。虽然我们主要靠WebRTC协议来传输视频但前端JavaScript在初始化连接时仍然需要向这个webrtc-streamer服务发送一些HTTP API请求比如告诉服务器我要连接哪个RTSP地址。这些API请求依然受浏览器同源策略管辖。通过设置--allow-origin我们让服务端在响应这些API请求时加上允许跨域的头部从而解决这“最后一公里”的跨域问题。所以我们的整体架构是这样的Vue3前端↔HTTP API可能有跨域需配置↔WebRtcStreamer服务↔RTSP协议↔海康摄像头。视频数据则通过建立的WebRTC PeerConnection直接传输不经过HTTP效率很高。3. Vue3前端集成把视频流“请”进页面服务端跑通了现在轮到前端出场。我们要在Vue3组件里创建视频播放器并指挥它去连接我们刚搭建好的“中转站”。3.1 引入WebRtcStreamer客户端库首先你需要把WebRtcStreamer的客户端JavaScript库拿到你的项目里。这个库通常就在你下载的服务器压缩包里找一个叫webrtcstreamer.js的文件。把它拷贝到你的Vue3项目的public或assets目录下。我习惯放在src/assets/里。然后在需要使用视频播放的Vue组件中引入它。这里可能会遇到第一个坑TypeScript报错因为它不认识这个.js文件模块。解决方案在项目根目录下或者src目录下创建一个index.d.ts或webrtcstreamer.d.ts类型声明文件内容如下// index.d.ts declare module /assets/webrtcstreamer.js { export class WebRtcStreamer { constructor(videoElementId: string, serverUrl: string); connect(url: string, options?: any, urlOptions?: string): void; disconnect(): void; // 根据你用的js文件版本可能还有其他方法如 setIceServers 等 } }这个声明文件的作用就是告诉TypeScript编译器“嘿我认识webrtcstreamer.js这个模块它导出了一个叫WebRtcStreamer的类长这样……”。这样你在组件里import的时候就不会报红了。3.2 构建视频播放组件接下来我们创建一个完整的Vue3组件。我会用script setup的语法因为它更简洁。template div classvideo-container !-- 视频渲染的元素注意id要和后面js里匹配 -- video idhaikangVideoPlayer refvideoPlayerRef controls autoplay playsinline classvideo-element /video div classcontrol-bar input v-modelrtspUrl placeholder请输入海康摄像头RTSP地址 / button clickconnectStream连接视频流/button button clickdisconnectStream断开连接/button /div /div /template script setup langts import { ref, onMounted, onUnmounted, nextTick } from vue // 引入我们的“翻译官”客户端 import { WebRtcStreamer } from /assets/webrtcstreamer.js // RTSP地址例如rtsp://admin:你的密码192.168.1.64:554/h264/ch1/main/av_stream const rtspUrl ref() // 用于保存WebRtcStreamer实例 const webRtcServer refWebRtcStreamer | null(null) const videoPlayerRef refHTMLVideoElement() // 初始化WebRTC连接 const initWebRtcServer async () { await nextTick() // 确保DOM渲染完成video元素已存在 if (!videoPlayerRef.value) return // 获取当前前端页面的主机名动态决定连接哪个服务器 // 开发环境可能是 localhost生产环境是你的域名或IP const hostname window.location.hostname const isLocalhost hostname localhost || hostname 127.0.0.1 const serverIp isLocalhost ? localhost : 你的实际服务器IP或域名 // 这里替换成你的WebRtcStreamer服务器地址 // 创建WebRtcStreamer实例 // 第一个参数是video元素的id第二个参数是WebRtcStreamer服务器的地址 webRtcServer.value new WebRtcStreamer(haikangVideoPlayer, http://${serverIp}:8000) console.log(WebRtcStreamer 实例初始化成功) } // 连接指定RTSP流 const connectStream () { if (!webRtcServer.value || !rtspUrl.value.trim()) { alert(请先初始化或输入RTSP地址) return } try { // connect 方法参数1是RTSP地址参数2是可选配置一般传null参数3是URL选项 // urlOptions 里可以指定传输协议、超时等rtptransporttcp 用TCP模式更稳定timeout设置超时 webRtcServer.value.connect(rtspUrl.value, null, rtptransporttcptimeout60) console.log(正在连接流: ${rtspUrl.value}) } catch (error) { console.error(连接视频流失败:, error) alert(连接失败请检查地址和服务器状态) } } // 断开连接 const disconnectStream () { if (webRtcServer.value) { webRtcServer.value.disconnect() console.log(视频流连接已断开) } } // 组件挂载时初始化 onMounted(() { initWebRtcServer() // 可以在这里预设一个默认的RTSP地址方便测试 // rtspUrl.value rtsp://admin:password192.168.1.64:554/Streaming/Channels/101 }) // 组件卸载时清理资源防止内存泄漏 onUnmounted(() { disconnectStream() webRtcServer.value null }) /script style scoped .video-container { width: 100%; max-width: 800px; margin: 0 auto; } .video-element { width: 100%; background-color: #000; border-radius: 8px; } .control-bar { margin-top: 16px; display: flex; gap: 12px; align-items: center; } .control-bar input { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; } .control-bar button { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .control-bar button:hover { background-color: #0056b3; } /style这段代码就是一个完整的、可运行的视频播放器组件。它做了几件事在模板里放了一个video标签用于最终显示视频。使用ref管理状态和实例。在onMounted生命周期里初始化WebRtcStreamer实例并把它和我们页面上的video元素绑定。提供了输入框和按钮让用户可以输入海康摄像头的RTSP地址并触发连接。在connectStream函数中调用webRtcServer.value.connect()这是最关键的一步它告诉后台的WebRtcStreamer服务器“去拉取这个RTSP流并转换成WebRTC流推送给我”。在组件销毁时断开连接释放资源。3.3 解决Vite项目的跨域代理配置即便我们配置了webrtc-streamer服务器的--allow-origin在Vue3开发时如果你用的是Vite可能还是会遇到跨域问题。这是因为你的前端开发服务器比如localhost:5173向localhost:8000发请求端口不同属于跨域。Vite提供了非常方便的代理配置来解决这个问题让你在开发阶段感觉像是在请求同源资源。打开你的vite.config.ts文件进行如下配置import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { // 将 /webrtc-api 开头的请求代理到你的 WebRtcStreamer 服务器 /webrtc-api: { target: http://localhost:8000, // 你的 WebRtcStreamer 服务器地址 changeOrigin: true, // 改变请求头中的origin为目标地址对后端透明 rewrite: (path) path.replace(/^\/webrtc-api/, ) // 重写路径去掉前缀 } } } })配置好后你需要修改前端代码中初始化WebRtcStreamer实例的那一行// 修改前直接连接服务器IP:端口 webRtcServer.value new WebRtcStreamer(haikangVideoPlayer, http://${serverIp}:8000) // 修改后连接代理路径 webRtcServer.value new WebRtcStreamer(haikangVideoPlayer, /webrtc-api)这样你的前端代码在请求http://localhost:5173/webrtc-api/...时Vite开发服务器会自动把这个请求转发到http://localhost:8000/...并且处理好跨域头部对开发者完全无感。这在开发阶段非常方便。4. 深度调试与性能优化实战代码跑起来只是第一步要让视频流稳定、低延迟地播放还需要一些调试和优化技巧。这部分是我踩过不少坑才总结出来的经验。4.1 海康摄像头RTSP地址的“正确姿势”连接不上十有八九是RTSP地址不对。海康摄像头的RTSP地址有固定的格式但不同型号、不同固件版本可能略有差异。以下是几种常见的格式// 格式1主码流高清 rtsp://[username]:[password][ip地址]:[端口]/h264/ch1/main/av_stream // 格式2子码流标清适合网络不好时 rtsp://[username]:[password][ip地址]:[端口]/h264/ch1/sub/av_stream // 格式3较新的设备可能用这种 rtsp://[username]:[password][ip地址]:[端口]/Streaming/Channels/101 // 格式4通道模式101代表通道1主码流102代表通道1子码流 rtsp://[username]:[password][ip地址]:[554]/cam/realmonitor?channel1subtype0如何确认登录海康摄像头的Web管理界面通常用IP地址访问。在“配置” - “网络” - “高级配置” - “RTSP” 中查看RTSP服务是否启用以及端口号默认554。很多型号的摄像头在“配置” - “音视频” 或 “视频” 设置里会直接显示RTSP地址示例。最笨但有效的方法用VLC media player测试。打开VLC媒体 - 打开网络串流输入你拼凑的RTSP地址。如果VLC能播出来那这个地址就是对的可以直接用在你的代码里。4.2 WebRtcStreamer连接参数详解在connect方法的第三个参数urlOptions里我们可以传递一些关键指令来控制拉流行为rtptransporttcp强烈建议加上。这指定使用TCP模式来传输RTP包。虽然UDP延迟低但在复杂的网络环境下尤其是经过NAT、防火墙TCP的可靠性更高能有效避免丢包导致的马赛克或卡顿。海康摄像头一般都支持RTSP over TCP。timeout60设置连接超时时间单位秒。如果网络不稳定或摄像头暂时无响应超过这个时间会断开并报错。你可以根据实际情况调整。buffer100设置缓冲区大小单位毫秒这个参数取决于具体实现有些版本可能不叫这个。适当增加缓冲区可以应对网络抖动但会增加延迟。对于实时监控建议保持较低值如100-200。你可以这样组合使用webRtcServer.value.connect(rtspUrl.value, null, rtptransporttcptimeout60buffer100)4.3 处理常见的错误与异常在实际运行中你可能会在浏览器控制台看到一些错误。别慌我们来逐一分析Failed to connect to WebRTC server原因前端无法连接到你配置的WebRtcStreamer服务器地址。排查检查服务器程序是否正在运行 (ps aux | grep webrtc-streamer)。检查防火墙是否放行了服务器端口默认8000。在前端代码里尝试用浏览器直接访问http://服务器IP:8000看是否能打开测试页面。ICE connection failed或PeerConnection disconnected原因WebRTC的ICE交互式连接建立过程失败两端无法建立P2P连接。这在复杂的网络环境如双NAT中很常见。解决方案配置STUN/TURN服务器WebRtcStreamer支持配置中继服务器。修改服务器启动命令或在前端代码中创建实例后配置。// 前端配置示例如果webrtcstreamer.js支持 webRtcServer.value new WebRtcStreamer(...); webRtcServer.value.setIceServers([ { urls: stun:stun.l.google.com:19302 }, // 免费STUN服务器 // 如果需要TURN服务器在这里添加但需要自建或购买服务 // { urls: turn:your-turn-server.com:3478, username: user, credential: pass } ]);确保你的WebRtcStreamer服务器有公网IP或处于一个能让前端直接访问到的网络位置。如果是内网穿透环境配置会复杂很多。视频能连接但卡顿、延迟高原因网络带宽不足、服务器性能瓶颈、或编码参数不匹配。优化降低码流在代码中尝试连接摄像头的子码流sub流它分辨率低、码率低对网络和服务器压力小。调整服务器配置查看WebRtcStreamer服务器运行时的CPU和内存占用。如果过高考虑升级服务器硬件或限制同时转发的视频路数。检查摄像头编码设置登录摄像头管理后台尝试将视频编码从H.265切换为H.264WebRTC对H.264支持更普遍或降低主码流的码率和分辨率。4.4 多路视频与组件化封装一个安防平台不可能只播一路视频。我们需要考虑多路视频同时播放的场景。直接把上面的组件复制多份可能会造成资源竞争和性能问题。更好的做法是进行组件化封装并管理好每个WebRtcStreamer实例的生命周期。我们可以创建一个可复用的VideoStreamPlayer.vue组件它接收一个rtspUrl作为 prop内部独立管理自己的连接和销毁。在父组件中我们可以用一个数组来管理多个视频源并用v-for循环渲染多个播放器组件。关键点在于每个视频播放器组件必须拥有唯一的video元素id。WebRtcStreamer构造函数是通过id来绑定video元素的。我们可以用组件实例的唯一标识比如UUID来动态生成id。此外要特别注意在组件销毁时onUnmounted准确断开连接并清理实例避免内存泄漏和后台连接残留。当需要同时播放数十路视频时可能还需要考虑懒加载和视口内可见才连接的策略以节省服务器和客户端资源。5. 从开发到生产部署与安全考量当你的视频播放功能在本地开发环境跑得挺顺了接下来就要考虑部署到真正的生产环境。这里面的门道也不少。5.1 服务器部署与网络规划服务器选择你的webrtc-streamer服务器放在哪里有两种常见模式边缘服务器模式在每一个监控点位所在的局域网内部署一台服务器。这台服务器只负责拉取本地的几路摄像头RTSP流并转换成WebRTC流。前端通过公网访问这台边缘服务器的WebRTC服务。优点是延迟极低视频流不出局域网安全且带宽压力小。缺点是服务器分散维护成本高。中心服务器模式在云端或数据中心部署一台性能较强的服务器让它通过VPN或专网去拉取所有摄像头的RTSP流。前端统一访问这个中心服务器。优点是集中管理维护方便。缺点是所有视频流都要汇聚到中心点对中心服务器的带宽、算力要求极高且延迟会增加。对于中小型项目我通常推荐中心服务器模式但一定要确保中心服务器到各个摄像头的网络延迟低、带宽足。最好是在同一个运营商的内网里。端口与防火墙生产环境一定要在服务器防火墙中开放webrtc-streamer使用的端口默认8000。如果前端是HTTPS而服务器是HTTP还会涉及混合内容问题。可以考虑用Nginx等反向代理将webrtc-streamer的HTTP服务代理到一个HTTPS端口/路径下并统一配置CORS头部。5.2 安全性加固直接暴露RTSP地址和端口到公网是非常危险的。我们的方案已经提供了一层保护因为前端不直接接触RTSP流但webrtc-streamer服务器本身需要加强安全。访问控制不要使用--allow-origin *。在生产环境中精确指定你的前端域名。./webrtc-streamer --port 8000 --allow-origin https://your-frontend-domain.comAPI鉴权进阶开源的webrtc-streamer本身可能没有强大的用户认证功能。如果你需要可以考虑在它前面加一层反向代理如Nginx在Nginx上配置HTTP Basic认证或结合你的业务认证系统如JWT。修改webrtc-streamer的源码在它的HTTP API接口上增加Token验证逻辑。前端在初始化WebRtcStreamer实例时需要携带有效的Token。摄像头凭证管理永远不要在前端代码中硬编码摄像头的用户名和密码。RTSP地址中的密码应该由后端动态生成或从安全的配置中心获取。一种做法是前端只传递一个“摄像头ID”给后端后端根据ID查询到对应的RTSP地址含密码再传递给webrtc-streamer服务器。这样密码就不会泄露给前端。5.3 监控与日志生产系统必须有监控。对于webrtc-streamer服务器你需要关注进程存活使用systemd或supervisor来托管进程确保崩溃后能自动重启。资源监控监控服务器的CPU、内存、网络带宽。一路1080P的视频流转码和转发大概会占用1-2%的CPU和几十MB内存。根据这个估算你的服务器能承载多少路。日志分析webrtc-streamer会输出日志到控制台或文件。定期检查日志关注错误信息如连接摄像头失败、客户端异常断开等这能帮助你快速定位问题。最后再分享一个我实际项目中遇到的坑有一次部署后部分客户端能看部分不能。折腾了半天才发现是公司网络防火墙对UDP端口范围做了限制而WebRTC会使用大量的UDP端口进行传输。后来在服务器启动时通过参数限制了WebRTC使用的端口范围并在防火墙中为这个范围开了白名单问题才解决。所以生产环境的网络策略一定要和运维同事沟通清楚。