当前位置:   article > 正文

rtsp流实现web端实时播放(海康+大华)_c# 在web页面实时播放海康rtsp视频

c# 在web页面实时播放海康rtsp视频

最近的电力项目需要嵌入海康摄像头画面,之前没有做过类似的流媒体播放,所以有些懵;
海康开放平台的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文件下建立一个静态页面,直接访问本地资源)

在这里插入图片描述

代码实现

在这里插入图片描述

最终实现效果

在这里插入图片描述
图片加了马赛克;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/539007
推荐阅读
相关标签
  

闽ICP备14008679号