因为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="webrtcstreamer.js"><script type="text/javascript" src="adapter.min.js">
4、编写页面
注意：因为是在本机启动服务,所以 newWebRtcStreamer(id,serverUrl)中URL需要传入127.0.0.1和端口号8000
切换export default {name: 'index1',data() {return {webRtcServer: null//webRtcServer上下文}},mounted() {//video：需要绑定的video控件ID//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000this.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')}}} 
这样就实现浏览器直接通过rtsp视频流观看实时监控视频了。
方案结论：
性能好，延迟低（实际测试是毫秒级别），实时性高
目前为止已知的最好方案是WebRTC方案，阿里云提供的相关服务就是采用了这一方案
其他付费方案：
猿大师
开源方案：
ZLMediaKit