前言

前段时间对接了大华摄像头，在此做一次总结，总体思路是：把大华摄像头绑定到乐橙云平台上，利用云平台的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”表示高清。
更多内容可以参考指南。