머리말
이 장에서는 재생 및 분할 화면 데모를 위한 공식 h5player 도구만 제공합니다.
물론 이 챕터는 Hikvision 비디오 도킹을 이미 접한 개발자를 대상으로 합니다.
준비
비디오 데모
공식 문서
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 지원이 필요합니다.
개발 시작
코드는 비교적 간단합니다. 직접 가서 먼저 코드를 살펴보세요.
<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>
// 请求工具
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) }
)
}
}
}
여기서 사용된 js는 하이강툴에서 다운받은 것입니다.
다운로드 후 /bin디렉토리에 있는 파일을 프로젝트에 복사합니다 static.이 도구의 문서(API)는 상위 계층의 문서 아래에 있습니다.
효과
문제
- 공식 js 파일이 하나 이상 있고 초기화 및 재생시 다른 js 파일들이 호출되서 경로 문제가 있어서 다 같은 디렉토리
js아래에 다 넣었는데 그 밑에도 디렉토리가 있습니다 . , 하나만 배치되어 사용시 다른 js를 호출할 수 있도록 ,srcstaticsrcstatich5player.min.jsh5player.min.js - 플레이어를 초기화할 때 js의 상대 경로 속성을 설정해야 하며
szBasePath모든 js는 이 경로 접두사를 추가합니다. - 해강영상은 대부분 코딩이 되어있지만 영상코드
h264도 있기 때문에 코딩된 형식으로 재생이 안되는 영상을 사용하려면 방법을 찾아야 하는데, 바로 공식을 사용하는 것입니다.h265hlsh265h5player - rtsp와 rtmp가 더 번거롭고 생각하고 싶지 않습니다
다음은 비디오 스트림에 대한 ws 스트림 지원입니다.
저는 아마추어 프론트엔드입니다. 잘못된 점이 있으면 지적해 주세요.