|
|
|
|
@ -1,5 +1,6 @@ |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"> |
|
|
|
|
|
|
|
|
|
<head> |
|
|
|
|
<meta charset="UTF-8"> |
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
|
@ -16,13 +17,15 @@ |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
padding: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
|
display: flex; |
|
|
|
|
padding: 0 0px !important; |
|
|
|
|
margin: 0!important; |
|
|
|
|
margin: 0 !important; |
|
|
|
|
max-width: none; |
|
|
|
|
height: 100vh; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.real-container, |
|
|
|
|
.record-container { |
|
|
|
|
width: 45%; |
|
|
|
|
@ -30,18 +33,22 @@ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
.has-success .valid-feedback{ |
|
|
|
|
|
|
|
|
|
.has-success .valid-feedback { |
|
|
|
|
display: unset; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cursor-pointer { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-group a { |
|
|
|
|
text-decoration: none; |
|
|
|
|
color: #13425c; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<div class="alert alert-dismissible alert-primary" style="display: none;"> |
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button> |
|
|
|
|
@ -50,7 +57,8 @@ |
|
|
|
|
<!-- 右侧固定小弹窗 --> |
|
|
|
|
<div style="position: fixed; right: 0; top: 60px; width: 250px;display: none;"> |
|
|
|
|
<p style="font-size: 20px;"> |
|
|
|
|
<button type="button" class="btn btn-outline-secondary"><a href="/demo_api.html">点击跳转到功能api-demo页面</a></button> |
|
|
|
|
<button type="button" class="btn btn-outline-secondary"><a |
|
|
|
|
href="/demo_api.html">点击跳转到功能api-demo页面</a></button> |
|
|
|
|
</p> |
|
|
|
|
<div class="platform-info"> |
|
|
|
|
大华平台信息 |
|
|
|
|
@ -87,13 +95,14 @@ |
|
|
|
|
<!-- <button type="button" class="btn btn-outline-primary" id="talk-close-btn">关闭对讲</button> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="record-container"> |
|
|
|
|
录像回放： |
|
|
|
|
<div id="ws-record-player" style="height: 500px; margin-bottom: 20px;"></div> |
|
|
|
|
<div style="display: flex;"> |
|
|
|
|
<!-- 日期 --> |
|
|
|
|
<input style="width:140px;" type="date" id="date" class="form-control" id="record-date" value="2024-09-17"/> |
|
|
|
|
<input style="width:140px;" type="date" id="date" class="form-control" id="record-date" |
|
|
|
|
value="2024-09-17" /> |
|
|
|
|
<button style="margin:0 5px" type="button" class="btn btn-outline-primary" id="record-btn">录像回放</button> |
|
|
|
|
<button type="button" class="btn btn-outline-primary" id="close-record">关闭录像</button> |
|
|
|
|
<!-- <button type="button" class="btn btn-outline-primary" id="close-record">录像下载接口</button> --> |
|
|
|
|
@ -105,7 +114,7 @@ |
|
|
|
|
<script type="module"> |
|
|
|
|
//获取参数real |
|
|
|
|
let isReal = window.location.href.indexOf('real') !== -1 ? true : false; |
|
|
|
|
if(isReal){ |
|
|
|
|
if (isReal) { |
|
|
|
|
document.getElementsByClassName('record-container')[0].style.display = 'none'; |
|
|
|
|
document.getElementById('real-title').style.display = 'none'; |
|
|
|
|
document.getElementById('real-btn-box').style.display = 'none'; |
|
|
|
|
@ -114,7 +123,7 @@ |
|
|
|
|
readDom.style.marginLeft = '0px'; |
|
|
|
|
document.getElementById('ws-real-player').style.marginBottom = '0px'; |
|
|
|
|
document.getElementById('ws-real-player').style.height = '100%'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// record-date默认今日 |
|
|
|
|
@ -122,15 +131,15 @@ |
|
|
|
|
let cameraInfo; |
|
|
|
|
let recordInfo; |
|
|
|
|
//接收消息 |
|
|
|
|
window.addEventListener('message', function(event) { |
|
|
|
|
window.addEventListener('message', function (event) { |
|
|
|
|
console.log('接收到消息：', event.data); |
|
|
|
|
if (event.data === 'reload') { |
|
|
|
|
location.reload() |
|
|
|
|
}else if (event.data.type ==='startVideo') { |
|
|
|
|
} else if (event.data.type === 'startVideo') { |
|
|
|
|
cameraInfo = event.data.data; |
|
|
|
|
playReal() |
|
|
|
|
} |
|
|
|
|
else if (event.data.type ==='playRecord') { |
|
|
|
|
else if (event.data.type === 'playRecord') { |
|
|
|
|
recordInfo = event.data.data; |
|
|
|
|
playRecord() |
|
|
|
|
} |
|
|
|
|
@ -167,7 +176,7 @@ |
|
|
|
|
realPortDom.value = wsplayerParam.realPort |
|
|
|
|
recordPortDom.value = wsplayerParam.recordPort |
|
|
|
|
renderDom() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import PlayerManager from './icc/PlayerManager.js' |
|
|
|
|
// 初始化播放器 |
|
|
|
|
var realPlayer = new PlayerManager({ |
|
|
|
|
@ -178,11 +187,11 @@ |
|
|
|
|
showControl: true, /** 是否显示工具栏，默认显示 **/ |
|
|
|
|
prefixUrl: 'dahua/lib', /** 解码库所在位置的前缀 **/ |
|
|
|
|
receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */ |
|
|
|
|
switch(methods) { |
|
|
|
|
switch (methods) { |
|
|
|
|
case 'initializationCompleted': |
|
|
|
|
console.log('初始化完成') |
|
|
|
|
realPlayer.setPlayerAdapter("stretching") |
|
|
|
|
if(isReal) window.parent.postMessage({type: 'startVideo'}, '*') |
|
|
|
|
if (isReal) window.parent.postMessage({ type: 'startVideo' }, '*') |
|
|
|
|
// playReal() |
|
|
|
|
// 初始化完成，可调用播放方法（适用于动态加载解码库） |
|
|
|
|
// 若回调未触发时就使用实时预览/录像回放，则无法播放。 |
|
|
|
|
@ -194,6 +203,7 @@ |
|
|
|
|
console.log(data.selectIndex) // 窗口序号，从 0 |
|
|
|
|
break; |
|
|
|
|
case "realSuccess": // 实时预览成功 |
|
|
|
|
window.parent.postMessage({type: 'realSuccess'}, '*') |
|
|
|
|
console.log("实时预览成功") |
|
|
|
|
break; |
|
|
|
|
case "realError": // 实时预览失败 |
|
|
|
|
@ -201,7 +211,7 @@ |
|
|
|
|
break; |
|
|
|
|
case "notifyTalk": |
|
|
|
|
// 点击窗口上的对讲按钮触发的事件回调 |
|
|
|
|
console.log("notifyTalk", data) |
|
|
|
|
console.log("notifyTalk", data) |
|
|
|
|
case "talkError": // 对讲失败 |
|
|
|
|
console.log("对讲失败"); |
|
|
|
|
break; |
|
|
|
|
@ -214,7 +224,7 @@ |
|
|
|
|
case 'closeVideo': // 视频关闭回调 |
|
|
|
|
// 点击关闭按钮引发的视频关闭进行提示 |
|
|
|
|
// 切换视频引发的视频关闭不进行提示 |
|
|
|
|
if(!data.changeVideoFlag) { |
|
|
|
|
if (!data.changeVideoFlag) { |
|
|
|
|
console.log(`窗口${data.selectIndex}的视频已关闭`) |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
@ -226,7 +236,7 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 流地址方式播放实时预览 |
|
|
|
|
function playReal() { |
|
|
|
|
let wsURL = `ws://59.47.183.182:9100` |
|
|
|
|
@ -267,7 +277,7 @@ |
|
|
|
|
rtspURL, |
|
|
|
|
wsURL, |
|
|
|
|
audioType, |
|
|
|
|
gbDevice: Boolean(Number(gbDevice)), // 广播 |
|
|
|
|
gbDevice: Boolean(Number(gbDevice)), // 广播 |
|
|
|
|
channelId |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
@ -286,7 +296,7 @@ |
|
|
|
|
showControl: true, /** 是否显示工具栏，默认显示 **/ |
|
|
|
|
prefixUrl: 'dahua/lib', /** 解码库所在位置的前缀 **/ |
|
|
|
|
receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */ |
|
|
|
|
switch(methods) { |
|
|
|
|
switch (methods) { |
|
|
|
|
case 'initializationCompleted': |
|
|
|
|
// 初始化完成，可以调用拉流方法，实现播放器加载后立即显示画面 |
|
|
|
|
break; |
|
|
|
|
@ -299,7 +309,7 @@ |
|
|
|
|
case "recordFinish": // 录像回放完成 |
|
|
|
|
console.log("录像回放完成"); |
|
|
|
|
break; |
|
|
|
|
// 拖拽时间戳的回调 |
|
|
|
|
// 拖拽时间戳的回调 |
|
|
|
|
case 'switchStartTime': |
|
|
|
|
// data.timeStamp 时间戳 |
|
|
|
|
// data.channelData 通道信息 |
|
|
|
|
@ -322,19 +332,19 @@ |
|
|
|
|
case 'closeVideo': // 视频关闭回调 |
|
|
|
|
// 点击关闭按钮引发的视频关闭进行提示 |
|
|
|
|
// 切换视频引发的视频关闭不进行提示 |
|
|
|
|
if(!data.changeVideoFlag) { |
|
|
|
|
if (!data.changeVideoFlag) { |
|
|
|
|
console.log(`窗口${data.selectIndex}的视频已关闭`) |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case 'statusChanged': // 视频状态发生改变 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
case 'errorInfo': // 错误信息汇总 |
|
|
|
|
console.log(data, "可打印查看错误消息"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 流地址方式播放录像回放 |
|
|
|
|
const playRecord = () => { |
|
|
|
|
let records = recordInfo.records; |
|
|
|
|
@ -367,15 +377,15 @@ |
|
|
|
|
}, // 选传, 通道信息 |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getDom('.btn-close').addEventListener('click', () => { |
|
|
|
|
getDom('.alert-dismissible').style.display = 'none' |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getDom('#real-btn').addEventListener('click', () => { |
|
|
|
|
//向父窗口发送消息 |
|
|
|
|
window.parent.postMessage({type: 'startVideo'}, '*') |
|
|
|
|
window.parent.postMessage({ type: 'startVideo' }, '*') |
|
|
|
|
// playReal() |
|
|
|
|
}) |
|
|
|
|
// getDom('#talk-btn').addEventListener('click', () => { |
|
|
|
|
@ -387,7 +397,7 @@ |
|
|
|
|
// }) |
|
|
|
|
getDom('#record-btn').addEventListener('click', () => { |
|
|
|
|
let date = getDom('#date').value; |
|
|
|
|
window.parent.postMessage({type:'playRecord',date}, '*') |
|
|
|
|
window.parent.postMessage({ type: 'playRecord', date }, '*') |
|
|
|
|
// playRecord() |
|
|
|
|
}) |
|
|
|
|
getDom('#close-real').addEventListener('click', e => { |
|
|
|
|
@ -405,8 +415,8 @@ |
|
|
|
|
platform: '4077', |
|
|
|
|
realPort: isHttp ? '4079' : '4081', |
|
|
|
|
recordPort: isHttp ? '4080' : '4082', |
|
|
|
|
real_wsUrl: `${isHttp ? 'ws': 'wss'}://124.160.33.135:${isHttp ? '4079' : '4081'}`, // 实时预览ws地址 |
|
|
|
|
record_wsUrl: `${isHttp ? 'ws': 'wss'}://124.160.33.135:${isHttp ? '4080' : '4082'}` |
|
|
|
|
real_wsUrl: `${isHttp ? 'ws' : 'wss'}://124.160.33.135:${isHttp ? '4079' : '4081'}`, // 实时预览ws地址 |
|
|
|
|
record_wsUrl: `${isHttp ? 'ws' : 'wss'}://124.160.33.135:${isHttp ? '4080' : '4082'}` |
|
|
|
|
} |
|
|
|
|
ipDom.value = wsplayerParam.ip |
|
|
|
|
platformDom.value = wsplayerParam.platform |
|
|
|
|
@ -422,8 +432,8 @@ |
|
|
|
|
platform: platformDom.value, |
|
|
|
|
realPort: realPortDom.value, |
|
|
|
|
recordPort: recordPortDom.value, |
|
|
|
|
real_wsUrl: `${isHttp ? 'ws://': 'wss://'}${ipDom.value}:${realPortDom.value}`, // 实时预览ws地址 |
|
|
|
|
record_wsUrl: `${isHttp ? 'ws://': 'wss://'}${ipDom.value}:${recordPortDom.value}` |
|
|
|
|
real_wsUrl: `${isHttp ? 'ws://' : 'wss://'}${ipDom.value}:${realPortDom.value}`, // 实时预览ws地址 |
|
|
|
|
record_wsUrl: `${isHttp ? 'ws://' : 'wss://'}${ipDom.value}:${recordPortDom.value}` |
|
|
|
|
} |
|
|
|
|
localStorage.wsplayerParam = JSON.stringify(wsplayerParam) |
|
|
|
|
renderDom() |
|
|
|
|
@ -448,7 +458,8 @@ |
|
|
|
|
// getDom('#audioType').disabled = true |
|
|
|
|
// getDom('#gbDevice').disabled = true |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
</html> |
junhong
17 hours ago