海康威视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

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

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文件的插件