From 4f7115ed0d5ac6d955d44936cf806ab666f688d2 Mon Sep 17 00:00:00 2001
From: 朱桂飞 <18597012158>
Date: 星期四, 23 十一月 2023 15:27:54 +0800
Subject: [PATCH] 集成摄像头
---
src/views/dry/video/index.vue | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
package.json | 1
2 files changed, 272 insertions(+), 0 deletions(-)
diff --git a/package.json b/package.json
index aeec10b..1634a5e 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/dry/video/index.vue b/src/views/dry/video/index.vue
new file mode 100644
index 0000000..efeb39e
--- /dev/null
+++ b/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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ header: ["zoom"],
+ width: playerWidth,
+ height: playerHeight
+ });
+}
+
+function initPlayer3() {
+ new EZUIKit.EZUIKitPlayer({
+ id: "video-container3", // 瑙嗛瀹瑰櫒ID
+ accessToken: accessToken.value,
+ url: url3,
+ template: templateCode,
+ plugin: ["talk"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ width: playerWidth,
+ height: playerHeight
+ });
+}
+
+function initPlayer4() {
+ new EZUIKit.EZUIKitPlayer({
+ id: "video-container4", // 瑙嗛瀹瑰櫒ID
+ accessToken: accessToken.value,
+ url: url4,
+ template: templateCode,
+ plugin: ["talk"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ width: playerWidth,
+ height: playerHeight
+ });
+}
+
+function initPlayer5() {
+ new EZUIKit.EZUIKitPlayer({
+ id: "video-container5", // 瑙嗛瀹瑰櫒ID
+ accessToken: accessToken.value,
+ url: url5,
+ template: templateCode,
+ plugin: ["talk"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ 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>
--
Gitblit v1.9.3