集成摄像头

朱桂飞

2023-11-23 4f7115ed0d5ac6d955d44936cf806ab666f688d2

集成摄像头

 package.json

@@ -62,6 +62,7 @@
    "echarts-liquidfill": "^3.1.0",
    "emoji-mart-vue-fast": "^11.1.1",
    "enquire.js": "^2.1.6",
    "ezuikit-js": "^0.7.2",
    "intro.js": "^5.1.0",
    "lodash-es": "^4.17.21",
    "lodash.get": "^4.4.2",

 src/views/dry/video/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
<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);
      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>