文章目錄
- 前言
- 一、在樂橙雲平台上新增賬號并添加裝置建立應用
- 二、利用雲平台的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: '', // 封面圖url
autoplay: 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”表示高清。
更多内容可以參考指南。
總結
對接大華攝像頭主要是在樂橙雲平台的基礎上對接的，差不多是平台完成了這個功能，而我這邊隻是利用了平台的這個工具而已，有很大的局限性，對攝像頭更詳細的資訊并沒有深入了解，還是停留在了使用的階段，就此做一下記錄。
參考案例
![AI美顔SDK算法詳解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)