海康威视&萤石摄像机现场/监控模式Vue开发
移动应用
浏览：1091 次
1、 设备激活（PC工具）
有很多激活方法。我只想谈谈电脑工具的激活
1.1 PC激活工具下载和安装
激活前，请确保相机和计算机位于同一局域网上并访问官方网站
海康威视官方网站：
导航：服务和支持工具软件海康威视工具（包括SADP、视频容量计算和其他工具）
下载地址：
1.png
下载后安装软件
1.png
1.2设备激活
打开软件会自动搜索局域网中的所有设备，因为我已经激活了这里的所有设备。选择非活动设备，右侧将提示您设置管理员密码并激活它们。如果失败一次，请退出该工具，重新打开并再次激活。
墨迹1_ LI.jpg
2、 帐户注册和添加设备；创建app
2.1账户注册
注册萤石开放平台账号：
2.1添加设备（PC）
进入开发者服务：
开发者服务>我的资源>我的设备>添加设备
输入序列号和验证码。序列号在机身标签上，萤石设备的验证码在机身上，海康设备的验证代码是在设备激活时定制的。
请参阅官方教程，了解如何将设备添加到移动应用程序：
3.1创建app
进入开发者服务：
开发人员服务>我的app
创建app后，可以获取app密钥
1.png
请务必保存AppKey和Secret，因为代码需要通过这两个获取AccessToken，然后使用AccessToken获取帐户中的设备信息
3、 Vue项目参考
3.1下载依赖文件UIKit.js
1.png
解压缩后，在项目中复制ezuikit.js
3.2 Vue简介和实现代码：
该项目使用@vue/cli 4.0.5构建
模板：
萤石视频监控应用于Vue实践</h1>
设备编号：｛｛liveRideo.deviceSerial||“”｝｝</p>
＜p＞设备名称：｛｛liveRideo.deviceName | |“”｝｝</p＞
播放地址：｛｛liveRideo.rtmpHd||“”｝｝</p>
选择日期：
选择开始时间：
＜div＞播放地址：｛｛this.SplMonitorUrl（this.MonitorParam）｝｝</div＞
脚本：
导入“jquery”
导入“../utils/ezuikit.js”//根据您自己的路径导入下载的ezuikit.js
从“axios”导入axios//vue的请求使用axios
从“Qs”导入Qs//axios的依赖项，用于转换字符串
从“时刻”导入时刻//时刻时间组件用于选择要观看的播放时间
导出默认值{
name:'HelloWorld'，
数据（）{
返回{
accessToken:“”，
//当前设备包括号码、播放地址等信息
liveRideo:｛｝，
//监控地址
监视器Url:“”，
beginDate:`${moment（）.format（'YYYYMMDD'）}000000'，
endDate:`$｛moment（）.format（'YYYYMMDD'）｝235959`，
//监视地址参数
监视器参数：{
Url:“”，//播放地址包含设备序列号
自动播放：“1”，//1-启用自动播放，不显示字段-关闭自动播放
音频：“1”，//1-打开音频，不显示字段-关闭音频
AccessToken:“”，//访问令牌，播放监控地址的必要参数
