视频地址格式为:rtsp://admin:abc123123@192.168.1.x:554/h264/XXXXXXX
1.视频地址解析
admin:用户名
abc123123:密码
192.168.1.x:摄像头ip地址
2.下载内容
(1)vlc 用来测试rtsp地址是否正确
下载地址 https://www.videolan.org/vlc/
(2)WebRtcStreamer.js 用来初始化播放器
下载地址 https://github.com/mpromonet/webrtc-streamer/releases
3.测试rtsp地址
(1)打开vlc,媒体--打开网络串流
(2)粘贴地址,点击播放
(3)查看视频编码信息(当前方法仅支持H264)
右键--工具--解编码器信息
(4)如果是H265需要更改
(5)注意:把rtsp地址复制上去后是不需要任何操作的,等1~2秒之后就会展示监控视频,如果有提示需要输入密码,那么就是rtsp地址中的密码不正确
4.下载webrtc-streamer
(1)解压,打开webrtc-streamer.exe(注意:这个关闭视频不能播放)
(2)测试,浏览器打开127.0.0.1:8080
展示当前桌面说明打开成功
5.vue代码--视频组件
需要在当前文件引入webrtcstreamer.js,把他放到public下static文件下
注意:webrtcstreamer.js文件引入路径
<template>
<div id="videoBody">
<div class="video-contianer" v-for="(item, index) in rtsp" :key="index">
<video
class="video"
:id="'video' + index"
ref="video"
preload="auto"
autoplay="autoplay"
muted
width="100%"
height="100%"
/>
<div class="mask" @click="handleClickVideo(index)"></div>
</div>
</div>
</template>
<script>
import WebRtcStreamer from '../../../public/static/videojs/webrtcstreamer';
export default {
name: 'videoCom',
props: {
rtsp: {
type: Array,
required: true
},
},
data() {
return {
webRtcServer: [],
clickCount: 0, // 用来计数点击次数
currentIndex: null //当前视频流的索引
};
},
destroyed() {
this.webRtcServer.forEach((item) => {
item.disconnect();
});
this.webRtcServer = [];
},
mounted() {
this.rtsp.forEach((item, index) => {
this.initVideo(item, index);
});
},
methods: {
initVideo(url, index) {
try {
//连接后端的IP地址和端口
const webRtcServer = new WebRtcStreamer(
'video' + index,
`http://127.0.0.1:8000`
);
//向后端发送rtsp地址
webRtcServer.connect(url);
this.webRtcServer.push(webRtcServer);
} catch (error) {
console.log(error);
}
},
/* 处理双击 单机 */
dbClick() {
this.clickCount++;
if (this.clickCount === 2) {
this.btnFull(); // 双击全屏
this.clickCount = 0;
}
setTimeout(() => {
if (this.clickCount === 1) {
this.clickCount = 0;
}
}, 250);
},
/* 视频全屏 */
btnFull() {
const elVideo = document.getElementById('video' + this.currentIndex);
if (elVideo.webkitRequestFullScreen) {
elVideo.webkitRequestFullScreen();
} else if (elVideo.mozRequestFullScreen) {
elVideo.mozRequestFullScreen();
} else if (elVideo.requestFullscreen) {
elVideo.requestFullscreen();
}
},
// 点击事件
handleClickVideo(index) {
this.currentIndex = index;
this.dbClick();
}
}
};
</script>
<style scoped lang="scss">
#videoBody {
display: flex;
flex-wrap: wrap;
justify-content: start;
gap: 1%;
.video-contianer {
position: relative;
width: 24%;
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
}
}
</style>
6.vue代码--父组件
这里我只展示了两个视频,可根据需求在data的url中修改
<template>
<div>
<Video :rtsp="url" ref="videoSon"></Video>
</div>
</template>
<script>
import Video from '@/components/video/video.vue';
export default {
components: {
Video
},
data() {
return {
url: [
'rtsp://admin:bfhd2766@192.168.1.X:554/h264/XXXX',
'rtsp://admin:bfhd2766@192.168.1.Y:554/h264/XXXX'
]
};
}
};
</script>
<style>
</style>
7.遇见问题
视频一直在加载中,不报错也不播放
(1)检查视频编码信息是否是H264
(2)检查rtsp地址是否正确
开发的时候有在webrtc-streamer.exe中报401错误是因为rtsp中密码有错导致身份验证不通过
8. 缺点
在展示两个监控视频时已经非常卡顿,而且webrtc-streamer.exe需要一直打开,不打开不能看到监控视频