iframe嵌入海康威视摄像头监控视频画面

前言：海康威视有非常好的开放平台支持(海康开放平台)，如遇到技术问题，可以先花点时间在开放平台视频教程板块学习一下。直接问客服可能会比较懵，而且sdk客服和api客服互相分离，一开始可能都不知道问谁。

在开放平台上，海康摄像头监控支持主要分为两种：sdk和api。sdk是硬件系统，直接对接单个摄像头设备；api是软件系统，对接的是海康摄像头统一管理平台。我收到的需求是统一处理公司一百多个摄像头监控视频，所以选择综合安防管理平台api。

登录后下载视频WEB插件V1.5.3：

解压后的目录及文件构成如下：

打开bin目录，安装VideoWebPlugin.exe插件。

打开demo目录，运行webs.exe插件。由于我们需要用iframe标签将监控画面嵌入我们的项目网页中，所以需要用到的是demo_embedded_for_iframe.html和demo_for_iframe.html两个文件, 其中_embedded被嵌入到了_iframe文件中，后续需要修改这两个文件中的部分参数：

在配置前，需要确保公司的综合安防管理平台和运行管理中心可访问。运行webs.exe后，浏览器输入http://127.0.0.1/demo_for_iframe.html，可以打开如下页面：

必须配置的参数为：

初始化参数：

{
    "argument": {
        "appkey": "",      // 购买海康摄像头后，海康威视提供的身份标识
        "ip": "",   // 综合安防管理平台的ip地址，直接写ip，不要加https
        "port": 443   // 默认为443
}

appkey如何查找？我其实也费了一番工夫，主要参考以下视频：

除了appkey, 要获取播放参数中必需的cameraIndexCode，还需要appSecret这个值。以下是我根据视频教程找到的方法：运行管理中心 - 状态监控 - 搜索artemis - api网关artemis  - 选项卡api管理 - 合作方管理  - 合作方key和合作方secret。

运行管理中心也是必须的，不知道可以问公司相关维护人员。

必须配置的播放参数为cameraIndexCode, 查找办法为：运行管理中心 - 状态监控 - 搜索artemis - api网关artemis  - 选项卡api管理 - 查询监控点 - 在线调试 - 认证信息 - 输入appkey和appsecret  - body改为{ "pageNo": 1, "pageSize": 100} - 发送请求 -拷贝json文件 - 找到cameraIndex

pageSize可以改大一点，如果你公司购买的海康摄像头比较多的话。

把上述配置参数填到demo_for_iframe.html页面中，就可以播放监控视频了。

在项目页面中，通过iframe标签，引入demo_for_iframe.html：<iframe src="http://127.0.0.1/demo_for_iframe.html
" style="width: 500px; height: 400px">。(不要忘记给iframe设置宽高哦)