监控添加16窗口

main
junhong 12 hours ago
parent 6ba9f4fb01
commit 390ea3260a
  1. 30
      public/dahua/demo.html
  2. 54
      src/views/large-screen/video.vue
  3. 2
      stats.html

@ -113,6 +113,8 @@
<script type="text/javascript" src="/dahua/lib/WSPlayer/WSPlayer.js"></script>
<script type="module">
//获取参数real
let SelectedNum = 0
let luNum = 1
let isReal = window.location.href.indexOf('real') !== -1 ? true : false;
if (isReal) {
document.getElementsByClassName('record-container')[0].style.display = 'none';
@ -135,9 +137,15 @@
console.log('接收到消息:', event.data);
if (event.data === 'reload') {
location.reload()
} else if (event.data.type === 'clear') {
SelectedNum = {playIndex: 0}
} else if (event.data.type === 'startVideo') {
cameraInfo = event.data.data;
playReal()
if (luNum == 1) {
playReal()
} else {
playReal(cameraInfo)
}
}
else if (event.data.type === 'playRecord') {
recordInfo = event.data.data;
@ -182,8 +190,8 @@
var realPlayer = new PlayerManager({
el: "ws-real-player", /** 实时预览容器id,创建多个播放器,传入不同的容器id即可 **/
type: 'real', /** real - 实时预览 record - 录像回放 **/
maxNum: 25, /** 一个播放器上限能播放的路数,可根据实际情况设置,支持 1 4 9 16 25 **/
num: 1, /** 初始化,页面显示的路数 **/
maxNum: 16, /** 一个播放器上限能播放的路数,可根据实际情况设置,支持 1 4 9 16 25 **/
num: 16, /** 初始化,页面显示的路数 **/
showControl: true, /** 是否显示工具栏,默认显示 **/
prefixUrl: 'dahua/lib', /** 解码库所在位置的前缀 **/
receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数,可以在以下回调函数里面做监听 */
@ -203,7 +211,7 @@
console.log(data.selectIndex) // 窗口序号,从 0
break;
case "realSuccess": // 实时预览成功
window.parent.postMessage({type: 'realSuccess'}, '*')
window.parent.postMessage({ type: 'realSuccess' }, '*')
console.log("实时预览成功")
break;
case "realError": // 实时预览失败
@ -216,9 +224,11 @@
console.log("对讲失败");
break;
case 'selectWindowChanged': // 选中的窗口发生改变
SelectedNum = data
console.log(data, "返回窗口信息")
break;
case 'windowNumChanged': // 播放器显示的路数发生改变
luNum = data
console.log(data, "返回显示的窗口数量")
break;
case 'closeVideo': // 视频关闭回调
@ -238,21 +248,22 @@
})
// 流地址方式播放实时预览
function playReal() {
function playReal(newVideo) {
let info = newVideo || cameraInfo;
let wsURL = `ws://59.47.183.182:9100`
let rtspURL = `${cameraInfo.url}?token=${cameraInfo.token}`.replace(/\$/g, "%24").replace(/&/g, "%26");
let rtspURL = `${info.url}?token=${info.token}`.replace(/\$/g, "%24").replace(/&/g, "%26");
let streamType = 1
let channelId = cameraInfo.channelId
let channelId = info.channelId
console.log('params :>> ', {
wsURL,
rtspURL,
streamType,
channelId
channelId,
});
realPlayer.realByUrl({
rtspURL, // 必传
wsURL, // 必传
selectIndex: 0, // 必传, 播放窗口号
selectIndex: SelectedNum.playIndex, // 必传, 播放窗口号
channelId, // 必传, 通道id
streamType, // 必传, 码流类型,
playerAdapter: 'stretching', // 选传, selfAdaption 自适应 | stretching 拉伸
@ -324,6 +335,7 @@
// }))
break;
case 'selectWindowChanged': // 选中的窗口发生改变
console.log(data, "返回窗口信息")
break;
case 'windowNumChanged': // 播放器显示的路数发生改变

@ -9,17 +9,33 @@ const state = reactive({
isShow: false
})
const switchCamera = (index) => {
state.currentCameraIndex = index;
startVideo();
if (index == 0 || !index) {
let video = document.getElementById('video')
video.contentWindow.postMessage({
type: 'clear',
}, '*')
for (let i = 1; i <= 16; i++) {
setTimeout(()=>{
state.currentCameraIndex = i;
startVideo();
if(i == 16) state.currentCameraIndex = 0;
},300)
}
} else {
state.currentCameraIndex = index;
startVideo();
}
}
const startVideo = () => {
let index = state.currentCameraIndex;
let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
let channelCode = state.cameraList[index] && state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
if (!channelCode) {
ElMessage({
message: '设备异常',
type: 'error'
})
// ElMessage({
// message: '',
// type: 'error'
// })
return;
}
getRtspUrl({
@ -107,20 +123,25 @@ onMounted(async () => {
"pageNum": 1,
"pageSize": 100,
}).then((res) => {
state.cameraList = res.data.pageData
const index = state.cameraList.findIndex(item => item.isOnline == 1);
state.currentCameraIndex = index
state.cameraList = [{
deviceName: '全部',
isOnline: '00'
}, ...res.data.pageData]
// const index = state.cameraList.findIndex(item => item.isOnline == 1);
// state.currentCameraIndex = index
}).catch((err) => {
});
//
window.addEventListener('message', (event) => {
console.log('event :>> ', event.data);
if (event.data.type === 'startVideo') {
startVideo();
switchCamera();
state.isShow = true
} else if (event.data.type === 'playRecord') {
playRecord(event.data.date);
} else if (event.data.type == "realSuccess") {
state.isShow = true
}
});
})
@ -139,8 +160,10 @@ defineExpose({
<div style="width:4.375rem;margin-right: 1.25rem;text-align: center;position: relative;">
<texttooltip :content="camera.deviceName" :class="state.currentCameraIndex === index ? 'wid202' : 'wid201'"
refName=" tooltipOverd"></texttooltip>
<el-tag style="scale: 0.7;position: absolute;top:-1.25rem;right:-.9375rem;border-radius: 1.25rem;"
:type="camera.isOnline == 1 ? 'success' : 'danger'">{{ camera.isOnline == 1 ? '在线' : '离线' }}</el-tag>
<el-tag v-if="camera.isOnline != '00'"
style="scale: 0.7;position: absolute;top:-1.25rem;right:-.9375rem;border-radius: 1.25rem;"
:type="camera.isOnline == 1 ? 'success' : 'danger'">{{ camera.isOnline == 1 ? '在线' :
'离线' }}</el-tag>
</div>
</div>
<!-- <template v-for="(camera, index) in state.cameraList" :key="index">
@ -154,7 +177,8 @@ defineExpose({
<iframe v-if="state.cameraList.length > 0" id="video" src="/dahua/demo.html?real=true"
style="width:100%;height:100%;" frameborder="0"></iframe>
</div>
<div v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..." v-loading="!state.isShow" class="camera-display">
<div v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..."
v-loading="!state.isShow" class="camera-display">
</div>
</div>
</template>

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save