发帖
手机端
扫码访问
 立即注册
 登录
QQ登陆
BSAY论坛»论坛 › 软件开发 › VUE › Vue3+TS接入萤石云实现视频切换播放
返回列表 发新帖
查看: 9|回复: 0

Vue3+TS接入萤石云实现视频切换播放

[复制链接]
admin
  • 打卡等级：偶尔看看
  • 打卡总天数：13
  • 打卡月天数：3
  • 打卡总奖励：200
  • 最近打卡：2024-12-04 15:22:08

27

主题

3

回帖

40万

积分

管理员

BSAY论坛创始人

积分
400267
QQ
发表于 5 天前 | 显示全部楼层 |阅读模式
主要就是两个文件，一个index.vue，一个index.ts，效果图如下：



index.vue代码如下：
  1. <template>
  2.         <div class="layout-padding bg data">
  3.                 <div class="data-content">
  4.                         <div class="data_left">
  5.                                 <div class="left_tree">
  6.                                         <ul class="parent_ul">
  7.                                                 <li class="parent zhedie">
  8.                                                         <ul class="child">
  9.                                                                 <li v-for="(video, index) in videoData" :key="index" :class="{ selected: deviceSelect === index }" @click="playClick(video, index)">
  10.                                                                         {{ video.channelName }}
  11.                                                                 </li>
  12.                                                         </ul>
  13.                                                 </li>
  14.                                         </ul>
  15.                                 </div>
  16.                         </div>
  17.                         <div class="data_right">
  18.                                 <div class="right_video videobox" id="play">
  19.                                         <div class="video-monitor-device-container" style="height: 100%">
  20.                                                 <div class="multiple-player-window" style="height: 100%">
  21.                                                         <div class="player-window-item" style="height: 100%">
  22.                                                                 <div id="video-box1"></div>
  23.                                                         </div>
  24.                                                 </div>
  25.                                         </div>
  26.                                 </div>
  27.                         </div>
  28.                 </div>
  29.         </div>
  30. </template>

  32. <script lang="ts" setup>
  33. import { getDeviceList, getPlayVideo } from './video';
  34. import EZUIKit from 'ezuikit-js';

  36. interface IPlayer {
  37.         play: Function;
  38.         stop: Function;
  39.         getOSDTime: Function;
  40.         capturePicture: Function;
  41.         openSound: Function;
  42.         closeSound: Function;
  43.         startSave: Function;
  44.         stopSave: Function;
  45.         startTalk: Function;
  46.         stopTalk: Function;
  47.         fullScreen: Function;
  48.         destroy: Function;
  49. }

  51. let player: IPlayer;

  53. const videoData = ref();
  54. const deviceSelect = ref(0);
  55. const chanel = ref(0);

  57. onMounted(() => {
  58.         getDeviceData();
  59. });

  61. const getDeviceData = async () => {
  62.         videoData.value = await getDeviceList();
  63.         if (videoData.value.length > 0) {
  64.                 chanel.value = videoData.value[0];
  65.                 await initPlay(videoData.value[0]);
  66.         }
  67. };

  69. const playClick = (device: any, index: number) => {
  70.         deviceSelect.value = index;
  71.         initPlay(device);
  72. };

  74. const initPlay = async (chanel: any) => {
  75.         const res = await getPlayVideo(chanel);
  76.         if (res.url) {
  77.                 if (player) {
  78.                         destroy();
  79.                 }
  80.                 const element = document.getElementById('video-box1');
  81.                 const parentElement = element.parentNode;
  82.                 const parentWidth = parentElement.offsetWidth;
  83.                 const parentHeight = parentElement.offsetHeight;

  85.                 player = new EZUIKit.EZUIKitPlayer({
  86.                         id: 'video-box1',
  87.                         accessToken: res.token,
  88.                         url: res.url,
  89.                         // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
  90.                         template: 'pcLive',
  91.                         plugin: ['talk'],
  92.                         width: parentWidth,
  93.                         height: parentHeight,
  94.                 });
  95.                 window.player = player;
  96.         }
  97. };

  99. const destroy = () => {
  100.         const destroyPromise = player.stop();
  101.         destroyPromise.then((data: any) => {
  102.                 console.log('promise 获取 数据', data);
  103.         });
  104.         const videoBox = document.getElementById('video-box1');
  105.         videoBox.innerHTML = '';
  106.         player = null!;
  107. };
  108. </script>

  110. <style>
  111. @import url(./video.scss);
  112. @import url(../eemp.scss);
  113. @import url(../map.scss);
  114. </style>
复制代码
index.ts代码如下：

  1. import axios from 'axios';
  2. import { Session } from '/@/utils/storage';

  4. const ysUrl: string = "https://open.ys7.com/api/lapp";
  5. let token: string = "";
  6. let appKey: string = "你的key";
  7. let appSecret: string = "你的secret";
  8. const orgId = Session.getOrgId();

  10. export const isOrg = (orgName: string) => {
  11.     const tenantName = Session.getTenantName();
  12.     return tenantName && tenantName.includes(orgName);
  13. };

  15. interface Camera {
  16.     channelName: string;
  17.     channelNo: number;
  18.     deviceSerial: string;
  19. }

  21. export const getDeviceList = async () => {

  23.     let videoToken = localStorage.getItem(orgId + '_videoToken');

  25.     const accessToken = new FormData();
  26.     accessToken.append('accessToken', videoToken || '');
  27.     if (videoToken === null || videoToken === undefined) {
  28.         getYsToken();
  29.     } else {
  30.         try {
  31.             const res = await axios.post(ysUrl + '/device/list', accessToken);
  32.             if (res.data.code === "10002") {
  33.                 localStorage.clear();
  34.                 getYsToken();
  35.                 await getDeviceList();
  36.             } else {
  37.                 if (!isOrg("测试站点")) {
  38.                     return await getCamera(res.data.data[1]);;
  39.                 } else {
  40.                     return await getCameraList(res.data.data);
  41.                 }
  42.             }
  43.         } catch (error) {
  44.             return null;
  45.         }
  46.     }
  47. }

  49. export const getCameraList = async (devices: any[]) => {
  50.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  51.     if (!Array.isArray(devices)) {
  52.         return [];
  53.     }

  55.     const cameraPromises = devices.map(async (device) => {
  56.         const formData = new FormData();
  57.         formData.append('accessToken', videoToken);
  58.         formData.append('deviceSerial', device.deviceSerial);

  60.         try {
  61.             const res = await axios.post(ysUrl + '/device/camera/list', formData);
  62.             const camerasData = res.data.data;

  64.             return camerasData
  65.                 .filter((camera: any) => camera.status !== -1)
  66.                 .map((camera: any) => {
  67.                     return {
  68.                         channelName: camera.channelName,
  69.                         channelNo: camera.channelNo,
  70.                         deviceSerial: camera.deviceSerial,
  71.                     };
  72.                 });
  73.         } catch (error) {
  74.             return [];
  75.         }
  76.     });

  78.     const results = await Promise.all(cameraPromises);
  79.     return results.flat();
  80. }

  82. export const getCamera = async (device: any) => {
  83.     const formData = new FormData();
  84.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  85.     formData.append('accessToken', videoToken);
  86.     formData.append('deviceSerial', device.deviceSerial);

  88.     try {
  89.         const res = await axios.post(ysUrl + '/device/camera/list', formData);
  90.         const camerasData = res.data.data;

  92.         const filteredCameraList: Camera[] = camerasData
  93.             .filter((camera: any) => camera.status !== -1)
  94.             .map((camera: any) => {
  95.                 return {
  96.                     channelName: camera.channelName,
  97.                     channelNo: camera.channelNo,
  98.                     deviceSerial: camera.deviceSerial,
  99.                 };
  100.             });
  101.         return filteredCameraList;
  102.     } catch (error) {
  103.         return [];
  104.     }
  105. }

  107. export const getPlayVideo = async (Camera: any) => {
  108.     const formData = new FormData();
  109.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  110.     formData.append('accessToken', videoToken);
  111.     formData.append('deviceSerial', Camera.deviceSerial);
  112.     formData.append('channelNo', Camera.channelNo);

  114.     try {
  115.         const res = await axios.post(ysUrl + '/v2/live/address/get', formData);
  116.         const playData = res.data.data;
  117.         playData.token = videoToken;
  118.         return playData;
  119.     } catch (error) {
  120.         console.error(error);
  121.         return [];
  122.     }
  123. }

  125. export const getYsToken = async () => {

  127.     const formData = new FormData();
  128.     formData.append('appKey', appKey);
  129.     formData.append('appSecret', appSecret);

  131.     let storedToken = localStorage.getItem(orgId + '_videoToken');
  132.     if (storedToken === undefined) {
  133.         token = storedToken;
  134.     } else {
  135.         await axios.post(ysUrl + '/token/get', formData)
  136.             .then((res) => {
  137.                 token = res.data.data.accessToken;
  138.                 localStorage.setItem(orgId + '_videoToken', token);
  139.             })
  140.             .catch((error) => {
  141.                 console.error(error);
  142.             });
  143.     }
  144. };
复制代码
样式这里就不分享，主要是个简单的例子，基本的效果已经实现了

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表