Skip to content

V
video-monitoring
Commit 85b1e20e authored by 拾柒's avatar 拾柒
Browse files
Options

添加萤石视频

parent 359671c9
Hide whitespace changes
Inline Side-by-side
Showing with 687 additions and 215 deletions
src/api/system/video.js
View file @ 85b1e20e
...@@ -7,3 +7,34 @@ export function getCameras(query) { ...@@ -7,3 +7,34 @@ export function getCameras(query) {
params: query params: query
}) })
} }
// 获取accessToken
export function getAccessToken() {
return request({
url: '/hikvision/getAccessToken',
method: 'get',
})
}
// 获取萤石云的设备信息
export function getDeviceList(query) {
return request({
url: '/hikvision/getYsCameras',
method: 'get',
params: {
accessToken: query
}
})
}
// 根据设备信息以及token获取设备视频流
export function getStream(deviceSerial,accessToken) {
return request({
url: '/hikvision/getYsPlayerStream',
method: 'get',
params: {
deviceSerial: deviceSerial
, accessToken: accessToken
}
})
}
src/utils/request.js
View file @ 85b1e20e
...@@ -113,7 +113,7 @@ service.interceptors.response.use(res => { ...@@ -113,7 +113,7 @@ service.interceptors.response.use(res => {
if (message == "Network Error") { if (message == "Network Error") {
message = "后端接口连接异常"; message = "后端接口连接异常";
} else if (message.includes("timeout")) { } else if (message.includes("timeout")) {
message = "系统接口请求超时"; message = "用户登录信息过期，请重新登录";
} else if (message.includes("Request failed with status code")) { } else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常"; message = "系统接口" + message.substr(message.length - 3) + "异常";
} }
......
src/views/video/index.vue
View file @ 85b1e20e
<template> <template>
<div class="video-now" style="margin-top: 20px"> <div style="background-color: #D4D9E5">
<!-- <div @click="setLayout('1x1')">1x1</div> <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div @click="setLayout('2x2')">2x2</div>--> <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 ref="playWnd" class="video-watch" id="playWnd"></div> </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> </div>
</template> </template>
<script > <script>
import {getCameras} from "@/api/system/video"; import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件
import videoParams from './videoParams' import {getAccessToken,getDeviceList,getStream} from '@/api/system/video'
export default { export default {
name: "index", name: 'EZUIKitJs',
data() { data() {
return { return {
oWebControl: null, // 录制按钮
initCount: 0, recordButton: true,
pubKey: '', recordButton1: true,
cameraIndexCodeList: [] recordButton2: true,
}; recordButton3: true,
}, // 设备信息列表
mounted() { deviceList: [],
this.getIndex() // token值
}, accessToken: '',
beforeRouteLeave(to, from, next) { showButton: false,
if (this.oWebControl != null) { player: null,
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 player1: null,
next() player2: null,
/*this.oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功 player3: null,
next();
},
function () { // 断开与插件服务连接失败
next()
});*/
} else {
next()
} }
}, },
beforeDestroy() {
mounted() {
this.getToken()
// let accessToken = 'at.72lfl37x1gy7qg868wwtvsv02b1gq2if-9dcvoptaky-15eq2k5-ljpwdyhhc'
// let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
}, },
methods: { methods: {
// 设置布局的方法 abv(){
setLayout(params) { // 跳转详情页面
this.oWebControl.JS_RequestInterface({ console.info('4456')
funcName: "setLayout",
argument: JSON.stringify({
layout: params
})
});
}, },
getIndex() { // 获取token值
getCameras().then(res => { getToken() {
console.log('getCameras', JSON.parse(res.data)) getAccessToken().then(response => {
const listData = JSON.parse(res.data).data.list console.log('查看获取的token值',response)
this.cameraIndexCodeList = listData.map((item,index) => { if (response.data.code == 200) {
return { console.log('查看获取的token值',response.data.data)
cameraIndexCode: item.cameraIndexCode.replace(/(^\s*)/g, "").replace(/(\s*$)/g, ""), //监控点编号 this.accessToken = response.data.data.accessToken
ezvizDirect: 0, this.getDeviceList()
gpuMode: 0, //是否开启GPU硬解 // this.getInit(this.accessToken)
streamMode: 0, //主子码流标识 }
transMode: 1, //传输协议 })
wndId: index + 1 //可指定播放窗口 },
// 获取萤石云的设备信息
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)
}) })
this.initPlugin(); } 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,
}) })
}, },
startPreview() { getInit1(token,videoUrl){
const that = this console.info('视频流是',videoUrl)
console.log('this.cameraIndexCodeList', JSON.stringify({list: that.cameraIndexCodeList})) this.player1 = new EZUIKit.EZUIKitPlayer({
this.oWebControl.JS_RequestInterface({ id: 'video-container1', // 视频容器ID
funcName: "startMultiPreviewByCameraIndexCode", accessToken: token,
argument: JSON.stringify({list: that.cameraIndexCodeList}) url: videoUrl,
}).then(function (oData) { // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
console.log('oData', oData) 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);
}); });
}, },
stopPreview() { capturePicture1() {
this.oWebControl.JS_RequestInterface({ var capturePicturePromise = this.player1.capturePicture(
funcName: "stopAllPreview" `${new Date().getTime()}`
);
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data);
}); });
}, },
initPlugin() { capturePicture2() {
const that = this; var capturePicturePromise = this.player2.capturePicture(
// 初始化插件 `${new Date().getTime()}`
this.oWebControl = new WebControl({ );
szPluginContainer: "playWnd", // 指定容器id capturePicturePromise.then((data) => {
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 console.log("promise 获取 数据", data);
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功
that.oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack
});
that.oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
that.init(); // 创建播放实例成功后初始化
});
}, function () { // 启动插件服务失败
});
},
cbConnectError: function () { // 创建WebControl实例失败
that.oWebControl = null;
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin();
}, 3000)
} else {
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
that.oWebControl = null;
WebControl.JS_WakeUp("VideoWebPlugin://");
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin();
}, 3000)
} else {
}
}
}); });
}, },
init() { capturePicture3() {
let that = this var capturePicturePromise = this.player3.capturePicture(
this.getPubKey(function () { `${new Date().getTime()}`
console.log('LKLLLLLLLLLLLLLLLLLLLLLL', videoParams.APPKEY) );
////////////////////////////////// 请自行修改以下变量值 //////////////////////////////////// capturePicturePromise.then((data) => {
var appkey = videoParams.APPKEY; //综合安防管理平台提供的appkey，必填 console.log("promise 获取 数据", data);
var secret = that.setEncrypt(videoParams.SECRETKEY); //综合安防管理平台提供的secret，必填 });
var ip = videoParams.VIDEOIP; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = videoParams.VIDEOPORT; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "2x2"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
that.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs //自定义工具条按钮
})
}).then(function (oData) {
const playwnd = that.$refs.playWnd
console.log('playwnd', playwnd.offsetWidth, playwnd.offsetHeight)
that.oWebControl.JS_Resize(playwnd.offsetWidth, playwnd.offsetHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
that.startPreview()
});
})
}, },
setEncrypt(value) { //开始录制
var encrypt = new JSEncrypt(); startSave() {
encrypt.setPublicKey(this.pubKey); var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
return encrypt.encrypt(value); // 将开始录制按钮隐藏
}, this.recordButton = false
getPubKey(callback) { startSavePromise.then((data) => {
let that = this console.log("promise 获取 数据", data);
this.oWebControl.JS_RequestInterface({ });
funcName: "getRSAPubKey", },
argument: JSON.stringify({ // 结束录制
keyLength: 1024 stopSave() {
}) var stopSavePromise = this.player.stopSave();
}).then(function (oData) { // 显示开始录制
console.log(oData); this.recordButton = true
if (oData.responseMsg.data) { stopSavePromise.then((data) => {
that.pubKey = oData.responseMsg.data; console.log("promise 获取 数据", data);
callback() });
} },
}) 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);
});
}, },
// 推送消息
cbIntegrationCallBack(oData) {
// console.log('cbIntegrationCallBack2222222222222',oData)
// showCBInfo(JSON.stringify(oData.responseMsg));
}
} }
} }
</script> </script>
<style scoped> <style scoped>
.video-watch { el-icon {
margin-top: 20px; font-size: 20px !important;
margin-bottom: 20px;
min-height: calc(80vh - 84px);
width: 95%;
}
.video-now {
width: 95vw;
height: 87vh;
background: #fff;
margin: 0 auto;
display: flex;
justify-content: center;
} }
</style> </style>
src/views/video/yingshi.vue
View file @ 85b1e20e
<template> <template>
<div class="hello-ezuikit-js"> <div style="background-color: #D4D9E5">
<div id="video-container" <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
style="width: 920px; height: 400px"> <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" @click="abv">
<el-button @click="fulScreen">全屏</el-button> <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> </div>
</div>
</template> </template>
<script> <script>
import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件 import EZUIKit from '../../../public/js/ezuikit' //引入第三方插件
import {getAccessToken,getDeviceList,getStream} from '@/api/system/video'
export default { export default {
name: 'EZUIKitJs', name: 'EZUIKitJs',
data() { data() {
return { return {
// 录制按钮
recordButton: true,
recordButton1: true,
recordButton2: true,
recordButton3: true,
// 设备信息列表
deviceList: [],
// token值
accessToken: '',
showButton: false,
player: null, player: null,
player1: null,
player2: null,
player3: null,
} }
}, },
mounted() { mounted() {
console.log('mounted 组件挂载完毕状态=======》.') this.getToken()
let accessToken = 'at.72lfl37x1gy7qg868wwtvsv02b1gq2if-9dcvoptaky-15eq2k5-ljpwdyhhc' // let accessToken = 'at.72lfl37x1gy7qg868wwtvsv02b1gq2if-9dcvoptaky-15eq2k5-ljpwdyhhc'
// let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8' // let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
let accessUrl = 'ezopen://open.ys7.com/AW5687499/1.live'
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: accessToken,
url: accessUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: '6ab9d0384ff5459cbe86adff53eac251', //模板
plugin: ['talk'], // 加载插件，talk-对讲
width: 920,
height: 400,
})
}, },
methods: { 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() { fulScreen() {
this.player.fullScreen() 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> </script>
<style scoped>
el-icon {
font-size: 20px !important;
}
</style>
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