Vue2 纯前端对接海康威视摄像头实时预览方案

封装 Vue 组件

为了复用方便，建议将视频播放逻辑封装成独立组件。这样在父组件中只需传入 RTSP URL 数组即可。

注意：import 路径需根据实际项目结构调整，同时 cameraIp 必须指向本地运行的 webrtc-streamer 服务地址。

<template>
<div class="rtsp_video_container">
<div v-if="videoUrls.length === 1"class="rtsp_video single-video">
<video :id="'video_0'" controls autoPlay muted width="100%" height="100%" style="object-fit: fill"></video>
</div>
<div v-if="videoUrls.length >1" v-for="(videoUrl, index) in videoUrls":key="index"class="rtsp_video">
<video :id="'video_' + index" controls autoPlay muted width="100%" height="100%" style="object-fit: fill"></video>
</div>
</div>
</template>
<script>
import WebRtcStreamer from'../utils/webrtcstreamer';// 注意此处替换为 webrtcstreamer.js 所在的路径
exportdefault{
 name:'RtspVideo',
 props:{
 videoUrls:{
 type: Array,
 required:true,
}},
data(){
return{
 cameraIp:'localhost:8000',// 这里的 IP 固定为本地，不要修改，是用来与本地的 webrtc-streamer 插件进行通讯的
 webRtcServers:[],// 存储 WebRtcStreamer 实例
};
},
mounted(){
this.initializeStreams();
},
 watch:{
// 监听 videoUrls 或 cameraIp 的变化，重新初始化流
 videoUrls:{
handler(newUrls, oldUrls){
if(newUrls.length !== oldUrls.length ||!this.isSameArray(newUrls, oldUrls)){
this.resetStreams();
this.initializeStreams();
}},
deep:true,
},
cameraIp(newIp, oldIp){
if(newIp !== oldIp){
this.resetStreams();
this.initializeStreams();
}}
},
 methods:{
// 初始化视频流连接
initializeStreams(){
if(this.webRtcServers.length ===0){
this.videoUrls.forEach((videoUrl, index)=>{
const videoElement = document.getElementById(`video_${index}`);
const webRtcServer =newWebRtcStreamer(videoElement,`http://${this.cameraIp}`);
this.webRtcServers.push(webRtcServer);
 webRtcServer.connect(videoUrl,null,'rtptransport=tcp',null);
});
}},
// 检查新旧数组是否相同
isSameArray(arr1, arr2){
return arr1.length === arr2.length && arr1.every((value, index)=> value === arr2[index]);
},
// 清除 WebRtcStreamer 实例
resetStreams(){
this.webRtcServers.forEach((webRtcServer)=>{
if(webRtcServer){
 webRtcServer.disconnect();// 断开连接
}});
this.webRtcServers =[];// 清空实例
},
},
beforeDestroy(){
this.resetStreams();// 页面销毁时清理 WebRtcStreamer 实例，避免内存泄漏
},
};
</script>
<style lang="less" scoped>
.rtsp_video_container { display: flex; flex-wrap: wrap; gap:10px; justify-content: space-between;}
.rtsp_video { flex:1148%; height:225px; max-width:48%; background: #000; border-radius:8px; overflow: hidden;}
.single-video { flex:11100%; height:100%; max-width:100%; background: #000;}
 video { width:100%; height:100%; object-fit: cover;}
</style>

父组件引用示例如下：

<template>
<div style="margin-top: 10px;width: 100%;height: 100%;">
<rtsp-video :videoUrls="selectedUrls":key="selectedUrls.join(',')"></rtsp-video>
</div>
</template>
<script>
import RtspVideo from"../views/video";
 components:{ RtspVideo }
data(){
return{
 selectedUrls:['rtsp://user:[email protected]:xxxx/Streaming/Channels/101','rtsp://user:[email protected]:xxxx/Streaming/Channels/201'],
}}
</script>

启动本地服务

最后一步，需要在运行 Vue 应用的本地 PC 上启动 webrtc-streamer 服务。这是将 RTSP 转为 WebRTC 的关键中间件。

下载地址：webrtc-streamer releases

下载解压后，需要配套使用 exe 和 js 文件。exe 位于 bin 目录，js 位于 share\webrtc-streamer\html 目录。确保版本对应，否则可能出现画面无法加载的问题。

实现效果图如下：

如果启动 webrtc-streamer.exe 导致客户端卡顿，或者需要更改端口号，可以通过命令行参数调整。例如使用批处理脚本启动指定端口：

@echo off
cd C:
start webrtc-streamer.exe -o -H 0.0.0.0:8124
exit

至此，海康威视实时视频预览功能已完成。