Skip to content

V
video-monitoring
Commit 25bfa3b3 authored by 拾柒's avatar 拾柒
Browse files
Options

Merge branch 'dev-yingshi' 

# Conflicts:
#	src/components/TopNav/index.vue
parents b55b9eb4 5fb160da
Show whitespace changes
Inline Side-by-side
Showing with 877 additions and 18 deletions
src/api/system/video.js
View file @ 25bfa3b3
......@@ -38,3 +38,18 @@ export function getStream(deviceSerial,accessToken) {
}
})
}
// 根据信息查询历史记录流
export function getHistoryStream(deviceSerial,accessToken,startTime,endTime) {
return request({
url: '/hikvision/getYsHistoryStream',
method: 'get',
params: {
deviceSerial: deviceSerial
, accessToken: accessToken,
startTime: startTime,
endTime: endTime
}
})
}
src/components/TopNav/index.vue
View file @ 25bfa3b3
......@@ -58,6 +58,8 @@
<i style="width: 10px; height: 10px; margin-top: -12px"></i>
历史记录
</el-menu-item>
</template>
<template>
<el-menu-item
class="menuStyle"
style="
......@@ -104,7 +106,6 @@ const hideList = ["/index", "/user/profile"];
export default {
components: { Menu },
data() {
return {
roles: [],
......@@ -213,7 +214,7 @@ export default {
this.roles = this.$store.getters.roles;
},
created() {
this.updateBackTag(this.$route.path);
this.getinfo();
},
methods: {
updateBackTag(path) {
......
src/router/index.js
View file @ 25bfa3b3
......@@ -103,6 +103,20 @@ export const constantRoutes = [
},
],
},
{
path: "/detail",
component: Layout,
hidden: false,
redirect: "/detail",
children: [
{
path: "detail",
component: () => import("@/views/video/detail"),
name: "Detail",
meta: { title: "视频详情", icon: "user" },
},
],
},
{
path: "/monitoringPlayback",
component: Layout,
......
src/utils/request.js
View file @ 25bfa3b3
......@@ -113,7 +113,7 @@ service.interceptors.response.use(res => {
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
message = "用户登录信息过期，请重新登录";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
......
src/views/video/detail.vue 0 → 100644
View file @ 25bfa3b3
<template>
<div style="background-color: #D4D9E5">
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex;background-color: white;margin: 20px 30px">
<div id="video-container-out" :style="{width: '100%', height: '83vh', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick">
<div id="video-container" style="width: 100%; height: 78vh" @click="abv" >
</div>
<div style="display: flex;">
<el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave"></el-button>
<el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture"></el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件
import {getAccessToken,getDeviceList,getStream} from '@/api/system/video'
export default {
name: 'EZUIKitJs',
data() {
return {
containerWidth: 910,
containerHeight: 435,
isZoomed: false,
// 录制按钮
recordButton: true,
recordButton1: true,
recordButton2: true,
recordButton3: true,
// 设备信息列表
deviceList: [],
// token值
accessToken: '',
showButton: false,
player: null,
player1: null,
player2: null,
player3: null,
}
},
mounted() {
console.info('assessTaken',this.$route.query.accessToken)
this.getVideoStream(this.$route.query.deviceSerial,this.$route.query.accessToken)
// this.getToken()
// let accessToken = 'at.72lfl37x1gy7qg868wwtvsv02b1gq2if-9dcvoptaky-15eq2k5-ljpwdyhhc'
// let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
},
methods: {
// 获取视频流
getVideoStream(deviceSerial,token) {
getStream(deviceSerial,token).then(res => {
if (res.data.code == 200){
this.getInit(token,res.data.data.url)
}
})
},
handleDoubleClick() {
// 返回
this.$router.push({
path: "/index",
});
},
abv(){
// 跳转详情页面
console.info('4456')
},
// 获取token值
getToken() {
getAccessToken().then(response => {
console.log('查看获取的token值',response)
if (response.data.code == 200) {
console.log('查看获取的token值',response.data.data)
this.accessToken = response.data.data.accessToken
this.getDeviceList()
// this.getInit(this.accessToken)
}
})
},
// 获取萤石云的设备信息
getDeviceList(){
var equipmentList = []
getDeviceList(this.accessToken).then(response => {
if(response.data.code == 200){
response.data.data.map(node =>{
equipmentList.push(node.deviceSerial)
})
}
this.deviceList = equipmentList
console.info('设备信息列表', this.deviceList)
this.getStream()
})
// this.getStream()
},
// 根据设备号以及token值进行获取视频的url
getStream(){
console.info('设备号',this.deviceList.length)
// 后端接收的一个
if(this.deviceList.length == 1){
getStream(this.deviceList[0],this.accessToken).then(res => {
if (res.data.code == 200){
//成功
this.getInit(this.accessToken,res.data.data.url)
this.getInit1(this.accessToken,res.data.data.url)
// this.getInit2(this.accessToken,res.data.data.url)
// this.getInit3(this.accessToken,res.data.data.url)
} else {
this.$message.error("获取视频流失败")
}
console.info('视频流是0',res)
})
} else if (this.deviceList.length == 2){
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是1',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是2',res)
})
} else if (this.deviceList.length === 3){
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是3',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是4',res)
})
getStream(this.deviceList[2],this.accessToken).then(res => {
console.info('视频流是5',res)
})
} else if(this.deviceList.length == 4) {
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是6',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是7',res)
})
getStream(this.deviceList[2],this.accessToken).then(res => {
console.info('视频流是8',res)
})
getStream(this.deviceList[3],this.accessToken).then(res => {
console.info('视频流是9',res)
})
} else {
this.$message.error("设备超出请联系管理员进行扩充")
}
},
// 初始化视频
getInit(token,videoUrl){
console.info('视频流是',videoUrl)
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: token,
url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 1770,
height: 750,
})
},
getInit1(token,videoUrl){
console.info('视频流是',videoUrl)
this.player1 = new EZUIKit.EZUIKitPlayer({
id: 'video-container1', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 1400,
height: 800,
})
},
getInit2(token,videoUrl){
console.info('视频流是',videoUrl)
this.player2 = new EZUIKit.EZUIKitPlayer({
id: 'video-container2', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
})
},
getInit3(token,videoUrl){
console.info('视频流是',videoUrl)
this.player3 = new EZUIKit.EZUIKitPlayer({
id: 'video-container3', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: this.containerWidth,
height: this.containerHeight - 35,
})
},
fulScreen() {
this.player.fullScreen()
},
fulScreen1() {
this.player1.fullScreen()
},
fulScreen2() {
this.player2.fullScreen()
},
fulScreen3() {
this.player3.fullScreen()
},
capturePicture() {
var capturePicturePromise = this.player.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture1() {
var capturePicturePromise = this.player1.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture2() {
var capturePicturePromise = this.player2.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture3() {
var capturePicturePromise = this.player3.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
//开始录制
startSave() {
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave() {
var stopSavePromise = this.player.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave1() {
var startSavePromise = this.player1.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton1 = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave1() {
var stopSavePromise = this.player1.stopSave();
// 显示开始录制
this.recordButton1 = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave2() {
var startSavePromise = this.player2.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave2() {
var stopSavePromise = this.player2.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave3() {
var startSavePromise = this.player3.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave3() {
var stopSavePromise = this.player3.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
}
}
</script>
<style scoped>
el-icon {
font-size: 20px !important;
}
</style>
src/views/video/index.vue
View file @ 25bfa3b3
......@@ -2,8 +2,8 @@
<template>
<div style="background-color: #D4D9E5">
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" @click="abv">
<div id="video-container" style="width: 910px; height: 400px" @click="abv">
<div id="video-container-out" :style="{width: 910 + 'px', height: 435 + 'px', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick(0)">
<div id="video-container" style="width: 910px; height: 400px" @click="abv" >
</div>
<div style="display: flex;">
<el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
......@@ -16,7 +16,7 @@
@click="capturePicture"></el-button>
</div>
</div>
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246" @dblclick="handleDoubleClick(1)">
<div id="video-container1" style="width: 910px; height: 400px">
</div>
<div style="display: flex;">
......@@ -33,7 +33,7 @@
</div>
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px" @dblclick="handleDoubleClick(2)">
<div id="video-container2" style="width: 910px; height: 400px">
</div>
<div style="display: flex;justify-content: space-between">
......@@ -47,7 +47,7 @@
@click="capturePicture2"></el-button>
</div>
</div>
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246" @dblclick="handleDoubleClick(3)">
<div id="video-container3" style="width: 910px; height: 400px">
</div>
<div style="display: flex;justify-content: space-between">
......@@ -72,6 +72,9 @@ export default {
name: 'EZUIKitJs',
data() {
return {
containerWidth: 910,
containerHeight: 435,
isZoomed: false,
// 录制按钮
recordButton: true,
recordButton1: true,
......@@ -96,6 +99,26 @@ export default {
},
methods: {
handleDoubleClick(index) {
var devideCode = ''
switch (index) {
case 0:
devideCode = this.deviceList[0];break;
case 1:
devideCode = this.deviceList[1];break;
case 2:
devideCode = this.deviceList[2];break;
case 3:
devideCode = this.deviceList[3];break;
}
this.$router.push({
path: "/detail/detail",
query: {
deviceSerial: devideCode,
accessToken: this.accessToken
},
});
},
abv(){
// 跳转详情页面
console.info('4456')
......@@ -228,8 +251,8 @@ export default {
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
width: this.containerWidth,
height: this.containerHeight - 35,
})
},
fulScreen() {
......
src/views/video/playback.vue
View file @ 25bfa3b3
<template>
<div class="playback">
<div ref="playWndBack" class="video-watch" id="playWndBack"></div>
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 1404px; height: 750px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" >
<div id="video-container" style="width: 1404px; height: 700px" >
</div>
<div style="display: flex;">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain-->
<!-- @click="fulScreen"></el-button>-->
<el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave"></el-button>
<el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture"></el-button>
</div>
</div>
</div>
<div style="margin-right: 30px;margin-top: 60px">
<el-form label-position="right" label-width="100px" :model="formLabelAlign">
<el-form-item label="监控点名称">
......@@ -28,16 +43,37 @@
</template>
<script>
import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件
import {getCameras} from "@/api/system/video";
import videoParams from "@/views/video/videoParams";
import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
import {getAccessToken,getDeviceList,getStream,getHistoryStream} from '@/api/system/video'
export default {
name: "playback",
data() {
return {
carryRowCode:{},
code: '',
// startTime
startTime: '',
// endTime
endTime: '',
// 录制按钮
recordButton: true,
recordButton1: true,
recordButton2: true,
recordButton3: true,
// 设备信息列表
deviceList: [],
// token值
accessToken: '',
showButton: false,
player: null,
player1: null,
player2: null,
player3: null,
carryRowCode: {},
oWebControl: null,
initCount: 0,
pubKey: '',
......@@ -53,9 +89,18 @@ export default {
},
created() {
this.carryRowCode = this.$route.query.carryRowCode;
this.code = this.$route.query.carryRowCode.code;
this.startTime = this.$route.query.monitoringStarttime
this.endTime = this.$route.query.monitoringFinallytime
},
mounted() {
this.getIndex()
this.carryRowCode = this.$route.query.carryRowCode;
this.code = this.$route.query.carryRowCode.code;
this.startTime = this.$route.query.carryRowCode.monitoringStarttime
this.endTime = this.$route.query.carryRowCode.monitoringFinallytime
// this.getIndex()
this.getToken()
},
beforeRouteLeave(to, from, next) {
if (this.oWebControl != null){
......@@ -74,10 +119,87 @@ export default {
beforeDestroy() {
},
methods: {
getIndex() {
this.cameraIndexCode = '275e201d228c4073b462ad1d9865d3cc'
this.initPlugin();
// 返回
back(){
this.$router.push({
path: "/monitoringhistory/history",
})
},
fulScreen() {
this.player.fullScreen()
},
startSave() {
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave() {
var stopSavePromise = this.player.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture() {
var capturePicturePromise = this.player.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
getToken() {
getAccessToken().then(response => {
console.log('查看获取的token值',response)
if (response.data.code == 200) {
this.accessToken = response.data.data.accessToken
this.getHistoryStream(response.data.data.accessToken)
// this.getInit(this.accessToken)
}
})
},
// 根据传递的设备编号以及token以及开始时间结束时间获取获取url
getHistoryStream(token){
getHistoryStream(this.code,token,this.startTime,this.endTime).then(res => {
console.info('回放视频流',res)
if(res.data.code == 200){
this.getInit(token,res.data.data.url)
} else {
this.$message.warning('当前视频没有回放')
this.back()
}
// console.info("4564",res)
// if(res.data){
// this.getInit()
// }
})
},
getInit(token,videoUrl){
console.info('视频流是',videoUrl)
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
// accessToken: 'at.9lcurm31d95uy8x214qfw0d84a2ks1mf-7egp0jjnr5-0whlhqz-j7dkim7lh',
accessToken: token,
// url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 1404,
height: 700,
})
},
// getIndex() {
// this.cameraIndexCode = '275e201d228c4073b462ad1d9865d3cc'
// this.initPlugin();
// },
startPreview() {
var cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值，必填
var startTimeStamp = new Date('2024-07-01'.replace('-', '/').replace('-', '/')).getTime(); //回放开始时间戳，必填
......@@ -239,7 +361,7 @@ export default {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
height: 1000px;
height: 820px;
background: white;
}
.video-watch{
......
src/views/video/yingshi.vue 0 → 100644
View file @ 25bfa3b3
<template>
<div style="background-color: #D4D9E5">
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" @click="abv">
<div id="video-container" style="width: 910px; height: 400px" @click="abv">
</div>
<div style="display: flex;">
<el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@click="fulScreen"></el-button>
<el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave"></el-button>
<el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture"></el-button>
</div>
</div>
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
<div id="video-container1" style="width: 910px; height: 400px">
</div>
<div style="display: flex;">
<el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@click="fulScreen1"></el-button>
<el-button v-if="recordButton1" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave1"></el-button>
<el-button v-if="!recordButton1" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave1">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture1"></el-button>
</div>
</div>
</div>
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px">
<div id="video-container2" style="width: 910px; height: 400px">
</div>
<div style="display: flex;justify-content: space-between">
<el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@click="fulScreen2"></el-button>
<el-button v-if="recordButton2" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave2"></el-button>
<el-button v-if="!recordButton2" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave2">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture2"></el-button>
</div>
</div>
<div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
<div id="video-container3" style="width: 910px; height: 400px">
</div>
<div style="display: flex;justify-content: space-between">
<el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@click="fulScreen"></el-button>
<el-button v-if="recordButton3" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave3"></el-button>
<el-button v-if="!recordButton3" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
@click="stopSave3">录制中</el-button>
<el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="capturePicture3"></el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件
import {getAccessToken,getDeviceList,getStream} from '@/api/system/video'
export default {
name: 'EZUIKitJs',
data() {
return {
// 录制按钮
recordButton: true,
recordButton1: true,
recordButton2: true,
recordButton3: true,
// 设备信息列表
deviceList: [],
// token值
accessToken: '',
showButton: false,
player: null,
player1: null,
player2: null,
player3: null,
}
},
mounted() {
this.getToken()
// let accessToken = 'at.72lfl37x1gy7qg868wwtvsv02b1gq2if-9dcvoptaky-15eq2k5-ljpwdyhhc'
// let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
},
methods: {
abv(){
// 跳转详情页面
console.info('4456')
},
// 获取token值
getToken() {
getAccessToken().then(response => {
console.log('查看获取的token值',response)
if (response.data.code == 200) {
console.log('查看获取的token值',response.data.data)
this.accessToken = response.data.data.accessToken
this.getDeviceList()
// this.getInit(this.accessToken)
}
})
},
// 获取萤石云的设备信息
getDeviceList(){
var equipmentList = []
getDeviceList(this.accessToken).then(response => {
if(response.data.code == 200){
response.data.data.map(node =>{
equipmentList.push(node.deviceSerial)
})
}
this.deviceList = equipmentList
console.info('设备信息列表', this.deviceList)
this.getStream()
})
// this.getStream()
},
// 根据设备号以及token值进行获取视频的url
getStream(){
console.info('设备号',this.deviceList.length)
// 后端接收的一个
if(this.deviceList.length == 1){
getStream(this.deviceList[0],this.accessToken).then(res => {
if (res.data.code == 200){
//成功
this.getInit(this.accessToken,res.data.data.url)
this.getInit1(this.accessToken,res.data.data.url)
// this.getInit2(this.accessToken,res.data.data.url)
// this.getInit3(this.accessToken,res.data.data.url)
} else {
this.$message.error("获取视频流失败")
}
console.info('视频流是0',res)
})
} else if (this.deviceList.length == 2){
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是1',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是2',res)
})
} else if (this.deviceList.length === 3){
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是3',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是4',res)
})
getStream(this.deviceList[2],this.accessToken).then(res => {
console.info('视频流是5',res)
})
} else if(this.deviceList.length == 4) {
getStream(this.deviceList[0],this.accessToken).then(res => {
console.info('视频流是6',res)
})
getStream(this.deviceList[1],this.accessToken).then(res => {
console.info('视频流是7',res)
})
getStream(this.deviceList[2],this.accessToken).then(res => {
console.info('视频流是8',res)
})
getStream(this.deviceList[3],this.accessToken).then(res => {
console.info('视频流是9',res)
})
} else {
this.$message.error("设备超出请联系管理员进行扩充")
}
},
// 初始化视频
getInit(token,videoUrl){
console.info('视频流是',videoUrl)
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: token,
url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
})
},
getInit1(token,videoUrl){
console.info('视频流是',videoUrl)
this.player1 = new EZUIKit.EZUIKitPlayer({
id: 'video-container1', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
})
},
getInit2(token,videoUrl){
console.info('视频流是',videoUrl)
this.player2 = new EZUIKit.EZUIKitPlayer({
id: 'video-container2', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
})
},
getInit3(token,videoUrl){
console.info('视频流是',videoUrl)
this.player3 = new EZUIKit.EZUIKitPlayer({
id: 'video-container3', // 视频容器ID
accessToken: token,
url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 910,
height: 400,
})
},
fulScreen() {
this.player.fullScreen()
},
fulScreen1() {
this.player1.fullScreen()
},
fulScreen2() {
this.player2.fullScreen()
},
fulScreen3() {
this.player3.fullScreen()
},
capturePicture() {
var capturePicturePromise = this.player.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture1() {
var capturePicturePromise = this.player1.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture2() {
var capturePicturePromise = this.player2.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
capturePicture3() {
var capturePicturePromise = this.player3.capturePicture(
`${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
//开始录制
startSave() {
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave() {
var stopSavePromise = this.player.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave1() {
var startSavePromise = this.player1.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton1 = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave1() {
var stopSavePromise = this.player1.stopSave();
// 显示开始录制
this.recordButton1 = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave2() {
var startSavePromise = this.player2.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave2() {
var stopSavePromise = this.player2.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
startSave3() {
var startSavePromise = this.player3.startSave(`${new Date().getTime()}`);
// 将开始录制按钮隐藏
this.recordButton = false
startSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
// 结束录制
stopSave3() {
var stopSavePromise = this.player3.stopSave();
// 显示开始录制
this.recordButton = true
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data);
});
},
}
}
</script>
<style scoped>
el-icon {
font-size: 20px !important;
}
</style>
vue.config.js
View file @ 25bfa3b3
......@@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://106.3.99.64:20004`,
target: `http://127.0.0.1:8087`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment