You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
12 KiB
375 lines
12 KiB
2 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div id="player"></div>
|
||
|
|
<el-form>
|
||
|
|
<el-form-item label="当前选中摄像头">
|
||
|
|
{{
|
||
|
|
this.playUrlList.length > 0 && this.player
|
||
|
|
? this.playUrlList[this.player.currentWindowIndex].code
|
||
|
|
: "--"
|
||
|
|
}}
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="分屏">
|
||
|
|
<el-radio-group v-model="splitNum" @change="arrangeWindow">
|
||
|
|
<el-radio-button label="1">1x1</el-radio-button>
|
||
|
|
<el-radio-button label="2">2x2</el-radio-button>
|
||
|
|
<el-radio-button label="3">3x3</el-radio-button>
|
||
|
|
<el-radio-button label="4">4x4</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="预览">
|
||
|
|
<el-button id="btn-realplay" @click="realplay">开始预览</el-button>
|
||
|
|
<el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button>
|
||
|
|
<el-button id="btn-stopall" @click="stopAllPlay"
|
||
|
|
>停止全部窗口</el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="回放时间">
|
||
|
|
<e-date-picker
|
||
|
|
show-time
|
||
|
|
placeholder="开始时间"
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
v-model="playback.startTime"
|
||
|
|
:value-format="playback.valueFormat"
|
||
|
|
>
|
||
|
|
</e-date-picker>
|
||
|
|
<e-date-picker
|
||
|
|
show-time
|
||
|
|
placeholder="结束时间"
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
v-model="playback.endTime"
|
||
|
|
:value-format="playback.valueFormat"
|
||
|
|
>
|
||
|
|
</e-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="回放">
|
||
|
|
<el-button id="btn-playback" @click="playbackQuery">开始回放</el-button>
|
||
|
|
<el-button id="btn-playback-pause" @click="playbackPause"
|
||
|
|
>暂停</el-button
|
||
|
|
>
|
||
|
|
<el-button id="btn-playback-sesume" @click="playbackResume"
|
||
|
|
>恢复</el-button
|
||
|
|
>
|
||
|
|
<el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="抓图">
|
||
|
|
<el-button id="btn-capture-jpeg" @click="capture('JPEG')"
|
||
|
|
>抓取JPEG</el-button
|
||
|
|
>
|
||
|
|
<el-button id="btn-capture-bmp" @click="capture('BMP')"
|
||
|
|
>抓取BMP</el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
|
||
|
|
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
|
||
|
|
// import "@/static/js/h5player.min.js"
|
||
|
|
import {
|
||
|
|
queryLivePreview,
|
||
|
|
queryLiveBack,
|
||
|
|
} from "@/api/wirelessintrusion/wirelessintrusion";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
list: {
|
||
|
|
// cameraCode列表
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
player: null,
|
||
|
|
playUrlList: [], //预览播放地址
|
||
|
|
splitNum: 1,
|
||
|
|
mseSupport: MSE_IS_SUPPORT,
|
||
|
|
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
||
|
|
tabActive: "decoder",
|
||
|
|
urls: {
|
||
|
|
realplay: "ws://10.19.147.22:559/EUrl/q2jQie4",
|
||
|
|
talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
|
||
|
|
playback:
|
||
|
|
"wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
|
||
|
|
},
|
||
|
|
playback: {
|
||
|
|
startTime: "2021-07-26T00:00:00",
|
||
|
|
endTime: "2021-07-26T23:59:59",
|
||
|
|
valueFormat: "",
|
||
|
|
seekStart: "2021-07-26T12:00:00",
|
||
|
|
rate: "",
|
||
|
|
},
|
||
|
|
muted: true,
|
||
|
|
volume: 50,
|
||
|
|
volumeOnSvg: {
|
||
|
|
template:
|
||
|
|
'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
|
||
|
|
},
|
||
|
|
volumeOffSvg: {
|
||
|
|
template:
|
||
|
|
'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
|
||
|
|
},
|
||
|
|
recordStartState: 0,
|
||
|
|
recordStartText: "录像",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 海康h5插件初始化
|
||
|
|
setTimeout(() => {
|
||
|
|
this.init();
|
||
|
|
this.createPlayer();
|
||
|
|
this.arrangeWindow();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 海康视频初始化加载
|
||
|
|
init() {
|
||
|
|
// 设置播放容器的宽高并监听窗口大小变化
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
this.player.JS_Resize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
createPlayer() {
|
||
|
|
this.player = new window.JSPlugin({
|
||
|
|
szId: "player",
|
||
|
|
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
|
||
|
|
iMaxSplit: 4,
|
||
|
|
iCurrentSplit: 2,
|
||
|
|
openDebug: true,
|
||
|
|
oStyle: {
|
||
|
|
borderSelect: "#FFCC00",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
let _this = this;
|
||
|
|
// 事件回调绑定
|
||
|
|
this.player.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: ");
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// _this.realplay();
|
||
|
|
this.queryLive();
|
||
|
|
},
|
||
|
|
arrangeWindow() {
|
||
|
|
this.splitNum =
|
||
|
|
this.list.length > 1
|
||
|
|
? 2
|
||
|
|
: this.list.length > 4
|
||
|
|
? 3
|
||
|
|
: this.list.length > 9
|
||
|
|
? 4
|
||
|
|
: 4;
|
||
|
|
const splitNum = this.splitNum;
|
||
|
|
this.player.JS_ArrangeWindow(splitNum).then(
|
||
|
|
() => {
|
||
|
|
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
// 初始化结束
|
||
|
|
// 视频预览
|
||
|
|
realplay(index, playUrl) {
|
||
|
|
if (this.playUrlList.length === 0) {
|
||
|
|
this.$message.warning("当前没有可播放的摄像头");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// this.mode = 0 //解码方式：0普通模式 1高级模式
|
||
|
|
// const { player, mode, urls } = this,
|
||
|
|
|
||
|
|
// index = player.currentWindowIndex
|
||
|
|
// // playURL = this.realplay
|
||
|
|
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
|
||
|
|
// player.JS_Play(playURL, { playURL, mode }, index1).then(
|
||
|
|
// () => {
|
||
|
|
// console.log('realplay success')
|
||
|
|
// },
|
||
|
|
// e => { console.error(e) }
|
||
|
|
// )
|
||
|
|
if (this.player === null) return;
|
||
|
|
// let { mode, player } = this;
|
||
|
|
// let index = this.player.currentWindowIndex;
|
||
|
|
let mode = 0;
|
||
|
|
// let playURL = this.playUrlList[player.currentWindowIndex].url;
|
||
|
|
|
||
|
|
console.log(playURL, { playURL, mode }, index);
|
||
|
|
this.player.JS_Play(playURL, { playURL, mode }, index).then(
|
||
|
|
() => {
|
||
|
|
// 播放成功回调
|
||
|
|
console.log("播放成功");
|
||
|
|
},
|
||
|
|
(err) => {
|
||
|
|
console.log("播放失败", err);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
// 关闭所有视频
|
||
|
|
stopAllPlay() {
|
||
|
|
this.player.JS_StopRealPlayAll().then(
|
||
|
|
() => {
|
||
|
|
this.playback.rate = 0;
|
||
|
|
console.log("stopAllPlay success");
|
||
|
|
this.closeVideoTree();
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
// 关闭单个视频
|
||
|
|
stopPlay() {
|
||
|
|
this.player.JS_Stop().then(
|
||
|
|
() => {
|
||
|
|
this.playback.rate = 0;
|
||
|
|
console.log("stop realplay success");
|
||
|
|
// this.closeVideoTree()
|
||
|
|
const index = this.player.currentWindowIndex;
|
||
|
|
this.selectAisle(this.videoList[index], index);
|
||
|
|
},
|
||
|
|
(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);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 视频流查询
|
||
|
|
*/
|
||
|
|
//实时监控播放地址查询
|
||
|
|
queryLive() {
|
||
|
|
console.log("视频流查询", this.list);
|
||
|
|
let playUrlList = [];
|
||
|
|
this.list.map((code, index) => {
|
||
|
|
// console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code)
|
||
|
|
queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
|
||
|
|
console.log('res ====>',res)
|
||
|
|
if (res.data.code === 0 || res.data.code == 200) {
|
||
|
|
playUrlList.push({ code: code, url: res.data.url });
|
||
|
|
this.playUrlList = playUrlList;
|
||
|
|
this.realplay(index, res.data.url);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 回放 */
|
||
|
|
playbackStart() {
|
||
|
|
let { player, mode, playback } = this,
|
||
|
|
index = player.currentWindowIndex,
|
||
|
|
{ startTime, endTime } = playback;
|
||
|
|
let playUrl = this.playUrlList[index].playback;
|
||
|
|
startTime += "Z";
|
||
|
|
endTime += "Z";
|
||
|
|
|
||
|
|
player
|
||
|
|
.JS_Play(playURL, { playURL, mode }, index, startTime, endTime)
|
||
|
|
.then(
|
||
|
|
() => {
|
||
|
|
console.log("playbackStart success");
|
||
|
|
this.playback.rate = 1;
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
playbackPause() {
|
||
|
|
this.player.JS_Pause().then(
|
||
|
|
() => {
|
||
|
|
console.log("playbackPause success");
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
playbackResume() {
|
||
|
|
this.player.JS_Resume().then(
|
||
|
|
() => {
|
||
|
|
console.log("playbackResume success");
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
/* 回放 */
|
||
|
|
playbackQuery() {
|
||
|
|
if (this.playUrlList.length === 0) {
|
||
|
|
this.$message.warning("当前没有可播放的摄像头");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
this.playUrlList[this.player.currentWindowIndex].playback != undefined
|
||
|
|
) {
|
||
|
|
this.playbackStart();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
queryLiveBack({
|
||
|
|
cameraIndexCode: this.playUrlList[this.currentWindowIndex].code,
|
||
|
|
beginTime: this.playback.startTime,
|
||
|
|
endTime: this.playback.endTime,
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.data.code === 0 || res.data.code == 200) {
|
||
|
|
this.playUrlList[this.player.currentWindowIndex].playback =
|
||
|
|
res.data.url;
|
||
|
|
this.playbackStart();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|