Vue项目接入海康威视智能应用平台监控摄像头全过程分享

原创

已于 2023-12-01 09:14:08 修改 · 1.2w 阅读

标签

#vue.js #视频 #经验分享

收录于

于 2023-04-14 16:31:11 首次发布

文章介绍了如何在前端项目中对接天目慧眼系统（基于海康威视智能应用平台），通过调用API获取摄像头资源和预览URL，选择ws协议解决跨域问题，并使用H5player在Vue项目中实现监控视频的预览和播放功能，包括错误处理和全屏切换回调等交互功能。

最近项目需要对接天目慧眼系统（基于海康威视智能应用平台），获取几个监控点的摄像头并展示在前端，这里用到的api就两个：/api/resource/v1/cameras分页获取监控点资源、/api/video/v1/cameras/previewURLs获取监控点预览取流URL。

首先，我们需要获取摄像头IP和端口号，还有AK/SK(AK(Access Key ID)：访问密钥ID。与私有访问密钥关联的唯一标识符；访问密钥ID和私有访问密钥一起使用，对请求进行加密签名。SK(Secret Access Key)：与访问密钥ID结合使用的密钥，对请求进行加密签名，可标识发送方，并防止请求被修改。)

其次，使用官方提供的OpenAPI接口测试工具(见下图中5)测试所需接口是否正常返回，正常的话继续使用官方提供的H5player(见下图中4)验证上一步返回的监控点预览取流URL是否可以预览。这里我研究了很久，想仅通过前端拼接请求头等信息直接获取监控点预览取流URL，但最后人工客服说了目前只能保证postman能调通接口，不能保证通过此方式请求到接口，还是得通过后端集成官方提供的OpenAPI 安全认证库 (见下图中6)，然后前端调用后端接口获取相应信息。