【Cesium】Vue+js+Cesium实现监控视频流接入

nemo-cyber

已于 2024-06-12 14:49:52 修改

阅读量820

点赞数 18

分类专栏： Cesium 文章标签：视频信息可视化

于 2024-06-12 11:10:48 首次发布

本文链接：https://blog.csdn.net/weixin_51540717/article/details/139614406

版权

Cesium 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.软硬件环境

软件环境：windows11、Vue2、Cesium1.92——1.118、Chrome125；

设备型号：海康4G球机，支持双卡移动网络、支持网线连接、支持云台控制旋转；

网络设置：开发环境与摄像机处于同一局域网内。

2.功能需求

（1）实现监控视频流接入Cesium平台；

（2）实现监控视频的自定义远程控制。

3.硬件设备布设

（1）阅读硬件说明书，接通电源并使用网线连接球机；

（2）手机上安装海康互联APP，查看设备连接是否正常；

（3）初次连接网线，需要设置IP地址，通过APP视频画面中右上角【设置】按钮，进入设备设置画面，打开【高级配置】→【网络】→【基本配置】，输入开发环境局域网同网段的IPv4地址、子网掩码、默认网关，并配置DNS服务器，然后【保存场景】；

（4）完成IP地址配置后，可通过浏览器输入摄像机的IP地址登录，之后可以在浏览器中进行预览，配置等操作。

4.视频流获取

（1）获取RTSP

ONVIF Device Manager可以连接硬件设备，登录后可获取相应的RTSP视频流链接，相关工具上传至CSDN，有需要可自行至下连接下载。

https://download.csdn.net/download/weixin_51540717/89423358https://download.csdn.net/download/weixin_51540717/89423358

5.视频流推流

5.1 RTSPtoWebRTC（不推荐、赶时间可跳过）

RTSPtoWebRTC（go语言写的一个将RTSP转为WebRTC的开源库，使用门槛较高，不推荐使用）使用方法参考：

【扩展类】RTSP 视频流转 WebRTC 嵌入到 DataEase 仪表板播放 - FIT2CLOUD 知识库RTSP：实时流传输协议，多用于监控视频传输；市面上主流的监控机均采用此协议进行视频传输，可以理解为 “C/S” 架构，需要有专门的客户端来播放监控视频。如果想在 DataEase 仪表版中播放监控机的监控视频，需要将 RTSP 协议的视频转换为 FLV 或 HTTP 的播放地址；本文将介绍通https://kb.fit2cloud.com/?p=182 在config文件中配置ODM中获取的视频流地址，一般的形式如下：

{
  "server": {
    "http_port": ":8083", //前端端口号
    "ice_servers": ["stun:stun.l.google.com:19302"]
  },
  "streams": {
    "GIS": {
      "on_demand": false,
      "disable_audio": true,
       //url为RTSP视频流地址，其中username、password、IP替换成你自己的
      "url": "rtsp://username:password@IP:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1"
    }
  }
}

RTSPtoWeb & RTSPtoWebRTC & 自HTML播放-CSDN博客文章浏览阅读3.9k次，点赞4次，收藏16次。22_rtsptowebrtchttps://blog.csdn.net/qq_42878634/article/details/128662071

完成相关配置后，可网页打开localhost:8083预览视频流效果

5.2 webrtc-streamer

webrtc-streamer可以直接在前端播放rtsp流；代码量大幅减少，不需要二次转码，使用简单方便。开源工具链接如下。https://github.com/mpromonet/webrtc-streamer/releases/tag/v0.8.3https://github.com/mpromonet/webrtc-streamer/releases/tag/v0.8.3 下载解压后，双击运行文件夹内的webrtc-streamer.exe;

然后在浏览器中输入localhost:8000，出现下图所示即为部署完成。

6.webrtc-streamer视频流接入

（1）静态文件引入

从5.2下载的webrtc-streamer文件夹→html→libs中找到adapter.min.js和webrtcstreamer.js这两个文件，拷贝到Vue项目静态文件夹中。

然后在index.html中引入这两个文件：

（2）具体业务代码撰写

创建一个video视频标签，设置一个ID

 <!-- 视频元素  HTML视频标签 -->
<video id="videoPlane" autoplay width="900" height="900"></video>

撰写js代码，给video视频标签推流

//javascript 代码
//videoPlane：需要绑定的video控件ID
//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
this.webRtcServer = new WebRtcStreamer('videoPlane', location.protocol +'//127.0.0.1:8000')
//需要查看的rtsp地址         将username、password、IP替换为你自己的       
this.webRtcServer.connect('rtsp://username:password@IP:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1')