vue集成海康h5player实现播放

前言

本篇章只针对官方提供个h5player工具，做播放和分屏demo。

当然本篇章也是针对已经接触了海康视频对接的开发者。

准备工作

视频demo

官方文档

API https://open.hikvision.com/docs/docId?productId=5c67f20bb254d61550c2f63e&version=%2F658c4efa2595486c9ff140401628ff41&curNodeId=39e50b5c0aa84b47995614c9a102b75f

官方工具

https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10&id=53a1d2fe6a6f4b34b7aaccd37cd9c73d

开源工具

Dplayer：https://dplayer.diygod.dev/，这个支持的格式也很多，不过需要MSE支持

开始开发

代码比较简单，就直接上了，先看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 请求工具
import http from '@/http/http2.js'
// 官方提供的播放工具
import '@/static/util/h5player.min.js'

export default {
  name: 'hik',
  data () {
    return {
      // 监控点编码
      code: '',
      // 播放器对象
      player: null
    }
  },
  mounted () {
// 页面加载初始化
    this.initPlayer()
  },
  methods: {

    /**
     * 初始化播放器
     */
    initPlayer () {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: 'player',
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: './static/util',

        // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
        iWidth: 600,
        iHeight: 400,

        // 分屏播放，默认最大分屏4*4
        iMaxSplit: 16,
        iCurrentSplit: 1,

        // 样式
        oStyle: {
          border: '#343434',
          borderSelect: '#FFCC00',
          background: '#000'
        }
      })
    },

    /**
     * 获取取流连接
     * @returns {*}
     */
    getPreviewUrl () {
      let tempCode = '61077001001320000018'
      if (this.code) {
        tempCode = this.code
      }
      const param = {
        'cameraIndexCode': tempCode,
        'streamType': 0,
        'protocol': 'ws',
        'transmode': 1
      }
// 这里
      return http.post('/ay-video-manage/video/monitor/getRealTimeMonitorVideo', param)
    },

    /**
     * 播放
     */
    play (index) {
      const _this = this
      this.getPreviewUrl().then(res => {
        if (res.status !== 200) {
          _this.$message.warning('获取视频流失败！')
          return
        }
        let preUrl = res.data.data.url
        const param = {
          playURL: preUrl,
          // 1：高级模式  0：普通模式，高级模式支持所有
          mode: 1
        }
        // 索引默认0
        if (!index) {
          index = 0
        }
        _this.player.JS_Play(preUrl, param, index).then(() => {
            // 播放成功回调
          console.log('播放成功')
        },
        (err) => {
          console.log('播放失败')
        })
      })
    },

    /**
     * 监控点更新
     * @param data
     */
    onChangeCode (data) {
      this.code = data
      this.play()
    },
    /**
     * 默认预览
     */
    onSubmit () {
      this.play()
    },

    /**
     * 分屏，这里我太懒了，就循环了一个视频流
     */
    onTwoSubmit (num) {
      const _this = this
      // 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格
      this.player.JS_ArrangeWindow(num).then(
        () => {
          // 循环取流
          for (let i = 0; i < num * num; i++) {
            _this.play(i)
          }
        },
        e => { console.error(e) }
      )
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

这里用的js是海康工具里下的

下载之后，将/bin目录下的文件复制到项目static下，这个工具的说明文档（API）在上一层的doc下面

效果

问题点

1. 官方提供的js文件不止一个，在初始化和播放时都会调用其他的js文件，那么就存在一个路径问题，我这里将所有的js都放在了src同目录下的static下了，然后在src下，也有一个static目录，不过里面只放了一个h5player.min.js，这样在使用h5player.min.js时就能调用到其他js，
2. 在初始化播放器时，需要设置js的相对路径属性szBasePath，所有的js都会添加这个路径前缀
3. 海康视频，大部分是h264编码，但也会存在h265的视频编码，如果使用hls是播放不了h265编码格式的视频的，所有，需要找一个方式，那就是使用官方提供的这个h5player
4. rtsp和rtmp比较麻烦，我是不想考虑的

然后这是ws流的对视频流的支持情况

我是个业余的前端，有什么不对还望指出