<template>
|
<div>
|
<div class="app">
|
<div class="video-box">
|
<div :class="['video-item', { 'video-hover': !item.isplay }]" v-for="(item, index) in videoList" :key="index">
|
<div class="item-title">{{ item.name }}</div>
|
<div :id="item.id" class="item-player base_bg"></div>
|
<div class="video-control">
|
<div class="playBtn">
|
<CaretRightOutlined @click="playNext(item)" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { CaretRightOutlined } from '@ant-design/icons-vue'
|
import { onMounted, ref, onUnmounted } from 'vue'
|
import EZUIKit from 'ezuikit-js/ezuikit'
|
import axios from 'axios'
|
|
const playerWidth = 420
|
const playerHeight = 270
|
const templateCode = 'b45cd61a6e2b40389f1e914e08ab7160'
|
|
// TODO token获取逻辑放到服务端
|
const accessToken = ref()
|
const appKey = 'b1849dcfc58d4446b1d651856bc72edd'
|
const appSecret = 'c82d202fdc9d6af53fc7719623526cc1'
|
//直播地址 BB2645510-摄像机序列号 hd-高清（去掉则播放普通） 1-通道号
|
const videoList = ref([
|
{
|
id: 'video_1',
|
url: 'ezopen://open.ys7.com/FR0817313/1.live',
|
name: '进门左手边-主摄',
|
isplay: false,
|
},
|
{
|
id: 'video_2',
|
url: 'ezopen://open.ys7.com/FR0817313/2.live',
|
name: '进门左手边-广角',
|
isplay: false,
|
},
|
{
|
id: 'video_3',
|
url: 'ezopen://open.ys7.com/FR0817368/1.live',
|
name: '进门右手边-主摄',
|
isplay: false,
|
},
|
{
|
id: 'video_4',
|
url: 'ezopen://open.ys7.com/FR0817368/2.live',
|
name: '进门右手边-广角',
|
isplay: false,
|
},
|
{
|
id: 'video_5',
|
url: 'ezopen://open.ys7.com/FR0817377/1.live',
|
name: '左墙靠门-主摄',
|
isplay: false,
|
},
|
{
|
id: 'video_6',
|
url: 'ezopen://open.ys7.com/FR0817377/2.live',
|
name: '左墙靠门-广角',
|
isplay: false,
|
},
|
{
|
id: 'video_7',
|
url: 'ezopen://open.ys7.com/FR0817358/1.live',
|
name: '左墙靠办公室-主摄',
|
isplay: false,
|
},
|
{
|
id: 'video_8',
|
url: 'ezopen://open.ys7.com/FR0817358/2.live',
|
name: '左墙靠办公室-广角',
|
isplay: false,
|
},
|
])
|
|
let peviewPlayer = ref()
|
|
function initVideo(item) {
|
//设置当前播放器为播放状态
|
item.isplay = true
|
peviewPlayer.value = new EZUIKit.EZUIKitPlayer({
|
id: item.id, // 视频容器ID
|
accessToken: accessToken.value,
|
url: item.url,
|
template: templateCode,
|
plugin: ['talk'], // 加载插件，talk-对讲
|
width: playerWidth,
|
height: playerHeight,
|
handleSuccess: (res) => {},
|
handleError: (res) => {
|
if (res.retcode == '10002') {
|
console.info('初始化失败，token过期')
|
}
|
},
|
})
|
setTimeout(() => {
|
console.info('初始化完成，开始自动播放')
|
peviewPlayer.value.play()
|
}, 1000)
|
}
|
|
function initPlayer() {
|
playNext(videoList.value[0])
|
}
|
|
function playNext(item) {
|
setPlayNone()
|
if (!peviewPlayer.value) {
|
initVideo(item)
|
} else {
|
peviewPlayer.value.stop().then(() => {
|
initVideo(item)
|
peviewPlayer.value.play()
|
})
|
}
|
}
|
|
/**
|
* 设置所有播放器状态为未播放
|
*/
|
function setPlayNone() {
|
videoList.value.forEach((item) => {
|
if (item.isplay) {
|
item.isplay = false
|
}
|
})
|
}
|
|
function checkAccessToken() {
|
const ez_expireTime = localStorage.getItem('ez_expireTime')
|
const ez_accessToken = localStorage.getItem('ez_accessToken')
|
const now = new Date().getTime()
|
const time = ez_expireTime - now //判断token是否过期
|
|
accessToken.value = ez_accessToken
|
if (ez_accessToken && time > 1000 * 60) {
|
initPlayer()
|
} else {
|
getAccessToken()
|
}
|
}
|
|
async function getAccessToken() {
|
const api = axios.create({
|
baseURL: 'https://open.ys7.com', // 设置为空字符串，或者设置为第三方接口的基本URL
|
})
|
try {
|
const response = await api.post('/api/lapp/token/get?appKey=' + appKey + '&appSecret=' + appSecret) // 这里的路径为相对路径，不包含前缀
|
if (response && response.data && response.data.code == 200) {
|
localStorage.setItem('ez_accessToken', response.data.data.accessToken)
|
localStorage.setItem('ez_expireTime', response.data.data.expireTime)
|
accessToken.value = response.data.data.accessToken
|
initPlayer()
|
}
|
console.log(response)
|
// 处理成功响应数据
|
} catch (error) {
|
console.error(error)
|
// 处理错误
|
}
|
}
|
|
// DOM挂载完成后渲染图表
|
onMounted(() => {
|
checkAccessToken()
|
})
|
|
onUnmounted(() => {
|
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.app {
|
width: 100%;
|
display: flex;
|
}
|
|
.video-box {
|
width: 100%;
|
margin: 10px;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
background-color: white;
|
}
|
|
.video-item {
|
position: relative;
|
width: 420px;
|
height: 300px;
|
margin: 10px;
|
display: flex;
|
flex-direction: column;
|
|
.item-title {
|
width: 100%;
|
height: 30px;
|
font-weight: bold;
|
}
|
|
.base_bg {
|
height: 100%;
|
}
|
|
.base_bg::before {
|
content: '';
|
display: block;
|
background-image: url(/src/assets/images/dry/bg/img_video.png);
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 30px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
.video-control {
|
position: absolute;
|
top: 30px;
|
width: 100%;
|
height: 270px;
|
display: none; /* 默认隐藏 */
|
background-color: rgba(0, 0, 0, 0.3);
|
|
.playBtn {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
color: white;
|
font-size: 40px;
|
transform: translate(-50%, -50%);
|
}
|
}
|
}
|
|
.video-hover {
|
}
|
|
.video-hover:hover .video-control {
|
display: block;
|
}
|
</style>
|
