文章目录
- 前言
- 一、在乐橙云平台上注册账号并添加设备创建应用
- 二、利用云平台的api获取到前端展示需要的相关信息
- 三、前端页面展示内容
- 总结
前言
前段时间对接了大华摄像头,在此做一次总结,总体思路是:把大华摄像头绑定到乐橙云平台上,利用云平台的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”表示高清。
更多内容可以参考指南。
总结
对接大华摄像头主要是在乐橙云平台的基础上对接的,差不多是平台完成了这个功能,而我这边只是利用了平台的这个工具而已,有很大的局限性,对摄像头更详细的信息并没有深入了解,还是停留在了使用的阶段,就此做一下记录。
参考案例