下载插件

打开海康开放平台，下载[h5player](海康开放平台 (hikvision.com))

导入插件

将下载好的插件按照图片结果在放入public，不要改变h5player中的任何文件位置 在index.html引入插件

<script src='/h5player/h5player.min.js'></script>

生成签名

签名字符串由Http Method、headers、Url(指path+query+bodyForm)组成。以AppSecret为密钥，使用HmacSHA256算法对签名字符串生成消息摘要，对消息摘要使用BASE64算法生成签名（签名过程中的编码方式全为UTF-8）。

 // 生成签名的规则顺序 没有的值就跳过
 HTTP METHOD + "\n" +
 Accept + "\n" +     //建议显示设置 Accept Header，部分 Http 客户端当 Accept 为空时会给 Accept
 设置默认值：*/*，导致签名校验失败。
 Content-MD5  + "\n" +
 Content-Type + "\n" +
 Date + "\n" +
 Headers +
 Url
 // 封装签名函数
 const httpAuth = async (method, url, data) => {
  const key = '你的key'
  const secret = '你的密钥'
  const Accept = '*/*'
  const contentType = 'application/json'
  const string = method + '\n' + Accept + '\n' + contentType + '\n' + 'x-ca-key:' + key + '\n' + url
  const signTrue = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(string, secret))
  if (method === 'POST') {
    return await Axios.post(url, data, {
      headers: {
        'Accept': Accept,
        'Content-Type': contentType,
        'X-Ca-Key': key,
        'X-Ca-Signature': signTrue,
        // 注意：参与headers签名计算的header的key转换为小写字母
        // 按照字典排序后多个key之间使用英文逗号分割，组成字符串
        // 详情可看文档:[海康开放平台 (hikvision.com)](https://open.hikvision.com/docs/docId?productId=5c67f1e2f05948198c909700&version=%2Ff95e951cefc54578b523d1738f65f0a1&tagPath=%E5%8D%8F%E8%AE%AE%E6%A6%82%E8%BF%B0-%E6%8E%A5%E5%8F%A3-%E8%B0%83%E7%94%A8%E8%AE%A4%E8%AF%81)
        'X-Ca-Signature-Headers': 'x-ca-key',
      },
    })
  }
}