文章目录
前言
软件开发定制定制本篇章只针对官方提供个h5player工具，软件开发定制定制做播放和分屏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/，这个支持的格式也很多，不过需要支持
开始开发
代码比较简单，就直接上了，先看代码
<template> <div id="app"> <el-container> <el-row> <el-input v-model="code" placeholder="输入监控点编码" @change="onChangeCode"></el-input> <el-button @click="onSubmit">默认预览</el-button> <el-button @click="onTwoSubmit(2)">4分屏</el-button> <el-button @click="onTwoSubmit(4)">16分屏</el-button> <el-button @click="onTwoSubmit(8)">64分屏</el-button> </el-row> <el-row> <div id="player" style="width: 800px;height: 800px;"></div> </el-row> </el-container> </div></template>- 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下面
效果
问题点
- 官方提供的js文件不止一个，在初始化和播放时都会调用其他的js文件，那么就存在一个路径问题，我这里将所有的
js都放在了src同目录下的static下了，然后在src下，也有一个static目录，不过里面只放了一个h5player.min.js，这样在使用h5player.min.js时就能调用到其他js， - 在初始化播放器时，需要设置js的相对路径属性
szBasePath，所有的js都会添加这个路径前缀 - 海康视频，大部分是
h264编码，但也会存在h265的视频编码，如果使用hls是播放不了h265编码格式的视频的，所有，需要找一个方式，那就是使用官方提供的这个h5player - rtsp和rtmp比较麻烦，我是不想考虑的
然后这是ws流的对视频流的支持情况
我是个业余的前端，有什么不对还望指出