rtsp流实现web端实时播放（海康+大华）

最近的电力项目需要嵌入海康摄像头画面，之前没有做过类似的流媒体播放，所以有些懵；
海康开放平台的webAPI，有插件还是无插件，都不适合自研web系统的嵌入，所以需要自己进行解流；
首先，介绍一下相关流的知识：

常见的摄像头都支持rtsp取流，可浏览器不支持直接使用video标签播放rtsp流，所以需要转换。

每个厂商的rtsp取流格式不一样，可以自行去官网查看；

我们使用webrtc-streamer进行取流，什么是webrtc-streamer？

webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。

下载地址：https://github.com/mpromonet/webrtc-streamer
选取自己电脑对应的版本；

实现步骤

下载解压

启动webrtc-streamer.exe文件

访问127.0.0.1：8000 就可以在浏览器看到桌面监控画面

将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 （我尝试在index.html中引入这俩个文件，在vue代码中直接使用，但出现白屏，没有画面，所以在public文件下建立一个静态页面，直接访问本地资源）

代码实现

最终实现效果

图片加了马赛克；