因为video标签只能播放特定格式的视频,比如MP4、WebM和Ogg格式,而对于这种视频流文件则需要通过转码实现,而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频,除了在浏览器的地址栏直接打开摄像头的地址,还可以通过webrtc-streamer和video标签在页面实现监控实时播放。
包含rtc脚本文件(不转码减少资源消耗)和rtcstreamer.js文件
链接:https://pan.baidu.com/s/1QhRmDFHi7m7qZIcm1xblzA
提取码:zuwk
1、下载webrtc-streamer,对应下载自己电脑操作系统的版本(需要去GitHub下载,GitHub下载较慢,建议通过工具加速下载)
https://github.com/mpromonet/webrtc-streamer/releases
2、解压下载包,双击ebrtc-streamer.exe文件,启动服务
(注意:这里也可以通过当前文件夹下用Cmd命令webrtc-streamer.exe -o或者自己编写一个脚本文件去启动exe文件,这样占用CPU会很少,直接双击exe文件会比较吃CPU)
当你看到下图是时就说明你启动成功,此时在浏览器访问localhost:8000可以看到本机监控画面(到这里,恭喜你,走完一半了,接下来就是重点了)
3、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到你的Vue项目public目录下,在index.html文件里引入这两个js文件。
js文件引用
index.html文件引用
<script type="text/javascript" src="<%= BASE_URL %>webrtcstreamer.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>adapter.min.js"></script>
4、编写页面
注意:因为是在本机启动服务,所以 new WebRtcStreamer(id,serverUrl)中URL需要传入127.0.0.1和端口号8000
<template>
<div >
<a-button @click="handleChange">切换</a-button>
<video id="video" style="z-index: 9099999;" autoplay width="900" height="900"></video>
</div>
</template>
<script>
export default {
name: 'index1',
data() {
return {
webRtcServer: null//webRtcServer上下文
}
},
mounted() {
//video:需要绑定的video控件ID
//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000
this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')
//需要查看的rtsp地址,地址为财物系统地址
this.webRtcServer.connect('rtsp://127.0.0.1:8554/video')
},
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
/**
* 有多个视频源的情况下,直接调用服务的connect方法即可
*/
handleChange() {
this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1')
}
}
}
</script>
<style scoped>
</style>
这样就实现浏览器直接通过rtsp视频流观看实时监控视频了。
方案结论:
性能好,延迟低(实际测试是毫秒级别),实时性高
目前为止已知的最好方案是WebRTC方案,阿里云提供的相关服务就是采用了这一方案
其他付费方案:
猿大师
开源方案:
ZLMediaKit