1064 lines
31 KiB
Vue
1064 lines
31 KiB
Vue
<template>
|
||
<div id="player-main" :class="{'player-main1': pageBtn}">
|
||
<div id="player"></div>
|
||
<!-- 为每个窗口添加控制按钮容器 -->
|
||
<div
|
||
class="video-controls"
|
||
v-for="i in maxWindows"
|
||
:key="i"
|
||
:id="'controls-' + i"
|
||
:style="{ display: 'none' }"
|
||
>
|
||
<div class="controls-top">
|
||
<div class="top-left">{{ videoNameUp(i - 1) }}</div>
|
||
<div @click="stopPlay(i)" class="top-close">
|
||
关闭
|
||
<i class="el-icon-close"></i>
|
||
</div>
|
||
</div>
|
||
<div class="controls-bottom">
|
||
<div></div>
|
||
<div>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="`${talkbackBegin ? '结束' : '开始'}对讲`"
|
||
placement="top"
|
||
>
|
||
<div
|
||
class="bgImage talkback"
|
||
:class="{ talkback_active: talkbackBegin }"
|
||
@click="isTalkback(i)"
|
||
></div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="`${recordingBegin ? '结束' : '开始'}录制`"
|
||
placement="top"
|
||
>
|
||
<div class="bgImage transcribe" @click="isTranscribe(i)"></div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="dark" :content="`抓图`" placement="top">
|
||
<div class="bgImage screenshot" @click="capture('JPEG', i)"></div>
|
||
</el-tooltip>
|
||
|
||
<!-- <div>流畅</div> -->
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="`${!muted ? '关闭' : '开启'}音量`"
|
||
placement="top"
|
||
>
|
||
<div
|
||
@click="handleVolume(i)"
|
||
:class="!muted ? 'openVolume' : 'disableVolume'"
|
||
class="bgImage"
|
||
></div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
|
||
placement="top"
|
||
>
|
||
<div
|
||
class="bgImage"
|
||
:class="isFullScreen ? 'exitFullScreen' : 'fullScreen'"
|
||
@click="singleFullScreen(i)"
|
||
></div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="player-tool">
|
||
<el-tooltip class="item" effect="dark" :content="`默认`" placement="top">
|
||
<div class="bgImage splitscreen1" @click="onTwoSubmit(1)"></div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="dark" :content="`2x2`" placement="top">
|
||
<div class="bgImage splitscreen2" @click="onTwoSubmit(2)"></div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="dark" :content="`4x4`" placement="top">
|
||
<div class="bgImage splitscreen3" @click="onTwoSubmit(4)"></div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="dark" :content="`停止所有播放`" placement="top">
|
||
<div class="bgImage stopAll" @click="stopAllPlay"></div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
|
||
placement="top"
|
||
>
|
||
<div
|
||
class="bgImage"
|
||
:class="isFullScreen ? 'exitFullScreen' : 'fullScreen'"
|
||
@click="wholeFullScreen(i)"
|
||
></div>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="bg-001" v-if="pageBtn">
|
||
<div :class="{'page-box1': pageNo > 1}" @click="onPageClick('up')">
|
||
<div class="page-up"></div>
|
||
</div>
|
||
<div :class="{'page-box1': pageNo < pageSizeFlag}" @click="onPageClick('next')">
|
||
<div class="page-down"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 请求工具
|
||
// import http from "@/http/http2.js";
|
||
import {
|
||
getVideoItemInfoApi,
|
||
getTalkURLsApi,
|
||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||
import reloadImg from "@/assets/images/iscImage/reload.png";
|
||
import moment from "moment";
|
||
export default {
|
||
name: "hik",
|
||
props: ["devList", "type", "isIframe", "shrinkCloseFlag", "devListAll"],
|
||
data() {
|
||
return {
|
||
// 监控点编码
|
||
code: "",
|
||
// 播放器对象
|
||
player: null,
|
||
devH5List: [],
|
||
numCount: 2,
|
||
iWndIndex: 0,
|
||
maxWindows: 16, // 最大窗口数
|
||
recordingBegin: false,
|
||
muted: true,
|
||
talkbackBegin: false,
|
||
playback: {
|
||
startTime: "2023-08-16T00:00:00",
|
||
endTime: "2023-08-16T23:00:00",
|
||
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
|
||
seekStart: "2023-08-16T10:00:00",
|
||
rate: "",
|
||
},
|
||
isFullScreen: false,
|
||
isFullScreenAll: false,
|
||
randomNumber: "",
|
||
pageNo: 1,
|
||
pageBtn: false,
|
||
};
|
||
},
|
||
watch: {
|
||
//监听value的变化，进行相应的操作即可
|
||
devList: function (a, b) {
|
||
console.log("isc_plugin.vue获取到设备列表", a, b, this.devH5List);
|
||
if (a.length > 4) {
|
||
this.onTwoSubmit(4);
|
||
}
|
||
//a是value的新值，b是旧值
|
||
a.map((item, index) => {
|
||
if (index >= 16) return;
|
||
const row = {
|
||
...item,
|
||
eIndex: this.iWndIndex,
|
||
};
|
||
if (this.numCount == 1) {
|
||
this.play(row, this.iWndIndex);
|
||
} else if (a.length == 1) {
|
||
this.play(row, this.iWndIndex);
|
||
const findIndex = this.devH5List.findIndex(
|
||
(item) => item.eIndex == this.iWndIndex
|
||
);
|
||
if (findIndex != -1) {
|
||
this.devH5List.splice(findIndex, 1, row);
|
||
} else {
|
||
this.devH5List.push(row);
|
||
}
|
||
} else {
|
||
this.play(
|
||
{
|
||
...item,
|
||
eIndex: index,
|
||
},
|
||
index
|
||
);
|
||
}
|
||
});
|
||
if (a.length > 1) {
|
||
this.devH5List = a.map((item, index) => ({ ...item, eIndex: index }));
|
||
}
|
||
},
|
||
randomNumber: {
|
||
handler(newVal, oldVal) {
|
||
console.log("随机数变化了", newVal, oldVal);
|
||
// 使用选中事件来定位控制按钮
|
||
const wnd = document.querySelector(`#player #player-container-${this.iWndIndex}`);
|
||
if (wnd) {
|
||
const controls = document.getElementById(`controls-${this.iWndIndex + 1}`);
|
||
if (controls) {
|
||
const player_playVideo = wnd.querySelector(
|
||
`#player_playVideo${this.iWndIndex}`
|
||
);
|
||
if (player_playVideo.src || player_playVideo.poster) {
|
||
const find = this.devH5List.find(
|
||
(item, eIndex) => this.iWndIndex == eIndex
|
||
);
|
||
if (find) {
|
||
this.$emit("selectPlayVideo", {
|
||
...find,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
},
|
||
shrinkCloseFlag: function (newVal, b) {
|
||
console.log("新的值2222", newVal);
|
||
this.onTwoSubmit(this.numCount);
|
||
},
|
||
},
|
||
created() {
|
||
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
|
||
this.pageBtn = true;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.devH5List = this.devList.map((item, index) => ({
|
||
...item,
|
||
eIndex: index,
|
||
}));
|
||
console.log("我进来了", this.devList);
|
||
// 页面加载初始化`
|
||
this.initPlayer();
|
||
},
|
||
methods: {
|
||
onPageClick(type) {
|
||
if(type == "up") {
|
||
if(this.pageNo <= 1) return;
|
||
this.pageNo -= 1;
|
||
} else if(type == "next") {
|
||
console.log("pageNo", this.pageSizeFlag);
|
||
if(this.pageNo >= this.pageSizeFlag) return;
|
||
this.pageNo += 1;
|
||
}
|
||
const dataList = this.pageList;
|
||
this.devH5List = dataList.map((item, index) => ({
|
||
...item,
|
||
eIndex: index,
|
||
}));
|
||
this.devH5List.forEach((item) => {
|
||
this.play(item,item.eIndex);
|
||
})
|
||
console.log("dataList", dataList, this.pageNo);
|
||
},
|
||
// 关闭所有视频
|
||
stopAllPlay() {
|
||
// 调用播放器API停止所有实时播放
|
||
this.player.JS_StopRealPlayAll().then(
|
||
() => {
|
||
// 重置播放速率为0
|
||
this.playback.rate = 0;
|
||
console.log("stopAllPlay success");
|
||
// 遍历所有设备，清理对应的DOM元素
|
||
this.devH5List.forEach((item, index) => {
|
||
// 查找视频播放容器
|
||
const wnd = document.querySelector(`#player #player-container-${index}`);
|
||
if (wnd) {
|
||
// 移除控制栏的显示样式
|
||
const controls = document.getElementById(`controls-${index + 1}`);
|
||
if (controls) {
|
||
controls.classList.remove("video-controls_flex");
|
||
}
|
||
// 查找并移除播放器中的图片元素（封面或占位图）
|
||
const findIndex = Array.from(wnd.childNodes).findIndex(
|
||
(item) => item.localName == "img" || item.className == "classImg"
|
||
);
|
||
if (findIndex !== -1) {
|
||
wnd.removeChild(wnd.childNodes[findIndex]);
|
||
}
|
||
}
|
||
});
|
||
// 清空设备列表
|
||
this.devH5List = [];
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
// 关闭单个
|
||
stopPlay(currentWindowIndex, type) {
|
||
console.log("stopPlay11333", currentWindowIndex);
|
||
this.player.JS_Stop(currentWindowIndex - 1).then(
|
||
() => {
|
||
this.playback.rate = 0;
|
||
console.log("stop realplay success");
|
||
const wnd = document.querySelector(
|
||
`#player #player-container-${currentWindowIndex - 1}`
|
||
);
|
||
console.log(11223344, wnd);
|
||
if (wnd) {
|
||
const controls = document.getElementById(`controls-${currentWindowIndex}`);
|
||
console.log(1122334455, controls);
|
||
if (controls) {
|
||
controls.classList.remove("video-controls_flex");
|
||
}
|
||
const findIndex = Array.from(wnd.childNodes).findIndex(
|
||
(item) => item.localName == "img" || item.className == "classImg"
|
||
);
|
||
if (findIndex !== -1) {
|
||
wnd.removeChild(wnd.childNodes[findIndex]);
|
||
}
|
||
if (type == "delete") return;
|
||
// this.devH5List.splice(currentWindowIndex - 1, 1);
|
||
}
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
handleVolume(currentWindowIndex) {
|
||
if (this.muted) {
|
||
this.openSound(currentWindowIndex);
|
||
} else {
|
||
this.closeSound(currentWindowIndex);
|
||
}
|
||
},
|
||
/* 声音、抓图、录像 */
|
||
openSound(currentWindowIndex) {
|
||
this.player.JS_OpenSound(currentWindowIndex - 1).then(
|
||
() => {
|
||
console.log("openSound success");
|
||
this.muted = false;
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
closeSound(currentWindowIndex) {
|
||
this.player.JS_CloseSound(currentWindowIndex - 1).then(
|
||
() => {
|
||
console.log("closeSound success");
|
||
this.muted = true;
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
// 单个窗口全屏
|
||
singleFullScreen(currentWindowIndex) {
|
||
if (this.isFullScreenAll) {
|
||
this.wholeFullScreen();
|
||
return;
|
||
}
|
||
this.player.JS_FullScreenSingle(currentWindowIndex - 1).then(
|
||
() => {
|
||
console.log(`singleFullScreen success`);
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
// 整体窗口全屏
|
||
wholeFullScreen() {
|
||
this.player.JS_FullScreenDisplay(this.isFullScreenAll).then(
|
||
() => {
|
||
console.log(`wholeFullScreen success`);
|
||
this.isFullScreenAll = !this.isFullScreenAll;
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
isTalkback(currentWindowIndex) {
|
||
if (this.talkbackBegin) {
|
||
this.talkbackStop(currentWindowIndex);
|
||
} else {
|
||
this.talkbackStart(currentWindowIndex);
|
||
}
|
||
},
|
||
// 开始对讲
|
||
talkbackStart(currentWindowIndex) {
|
||
let player = this.player,
|
||
index = currentWindowIndex - 1;
|
||
console.log("record start ...1111", this.devH5List, player);
|
||
|
||
getTalkURLsApi({
|
||
protocol: "wss",
|
||
projectSn: this.devH5List[index].projectSn,
|
||
serialNumber: this.devH5List[index].serialNumber,
|
||
}).then((res) => {
|
||
const res2 = JSON.parse(res.result);
|
||
if (!res2.data) {
|
||
_this.$message.warning("获取url失败");
|
||
return;
|
||
}
|
||
console.log(res2.data.url);
|
||
|
||
const url = res2.data.url.replace("hrdl.zhgdyun.com", "sp.szjxj.com");
|
||
player
|
||
.JS_StartTalk(url, {
|
||
// irecordType: 1,
|
||
// cbStreamCB: this.streamcb,
|
||
})
|
||
.then(
|
||
() => {
|
||
this.$message.success("开始对讲");
|
||
this.talkbackBegin = true;
|
||
this.openSound(currentWindowIndex);
|
||
console.log("record start ...");
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
this.$message.error("对讲连接失败");
|
||
}
|
||
);
|
||
});
|
||
},
|
||
// 结束对讲
|
||
talkbackStop(currentWindowIndex) {
|
||
let player = this.player;
|
||
player.JS_StopTalk().then(
|
||
(res) => {
|
||
console.log("record stoped, saving ...", res);
|
||
this.talkbackBegin = false;
|
||
this.closeSound(currentWindowIndex);
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
isTranscribe(currentWindowIndex) {
|
||
if (this.recordingBegin) {
|
||
this.recordStop(currentWindowIndex);
|
||
} else {
|
||
this.recordStart("MP4", currentWindowIndex);
|
||
}
|
||
},
|
||
// 开始录制
|
||
recordStart(type, currentWindowIndex) {
|
||
const codeMap = { MP4: 5, PS: 2 };
|
||
//let options = {irecordType: 2, cbStreamCB: streamcb}
|
||
let player = this.player,
|
||
index = currentWindowIndex - 1,
|
||
fileName = `${moment().format("YYYYMMDDHHmmss")}.mp4`,
|
||
typeCode = codeMap[type];
|
||
|
||
player
|
||
.JS_StartSaveEx(index, fileName, typeCode, {
|
||
irecordType: 1,
|
||
cbStreamCB: this.streamcb,
|
||
})
|
||
.then(
|
||
() => {
|
||
this.$message.success("开始录制");
|
||
this.recordingBegin = true;
|
||
console.log("record start ...");
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
// 结束录制
|
||
recordStop(currentWindowIndex) {
|
||
let player = this.player,
|
||
index = currentWindowIndex - 1;
|
||
|
||
player.JS_StopSave(index).then(
|
||
(res) => {
|
||
console.log("record stoped, saving ...", res);
|
||
this.recordingBegin = false;
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
// 抓图
|
||
capture(imageType, currentWindowIndex) {
|
||
let player = this.player,
|
||
index = currentWindowIndex - 1;
|
||
|
||
player.JS_CapturePicture(index, "img", imageType).then(
|
||
() => {
|
||
console.log("capture success", imageType);
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
/**
|
||
* 初始化播放器
|
||
*/
|
||
initPlayer() {
|
||
const _this = this;
|
||
this.player = new JSPlugin({
|
||
// 需要英文字母开头 必填
|
||
szId: "player",
|
||
// 必填,引用H5player.min.js的js相对路径
|
||
szBasePath: "/public/bin",
|
||
|
||
iMaxSplit: 4,
|
||
openDebug: true,
|
||
mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
|
||
bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
|
||
|
||
// 分屏播放，默认最大分屏4*4
|
||
// iMaxSplit: 16,
|
||
iCurrentSplit: 2,
|
||
|
||
// 样式
|
||
oStyle: {
|
||
border: "#343434",
|
||
borderSelect: "#FFCC00",
|
||
background: "#000",
|
||
},
|
||
});
|
||
// 事件回调绑定
|
||
this.player.JS_SetWindowControlCallback({
|
||
windowEventSelect: function (iWndIndex) {
|
||
//插件选中窗口回调
|
||
console.log("windowSelect callback: ", iWndIndex);
|
||
_this.iWndIndex = iWndIndex;
|
||
_this.randomNumber = "id" + Math.random().toString(36).substr(2, 9);
|
||
},
|
||
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
|
||
//插件错误回调
|
||
console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
|
||
},
|
||
windowEventOver: function (iWndIndex, iEventType, iMouseX, iMouseY) {
|
||
//鼠标移过回调
|
||
console.log(iWndIndex, iEventType);
|
||
// 使用选中事件来定位控制按钮
|
||
const wnd = document.querySelector(`#player #player-container-${iWndIndex}`);
|
||
console.log(1111222, wnd);
|
||
if (wnd) {
|
||
const controls = document.getElementById(`controls-${iWndIndex + 1}`);
|
||
console.log(controls, wnd);
|
||
if (controls && !wnd.contains(controls)) {
|
||
// 确保控制按钮只添加一次
|
||
if (!wnd.querySelector(".video-controls")) {
|
||
wnd.appendChild(controls);
|
||
// controls.style.display = "flex";
|
||
}
|
||
}
|
||
if (controls) {
|
||
// console.log(888777, iWndIndex, _this.devH5List);
|
||
// const findIndex = _this.devH5List.findIndex(item => item.eIndex === iWndIndex);
|
||
// if (findIndex == -1) return;
|
||
|
||
const player_playVideo = wnd.querySelector(`#player_playVideo${iWndIndex}`);
|
||
const findFlag = Array.from(wnd.childNodes).find((item) => {
|
||
return item.id && item.id.includes("player_playVideo");
|
||
});
|
||
const findImg = Array.from(wnd.childNodes).some((item) => {
|
||
return item.className == "classImg";
|
||
});
|
||
// console.log(8848, findFlag, findImg, player_playVideo);
|
||
if (player_playVideo.src || findImg || findFlag.duration == "Infinity") {
|
||
controls.classList.add("video-controls_flex");
|
||
}
|
||
}
|
||
}
|
||
},
|
||
windowEventOut: function (iWndIndex) {
|
||
//鼠标移出回调
|
||
console.log(iWndIndex);
|
||
const wnd = document.querySelector(`#player #player-container-${iWndIndex}`);
|
||
if (wnd) {
|
||
const controls = document.getElementById(`controls-${iWndIndex + 1}`);
|
||
if (controls) {
|
||
controls.classList.remove("video-controls_flex");
|
||
}
|
||
}
|
||
},
|
||
windowEventUp: function (iWndIndex) {
|
||
//鼠标mouseup事件回调
|
||
//console.log(iWndIndex);
|
||
},
|
||
windowFullCcreenChange: function (bFull) {
|
||
//全屏切换回调
|
||
console.log("fullScreen callback: ", bFull);
|
||
_this.isFullScreen = bFull;
|
||
_this.isFullScreenAll = false;
|
||
},
|
||
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
|
||
//首帧显示回调
|
||
console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
|
||
},
|
||
performanceLack: function (iWndIndex) {
|
||
//性能不足回调
|
||
console.log("performanceLack callback: ", iWndIndex);
|
||
},
|
||
StreamEnd: function (iWndIndex) {
|
||
//性能不足回调
|
||
console.log("recv StreamEnd: ", iWndIndex);
|
||
},
|
||
StreamHeadChanged: function (iWndIndex) {
|
||
console.log("recv StreamHeadChanged: ", iWndIndex);
|
||
},
|
||
ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
|
||
console.log(
|
||
"recv ThumbnailsEvent: " +
|
||
iWndIndex +
|
||
", eventType:" +
|
||
eventType +
|
||
", eventCode:" +
|
||
eventCode
|
||
);
|
||
},
|
||
InterruptStream: (iWndIndex, iTime) => {
|
||
console.log("recv InterruptStream: " + iWndIndex + ", iTime:" + iTime);
|
||
},
|
||
ElementChanged: (iWndIndex, szElementType) => {
|
||
//回调采用的是video还是canvas
|
||
console.log(
|
||
"recv ElementChanged: " + iWndIndex + ", szElementType:" + szElementType
|
||
);
|
||
},
|
||
});
|
||
this.devH5List.forEach((item, index) => {
|
||
this.play(item, index);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取取流连接
|
||
* @returns {*}
|
||
*/
|
||
getPreviewUrl(row) {
|
||
let tempCode = row.serialNumber;
|
||
const param = {
|
||
cameraIndexCode: tempCode,
|
||
streamType: row.defaultStreamType && row.eIndex < 4 ? row.defaultStreamType : "",
|
||
type: window.location.protocol.includes("https") ? "wss" : "ws",
|
||
transmode: 1,
|
||
itemId: row.itemId,
|
||
};
|
||
// 这里
|
||
return getVideoItemInfoApi(param);
|
||
},
|
||
|
||
/**
|
||
* 播放
|
||
*/
|
||
play(row, index) {
|
||
const _this = this;
|
||
this.stopPlay(index + 1, "delete");
|
||
this.getPreviewUrl({
|
||
...row,
|
||
}).then((res) => {
|
||
if (res.code !== 200) {
|
||
_this.$message.warning("获取视频流失败！");
|
||
return;
|
||
}
|
||
this.devH5List.splice(index, 1, {
|
||
...row,
|
||
url: res.result.videoInfo.url,
|
||
});
|
||
|
||
// 视频添加加载中图片
|
||
const id = "player-container-" + index;
|
||
var d1 = document.getElementById(id); //获取div元素
|
||
d1.childNodes.forEach((item) => {
|
||
console.log("我是图片", item);
|
||
if (
|
||
item.nodeName == "" ||
|
||
item.nodeName == "IMG" ||
|
||
item.className == "classImg"
|
||
) {
|
||
d1.removeChild(item);
|
||
}
|
||
});
|
||
var im = document.createElement("img"); //创建图片
|
||
im.src = require("@/assets/images/iscImage/loading.gif");
|
||
//图片设置成和div一样大小
|
||
const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2);
|
||
// const imgHeightNum = divHeightNum * 0.2
|
||
const imgHeightNum = 256;
|
||
im.style.width = imgHeightNum + "px";
|
||
im.style.height = imgHeightNum + "px";
|
||
im.style.position = "absolute";
|
||
im.style.top = "50%";
|
||
im.style.left = "50%";
|
||
const positionNum = imgHeightNum / 2 - imgHeightNum;
|
||
im.style.marginLeft = positionNum + "px";
|
||
im.style.marginTop = positionNum + "px";
|
||
d1.appendChild(im); //图片挂载到div上
|
||
let preUrl = res.result.videoInfo.url;
|
||
const param = {
|
||
playURL: preUrl,
|
||
// 1：高级模式 0：普通模式，高级模式支持所有
|
||
mode: 0,
|
||
};
|
||
// 索引默认0
|
||
if (!index) {
|
||
index = 0;
|
||
}
|
||
const findIndex = Array.from(d1.childNodes).findIndex(
|
||
(item) => item.localName == "img"
|
||
);
|
||
_this.player.JS_Play(preUrl, param, index).then(
|
||
() => {
|
||
console.log(d1.childNodes);
|
||
if (findIndex !== -1) {
|
||
d1.removeChild(d1.childNodes[findIndex]);
|
||
console.log("播放成功", findIndex);
|
||
}
|
||
// 播放成功回调
|
||
// d1.removeChild(d1.childNodes[d1.childNodes.length - 1]);
|
||
// console.log("播放成功");
|
||
},
|
||
(err) => {
|
||
console.log("播放失败");
|
||
// im.src = require("@/assets/images/iscImage/text-to-image.png");
|
||
// const imgHeightNum = 20;
|
||
// const imgWidthNum = 150;
|
||
// im.style.width = imgWidthNum + "px";
|
||
// im.style.height = imgHeightNum + "px";
|
||
// const positionNum = imgHeightNum / 2 - imgHeightNum;
|
||
// const positionWidthNum = imgWidthNum / 2 - imgWidthNum;
|
||
// im.style.marginLeft = positionWidthNum + "px";
|
||
// im.style.marginTop = positionNum + "px";
|
||
if (findIndex !== -1) {
|
||
d1.removeChild(d1.childNodes[findIndex]);
|
||
let ndiv = document.createElement("div"); //创建图片
|
||
const reloadBtn = document.createElement("div");
|
||
|
||
// 创建图片元素
|
||
const reloadIcon = document.createElement("img");
|
||
reloadIcon.src = reloadImg; // 替换为你的图片路径
|
||
|
||
reloadBtn.textContent = "重新加载";
|
||
reloadBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.onReload(row.itemId);
|
||
});
|
||
|
||
// 将图片添加到按钮
|
||
reloadBtn.appendChild(reloadIcon);
|
||
|
||
ndiv.innerHTML = `预览失败，请检查设备网络`;
|
||
ndiv.style.position = "absolute";
|
||
ndiv.style.top = "50%";
|
||
ndiv.style.left = "50%";
|
||
ndiv.style.transform = "translate(-50%, -50%)";
|
||
ndiv.className = "classImg";
|
||
ndiv.appendChild(reloadBtn);
|
||
d1.appendChild(ndiv); //图片挂载到div上
|
||
}
|
||
}
|
||
);
|
||
_this.iWndIndex =
|
||
_this.iWndIndex >= _this.numCount * _this.numCount - 1
|
||
? _this.iWndIndex
|
||
: index + 1;
|
||
_this.player.JS_SelectWnd(_this.iWndIndex).then(
|
||
() => {
|
||
console.info("JS_SelectWnd success");
|
||
// do you want...
|
||
},
|
||
(err) => {
|
||
console.info("JS_SelectWnd failed");
|
||
// do you want...
|
||
}
|
||
);
|
||
_this.player.JS_SetConnectTimeOut(index, 60).then(
|
||
() => {
|
||
console.info("JS_SetConnectTimeOut success");
|
||
// do you want...
|
||
},
|
||
(err) => {
|
||
console.info("JS_SetConnectTimeOut failed", err);
|
||
// do you want...
|
||
}
|
||
);
|
||
});
|
||
},
|
||
onReload(id) {
|
||
console.log("重新加载", id);
|
||
// 这里添加重新加载的逻辑
|
||
const findItem = this.devH5List.find((item) => item.itemId === id);
|
||
if (findItem) {
|
||
this.play(findItem, findItem.eIndex);
|
||
}
|
||
},
|
||
onTwoSubmit(num) {
|
||
const _this = this;
|
||
// 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格
|
||
this.numCount = num;
|
||
this.player.JS_ArrangeWindow(num).then(
|
||
() => {
|
||
// 循环取流
|
||
// for (let i = 0; i < num * num; i++) {
|
||
// _this.play(i);
|
||
// }
|
||
},
|
||
(e) => {
|
||
console.error(e);
|
||
}
|
||
);
|
||
},
|
||
},
|
||
computed: {
|
||
videoNameUp() {
|
||
return (index) => {
|
||
const find = this.devH5List.find((item) => item.eIndex === index);
|
||
console.log(8844555, this.devH5List);
|
||
return find ? find.videoName : "";
|
||
};
|
||
},
|
||
pageList() {
|
||
const pageSize = this.numCount * this.numCount;
|
||
return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize)
|
||
},
|
||
pageSizeFlag() {
|
||
console.log("aassss", this.devListAll.length, (this.numCount * this.numCount))
|
||
|
||
return this.devListAll.length / (this.numCount * this.numCount)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.el-message {
|
||
min-width: initial;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.bg-001 {
|
||
height: 100%;
|
||
background: #001e53;
|
||
position: absolute;
|
||
right: -16px;
|
||
top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
> div {
|
||
height: 50%;
|
||
background: rgba(86, 188, 251, 0.2);
|
||
// pointer-events: none;
|
||
cursor: not-allowed;
|
||
> div {
|
||
width: 16px;
|
||
height: 100%;
|
||
background-image: url("~@/assets/images/videoSurveillance/page-icon.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
.page-down {
|
||
background-image: url("~@/assets/images/videoSurveillance/page-icon_active.png");
|
||
}
|
||
> div::after {
|
||
content: "";
|
||
width: 9px;
|
||
height: 11px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
> div:first-child > div::after {
|
||
background-image: url("~@/assets/images/videoSurveillance/page-icon_up.png");
|
||
bottom: 35px;
|
||
}
|
||
> div:last-child > div::after {
|
||
background-image: url("~@/assets/images/videoSurveillance/page-icon_down.png");
|
||
top: 35px;
|
||
}
|
||
.page-box1 {
|
||
background: rgba(86, 188, 251, 0.4);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
:deep(.classImg) {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 16px;
|
||
width: calc(100% - 24px);
|
||
text-align: center;
|
||
padding: 0 12px;
|
||
z-index: 101;
|
||
> div {
|
||
color: rgb(255, 255, 255);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 6px;
|
||
> img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
.bgImage {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.transcribe {
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url("~@/assets/images/iscImage/transcribe.png");
|
||
}
|
||
.talkback {
|
||
background-image: url("~@/assets/images/iscImage/talkback.png");
|
||
}
|
||
.talkback_active {
|
||
background-image: url("~@/assets/images/iscImage/talkback_active.png");
|
||
}
|
||
.screenshot {
|
||
background-image: url("~@/assets/images/iscImage/screenshot.png");
|
||
}
|
||
.disableVolume {
|
||
background-image: url("~@/assets/images/iscImage/disableVolume.png");
|
||
}
|
||
.fullScreen {
|
||
background-image: url("~@/assets/images/iscImage/fullScreen.png");
|
||
}
|
||
.openVolume {
|
||
background-image: url("~@/assets/images/iscImage/openVolume.png");
|
||
}
|
||
.exitFullScreen {
|
||
background-image: url("~@/assets/images/iscImage/exitFullScreen.png");
|
||
}
|
||
.splitscreen1 {
|
||
background-image: url("~@/assets/images/iscImage/splitscreen1.png");
|
||
}
|
||
.splitscreen2 {
|
||
background-image: url("~@/assets/images/iscImage/splitscreen2.png");
|
||
}
|
||
.splitscreen3 {
|
||
background-image: url("~@/assets/images/iscImage/splitscreen3.png");
|
||
}
|
||
.stopAll {
|
||
background-image: url("~@/assets/images/iscImage/stopAll.png");
|
||
}
|
||
.video-controls_flex {
|
||
display: flex !important;
|
||
}
|
||
/* 添加控制按钮样式 */
|
||
.video-controls {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 100;
|
||
// background: rgba(0, 0, 0, 0.7);
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.controls-bottom {
|
||
height: 35px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 0 16px;
|
||
> div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
> div:not(:first-child) {
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.controls-top {
|
||
padding: 0 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 35px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
.top-left {
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
}
|
||
.top-close {
|
||
width: 84px;
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
> i {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
#player-main {
|
||
width: calc(100%);
|
||
height: 100%;
|
||
}
|
||
.player-main1 {
|
||
width: calc(100% - 16px) !important;
|
||
position: relative;
|
||
}
|
||
#player {
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
}
|
||
.player-tool {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
background-color: #3d3d3d;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
> div:not(:first-child) {
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
.hikvision-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
#video-container {
|
||
width: 100%;
|
||
height: 500px;
|
||
background-color: #000;
|
||
}
|
||
|
||
.control-bar {
|
||
padding: 10px;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.video-source {
|
||
padding: 10px;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.volume-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
</style>
|