指5min内url链接没使用，链接作废，用了只要不刷新一直能用另外不能作为固定永久链接。因为一刷新wbscoket就断了ws取流预览官方教程：
或搜【视频】查找相关所需教程
https://hkrobot.hikvision.com/servlet/WBShow?action=sac&sysNum=145716889796196&wbId=-100&FromUserName=API_1ef74560646b43477658fce6b08e330d&question=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%9814%E3%80%81%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E6%B5%B7%E5%BA%B7%E7%A7%81%E6%9C%89%E5%8D%8F%E8%AE%AEws%E5%8F%96%E6%B5%81%E5%8F%8A%E5%8F%96%E6%B5%81url%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86&fid=&sId=781709&MsgType=workflow
取流url文档 ：https://open.hikvision.com/docs/docId?productId=5c67f1e2f05948198c909700&version=%2Ff95e951cefc54578b523d1738f65f0a1&tagPath=API%E5%88%97%E8%A1%A8-%E8%A7%86%E9%A2%91%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1-%E8%A7%86%E9%A2%91%E8%83%BD%E5%8A%9B#b5bd6fd9
预览用海康官方H5player播放器网页预览
https://hkrobot.hikvision.com/servlet/WBShow?action=sac&wbId=-100&sysNum=145716889796196&FromUserName=API_1ef74560646b43477658fce6b08e330d&sId=828889&subId=479621
歧义具体参考
http://www.taodudu.cc/news/show-1129118.html?action=onClick
海康h5 player播放器同时播放多画面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>H5playerVue</title>
<style>
* {
margin: 0;
padding: 0;
}
#player {
width: 100vw;
height: 100vh;
}
#app {
display: none;
}
.actions {
padding-left: 8px;
}
.ant-form-item {
margin-bottom: 8px;
}
.ant-btn {
margin-right: 2px;
}
.icon-wrapper {
position: relative;
padding-left: 20px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
left: 0;
}
::-webkit-media-controls {
display: none !important;
}
* {
margin: 0;
padding: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.player {
width: 25%;
height: calc(100vh / 3);
/* height: 100vh; */
}
</style>
</head>
<body>
<div id="app">
<div class="flex">
<div class="player" v-for="(player, index) in players.length" :id="'player' + index"></div>
</div>
</div>
<script src="./vue.js"></script>
<script src="./h5player.min.js"></script>
<script src="./axios.min.js"></script>
<script>
const MSE_IS_SUPPORT = false // 是否支持mse
const app = new Vue({
el: '#app',
// components: { Log },
data() {
return {
player: null,
players: [null, null, null, null, null, null, null, null, null, null, null, null],//播放画面个数实列
urls: [],
splitNum: 1,
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
url: null,
playback: {
rate: ''
},
muted: true
}
},
computed: {
mode: function () {
return this.tabActive === 'mse' ? 0 : 1
}
},
methods: {
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer(index) {
this.players[index] = new window.JSPlugin({
szId: 'player' + index,
szBasePath: './',
// iMaxSplit: 4,
iCurrentSplit: 1,
openDebug: true,
oStyle: {
borderSelect: '#000'
}
})
// 事件回调绑定
this.players[index].JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex)
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
},
windowEventOver: function (iWndIndex) {
//鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//全屏切换回调
console.log('fullScreen callback: ', bFull)
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
},
performanceLack: function () {
//性能不足回调
console.log('performanceLack callback: ')
}
})
},
arrangeWindow() {
let splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
},
e => {
console.error(e)
}
)
},
/* 预览&对讲 */
realplay(index) {
let player = this.players[index]
let playURL = this.urls[index]
let { mode } = this
index = player.currentWindowIndex
// response.data[0].playUrl
player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
console.log('realplay success')
},
e => {
console.error(e)
}
)
},
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
},
e => {
console.error(e)
}
)
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
},
e => {
console.error(e)
}
)
},
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => {
this.playback.rate = 1
console.log('frameForward success')
},
e => {
console.error(e)
}
)
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log('openSound success')
this.muted = false
},
e => {
console.error(e)
}
)
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log('closeSound success')
this.muted = true
},
e => {
console.error(e)
}
)
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => {
console.error(e)
}
)
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => {
console.log('capture success', imageType)
},
e => {
console.error(e)
}
)
},
recordStart(type) {
const codeMap = { MP4: 5, PS: 2 }
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => {
console.log('record start ...')
},
e => {
console.error(e)
}
)
},
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => {
console.log('record stoped, saving ...')
},
e => {
console.error(e)
}
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => {
console.log('enlarge start..., select range...')
},
e => {
console.error(e)
}
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => {
console.log('enlargeClose success')
},
e => {
console.error(e)
}
)
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index, openFlag)
console.log(
`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success' : 'failed'}`
)
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function (videoInfo) {
console.log('videoInfo:', videoInfo)
})
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function (time) {
console.log('osdTime:', new Date(time))
})
}
},
mounted() {
this.$el.style.setProperty('display', 'block')
this.init()
let self = this
// 接口为获取ws推流地址或手动填入测试
axios
.get(
'xx/',
{
params: {
streamType: 1,
protocol: 'ws'
}
}
)
.then(function (response) {
// handle success
let data = response.data
self.urls = response.data.map(item => {
return item.playUrl
})
console.log('地址', self.urls)
console.log(0, '获取结果', JSON.stringify(data))
for (let i = 0; i < self.players.length; i++) {
self.createPlayer(i)
self.realplay(i)
}
//
})
.catch(function (error) {
// handle error
console.log(3, error)
})
}
})
</script>
</body>
</html>
wss取流，如果用https访问，需要安装证书才能显示。
证书在超脑自带，替换对应ip 回车安装下。
https://192.168.xx.xx/nginxService/v1/download/InstallRootCert.exe
