一.后端提供个接口

后端需要提供一个接口给前端接口返回url给前端。具体实现参照海康威视文档https://open.hikvision.com/docs/7967cbf99e9b49ec899a5b5823f1ff4d 注意：
需要三个东西。appkey（综合安防管理平台提供的appkey）、secret（综合安防管理平台提供的secret）、ip（综合安防管理平台IP地址）。这三个东西可以后端写死也可以前端传进去，具体看业务需求。

参数列表：

海康视频对接 java hls 海康视频对接_html5


补充一下取流协议：

RTSP 实时串流协议（Real Time Streaming Protocol，RTSP）是一种网络应用协议，专为娱乐和通信系统的使用，以控制流媒体 服务器。该协议用于建立和控制终端之间的媒体会话。媒体服务器的客户端发布VCR命令，例如播放，录制和暂停，以便于实时控制从服务器到客户端（视频点播）或从客户端到服务器（语音录音）的媒体流。

RTMP 实时消息协议（英语：Real-Time Messaging Protocol，缩写RTMP）也称实时消息传输协议，是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。

HLS HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。

二.前端调接口获取URL

以我这边的后端接口为例：
我这里cameraIndexCode为必填，其他都是选填。
这里我传了两个参数：
protocol：返回的格式（根据不同需求，参考上面的参数表）
cameraIndexCode：监控设备编码

http://xxxxxx.com/artemis/getCameraPreviewURL?protocol=hls&cameraIndexCode=${t.row.resource_number}

返回值：

海康视频对接 java hls 海康视频对接_vue.js_02


注意：这个url是会过期的，我这边后端跟我说的是5分钟，不知道能不能调，有空的话可以去看看海康的后端接口是怎么写的。

三.播放

我这里使用的取流方式是HLS所以返回的URL后缀的m3u8，这种格式的文件不能直接播放。