herb.git - Gitblit

<template>
  <div>
    <div class="app">
      <div class="video-box">
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container1" class="item-player">
          </div>
 
        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container2" class="item-player">
 
          </div>
 
        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container3" class="item-player">
 
          </div>
 
        </div>
 
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container4" class="item-player">
 
          </div>
 
        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container5" class="item-player">
 
          </div>
 
        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container5_2" class="item-player">
 
          </div>
 
        </div>
 
      </div>
 
    </div>
  </div>
 
 
</template>
 
<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import EZUIKit from "ezuikit-js/ezuikit";
import axios from "axios";
 
 
const playerWidth = 420;
const playerHeight = 270;
const templateCode = "bef3c43bae064cc78f60bc76709ef2f2";
 
// TODO token获取逻辑放到服务端
const accessToken = ref();
const appKey = "bcd4b89660734f48b595cfcd80ab4ee4";
const appSecret = "8701a6ce59ddfc0e5335f89832bab23c";
 
//直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
const url1 = "ezopen://open.ys7.com/BB2645510/1.hd.live";
const url2 = "ezopen://open.ys7.com/BB2646044/1.hd.live";
const url3 = "ezopen://open.ys7.com/BB2646084/1.hd.live";
const url4 = "ezopen://open.ys7.com/BB2646113/1.hd.live";
const url5 = "ezopen://open.ys7.com/BB5066611/1.hd.live";
const url5_2 = "ezopen://open.ys7.com/BB5066611/2.hd.live";
 
 
let player1 = ref();
 
 
function initPlayer1() {
  player1 = new EZUIKit.EZUIKitPlayer({
    id: "video-container1", // 视频容器ID
    accessToken: accessToken.value,
    url: url1,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight,
    handleSuccess: (res => {
        console.info(res);
        console.info("初始化成功");
      }
    ),
    handleError: (res => {
        console.info(res);
        if (res.retcode == "10002") {
          console.info("初始化失败，token过期");
        }
      }
    )
  });
  setTimeout(() => {
    console.info("开始自动播放1号")
    player1.play();
  }, 1000);
}
 
function initPlayer2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container2", // 视频容器ID
    accessToken: accessToken.value,
    url: url2,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    header: ["zoom"],
    width: playerWidth,
    height: playerHeight
  });
}
 
function initPlayer3() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container3", // 视频容器ID
    accessToken: accessToken.value,
    url: url3,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
 
function initPlayer4() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container4", // 视频容器ID
    accessToken: accessToken.value,
    url: url4,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
 
function initPlayer5() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5", // 视频容器ID
    accessToken: accessToken.value,
    url: url5,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
 
function initPlayer5_2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5_2", // 视频容器ID
    accessToken: accessToken.value,
    url: url5_2,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
 
function initPlayer() {
  initPlayer1();
  initPlayer2();
  initPlayer3();
  initPlayer4();
  initPlayer5();
  initPlayer5_2();
}
 
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 {
  height: 300px;
  margin: 10px;
  width: 420px;
  display: flex;
  flex-direction: column;
 
  .item-title {
    width: 100%;
    height: 30px;
    font-weight: bold;
  }
 
}
 
 
</style>