海康威视H5无插件方式显示WSS协议的视频的笔记

2024-03-13 22:12

本文主要是介绍海康威视H5无插件方式显示WSS协议的视频的笔记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

由于要在麒麟桌面系统的浏览器也能显示视频,以前的插件方式就不行了。

一、从官网下载文档和demo

打开官网https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
下载H5开发文件和demo

二、放入我的vue2的项目中

把demo中的相关文件复制到我的public的utils目录下,同时在src下的utils目录也放一份h5player.min.js

三、在index.html中引入

四、在显示视频的vue组件中引入

并加入div
<div id="player" style="width: 100%; height: 700px;"></div>

五、这是我的部分代码片段

注意其中的szBasePath路径要写正确,为相对路径,对应src下的utils里的

	   //初始化播放器initPlayer () {this.player = new window.JSPlugin({// 需要英文字母开头 必填szId: 'player',// 必填,引用H5player.min.js的js相对路径szBasePath: '../../../utils',// 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高iWidth: 600,iHeight: 400,// 分屏播放,默认最大分屏4*4iMaxSplit: 16,iCurrentSplit: 2,// 样式oStyle: {border: '#343434',borderSelect: '#FFCC00',background: '#000'}})},
/*** 播放*/play(index, cameraIndexCode) {const _this = thislet params = {cameraIndexCode: cameraIndexCode,protocol: 'wss'}let preUrl = ''const loading = this.$loading({ lock: true });videoApi.getPreviewURL(params).then(res => {if (!res) {this.$message.error('获取取流地址失败');return;}preUrl = res;const param = {playURL: preUrl,// 1:高级模式  0:普通模式,高级模式支持所以mode: 1//1}// 索引默认0if (!index) {index = 0}_this.player.JS_Play(preUrl, param, index).then(() => {this.curVideoWindowIndex = indexloading.close();console.log('播放成功')},(err) => {loading.close();console.log('播放失败'+JSON.stringify(err))})}).catch((e) => {loading.close();this.$message.error('未获取到相关信息。'+e.message);return '';});},/* 回放 */playback(index, cameraIndexCode, beginTime, endTime) {let playURL = "";let beginStr = this.$moment(beginTime).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');let endStr = this.$moment(endTime).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');let params = {cameraIndexCode: cameraIndexCode,protocol: 'wss',beginTime: beginStr,endTime: endStr}const loading = this.$loading({ lock: true });videoApi.getPlaybackData(params).then(res => {if(!res || !res.url){this.$message.error('数据不存在');return}playURL = res.urllet mode = 1let d1 = this.$moment(beginTime).format('YYYY-MM-DDTHH:mm:ss[Z]');let d2 = this.$moment(endTime).format('YYYY-MM-DDTHH:mm:ss[Z]');this.player.JS_Play(playURL, { playURL, mode }, index, d1, d2).then(() => {this.curVideoWindowIndex = indexloading.close();console.log('playbackStart success')},e => { loading.close();console.error(e) })}).catch((e) => {loading.close();this.$message.error('未获取到相关信息。'+e.message);return '';});},

六、后端部分JAVA代码

可先参考下载的JAVA代码

@Data
public class HaiKangSearchDTO {public String cameraIndexCode;public String protocol;@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "GMT+8")@ApiModelProperty("回放查询起始时间")public Date beginTime;@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "GMT+8")@ApiModelProperty("回放查询结束时间")public Date endTime;
}
//请求回放视频的相关信息
ArtemisConfig config = new ArtemisConfig();config.setHost(outerVideoConfig.getIp()+":"+outerVideoConfig.getPort()); // 代理API网关nginx服务器ip端口config.setAppKey(outerVideoConfig.getAppkey());config.setAppSecret(outerVideoConfig.getSecret());final String getCamsApi = ARTEMIS_PATH + "/api/video/v2/cameras/playbackURLs";Map<String, String> paramMap = new HashMap<String, String>();paramMap.put("cameraIndexCode", dto.getCameraIndexCode());paramMap.put("recordLocation", "1");paramMap.put("transmode", "1");paramMap.put("protocol", dto.getProtocol());paramMap.put("beginTime", beginTimeString);paramMap.put("endTime", endTimeString);String body = JSON.toJSON(paramMap).toString();Map<String, String> path = new HashMap<String, String>(2) {{put("https://", getCamsApi);}};String resultStr = ArtemisHttpUtil.doPostStringArtemis(config, path, body, null, null, "application/json");

七、其它

注意,因为我的系统是https的,所以请求的protocol为wss,如何海康的请求地址是https但却是IP地址,而不是域名形式,则不能显示视频。需要手动在麒麟系统的奇安信浏览器导入海康的证书。

这篇关于海康威视H5无插件方式显示WSS协议的视频的笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806355

相关文章

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文