前言

前段时间对接了大华摄像头，在此做一次总结，总体思路是：把大华摄像头绑定到乐橙云平台上，利用云平台的api来获取到kitToken等信息，最终拼接成一个url，通过配置ImouPlayer，放在一个div中实现。

提示：以下是本篇文章正文内容，案例可供参考

一、在乐橙云平台上注册账号并添加设备创建应用

乐橙云平台
在乐橙云平台上进行账号注册和登录并添加设备创建应用。

二、利用云平台的api获取到前端展示需要的相关信息

轻应用开发指南
利用postman导入乐橙api包
下载imouplayer.js
然后就可以利用这些api获取到设备的kitToken

三、前端页面展示内容

根据轻应用开发指南中的轻应用组件提示开发前端页面：

<script src="./imouplayer.js"></script><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, intial-scale=1, maxium-scale=1, user-scalable=no"><title>ImouPlayer</title><script src="./imouplayer.js"></script>
</head>
<body><div id="app"></div>
</body>
</html>

// 添加DOM容器
const player = new ImouPlayer('#app');
// 播放器初始化
player.setup({src: [{url: 'imou://open.lechange.com/5A05BD4PAJE237E/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_54f8452ce4e14795b98b965ac11d728d', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址width: 760, // 播放器宽度height: 400, // 播放器高度poster: '', // 封面图urlautoplay: false, // 是否自动播放controls: true, // 是否展示控制栏
});
// 播放
player.play();
// 暂停
player.pause();
// 停止播放
player.stop();
// 销毁播放器
player.destroy();
// 进入全屏
player.setFullScreen();
// 退出全屏
player.exitFullScreen();
// 设置音量
player.setVolume(0.5);
// 设置多屏
player.setMultiScreen(4);

其中url: 'imou://open.lechange.com/5A05BD4PAJE237E/0/1?streamId=1’中，“5A05BD4PAJE237E”就是设备序列号；“/0”中“0”就是设备通道号；“/1”中“1”就是播放类型，“1”表示直播，“2”表示录像回放；“streamId=1”中“1”表示标清，“0”表示高清。
更多内容可以参考指南。

总结

对接大华摄像头主要是在乐橙云平台的基础上对接的，差不多是平台完成了这个功能，而我这边只是利用了平台的这个工具而已，有很大的局限性，对摄像头更详细的信息并没有深入了解，还是停留在了使用的阶段，就此做一下记录。
参考案例

大华摄像头实现web端实时播放以及录像回放相关推荐

网络摄像头RTSP视频流WEB端实时播放实现方案
IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP. 下面我整理了自己实现的方案以及网上看到的一些方案一.FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览 ...
【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer
rtsp流-视频播放操作系统:Win10 vue版本:vue2 一. 方法必须将rtsp通过播放器插件/服务器/- 转换为 flv/webrtc/- 最新在线可用rtsp码流地址(可用flv播放 ...
基于python完成大华摄像头对货车逆行实时检查的二次开发
吐槽的地方.大华的摄像头逆行事件不能单独筛选出货车,所以没办法只有自己写东西实现. 注意事项:数据类型一定要对应C源代码SDK的排序否则获取的数据不对或获取不到.以下是逆行事件的数据结构及排序 cla ...
如何在VUE框架的WEB端实时播放海康威视、大华RTSP视频流？
背景如果你问一个前端技术人员,近几年最火的前端框架技术是什么,肯定会有人说VUE,确实VUE凭借其简单特性赢得了大家的喜爱,而近期公司有个项目,需要在VUE框架网页上播放RTSP实时视频. 小编对目 ...
大华摄像头使用外网进行访问管理
设置大华摄像头外网访问方式有两种情况: 一.摄像头直接和光猫连接不和路由器相连的情况这种情况下只要登录大华摄像头的管理端然后利用大华摄像头自己的DDNS设置配置好域名后则可以进行访问二.摄像头是连 ...
java对接海康威视SDK（win64、linux64），处理播放实时流转码，按时间回放功能，附海康威视最新3.0摄像头监控web端实例+插件
java对接海康威视SDK(win64.linux64),处理播放实时流转码,按时间回放功能准备工作遇到的坑调用步骤参数配置 DeviceEnums 初始化sdk 注册大华的sdk叫登陆海康 ...
java制作h5视频聊天_JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路。...
JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路. 2018-09-17 问题:大华IPC枪型摄像头需要在WEB中显示实时监控视频,官方提供的SDK只有C#的桌面程序访问方式. 解决 ...
WEB页面播放大华摄像头视频解决方案
目前在网页上播放大华摄像头视频,有如下2种途径: 1)首选获取摄像头的hls协议地址,H5可直接播放 2)获取摄像头rtsp协议地址,用ffmpeg转换成hls再播放近期做的一个项目,需要在WEB端 ...
JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路。
问题:大华IPC枪型摄像头需要在WEB中显示实时监控视频,官方提供的SDK只有C#的桌面程序访问方式. 解决思路: RTSP协议访问方式将RTSP流转换成hls文件在H5的video播放器中进行播放实 ...

大华摄像头实现web端实时播放以及录像回放

文章目录

前言

一、在乐橙云平台上注册账号并添加设备创建应用

二、利用云平台的api获取到前端展示需要的相关信息

三、前端页面展示内容

总结

大华摄像头实现web端实时播放以及录像回放相关推荐

最新文章

热门文章