请选择 进入手机版 | 继续访问电脑版
查看: 23|回复: 0

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

[复制链接]
  • 打卡等级:即来则安
  • 打卡总天数:15
  • 打卡月天数:5
  • 打卡总奖励:211
  • 最近打卡:2024-12-10 17:22:58

29

主题

3

回帖

40万

积分

管理员

BSAY论坛创始人

积分
400298
QQ
发表于 2024-11-29 17:53:14 | 显示全部楼层 |阅读模式
主要就是两个文件,一个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>

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

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

  48. let player: IPlayer;

  49. const videoData = ref();
  50. const deviceSelect = ref(0);
  51. const chanel = ref(0);

  52. onMounted(() => {
  53.         getDeviceData();
  54. });

  55. const getDeviceData = async () => {
  56.         videoData.value = await getDeviceList();
  57.         if (videoData.value.length > 0) {
  58.                 chanel.value = videoData.value[0];
  59.                 await initPlay(videoData.value[0]);
  60.         }
  61. };

  62. const playClick = (device: any, index: number) => {
  63.         deviceSelect.value = index;
  64.         initPlay(device);
  65. };

  66. const initPlay = async (chanel: any) => {
  67.         const res = await getPlayVideo(chanel);
  68.         if (res.url) {
  69.                 if (player) {
  70.                         destroy();
  71.                 }
  72.                 const element = document.getElementById('video-box1');
  73.                 const parentElement = element.parentNode;
  74.                 const parentWidth = parentElement.offsetWidth;
  75.                 const parentHeight = parentElement.offsetHeight;

  76.                 player = new EZUIKit.EZUIKitPlayer({
  77.                         id: 'video-box1',
  78.                         accessToken: res.token,
  79.                         url: res.url,
  80.                         // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
  81.                         template: 'pcLive',
  82.                         plugin: ['talk'],
  83.                         width: parentWidth,
  84.                         height: parentHeight,
  85.                 });
  86.                 window.player = player;
  87.         }
  88. };

  89. const destroy = () => {
  90.         const destroyPromise = player.stop();
  91.         destroyPromise.then((data: any) => {
  92.                 console.log('promise 获取 数据', data);
  93.         });
  94.         const videoBox = document.getElementById('video-box1');
  95.         videoBox.innerHTML = '';
  96.         player = null!;
  97. };
  98. </script>

  99. <style>
  100. @import url(./video.scss);
  101. @import url(../eemp.scss);
  102. @import url(../map.scss);
  103. </style>
复制代码
index.ts代码如下:

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

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

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

  12. interface Camera {
  13.     channelName: string;
  14.     channelNo: number;
  15.     deviceSerial: string;
  16. }

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

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

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

  42. export const getCameraList = async (devices: any[]) => {
  43.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  44.     if (!Array.isArray(devices)) {
  45.         return [];
  46.     }

  47.     const cameraPromises = devices.map(async (device) => {
  48.         const formData = new FormData();
  49.         formData.append('accessToken', videoToken);
  50.         formData.append('deviceSerial', device.deviceSerial);

  51.         try {
  52.             const res = await axios.post(ysUrl + '/device/camera/list', formData);
  53.             const camerasData = res.data.data;

  54.             return camerasData
  55.                 .filter((camera: any) => camera.status !== -1)
  56.                 .map((camera: any) => {
  57.                     return {
  58.                         channelName: camera.channelName,
  59.                         channelNo: camera.channelNo,
  60.                         deviceSerial: camera.deviceSerial,
  61.                     };
  62.                 });
  63.         } catch (error) {
  64.             return [];
  65.         }
  66.     });

  67.     const results = await Promise.all(cameraPromises);
  68.     return results.flat();
  69. }

  70. export const getCamera = async (device: any) => {
  71.     const formData = new FormData();
  72.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  73.     formData.append('accessToken', videoToken);
  74.     formData.append('deviceSerial', device.deviceSerial);

  75.     try {
  76.         const res = await axios.post(ysUrl + '/device/camera/list', formData);
  77.         const camerasData = res.data.data;

  78.         const filteredCameraList: Camera[] = camerasData
  79.             .filter((camera: any) => camera.status !== -1)
  80.             .map((camera: any) => {
  81.                 return {
  82.                     channelName: camera.channelName,
  83.                     channelNo: camera.channelNo,
  84.                     deviceSerial: camera.deviceSerial,
  85.                 };
  86.             });
  87.         return filteredCameraList;
  88.     } catch (error) {
  89.         return [];
  90.     }
  91. }

  92. export const getPlayVideo = async (Camera: any) => {
  93.     const formData = new FormData();
  94.     let videoToken = localStorage.getItem(orgId + '_videoToken') as string;
  95.     formData.append('accessToken', videoToken);
  96.     formData.append('deviceSerial', Camera.deviceSerial);
  97.     formData.append('channelNo', Camera.channelNo);

  98.     try {
  99.         const res = await axios.post(ysUrl + '/v2/live/address/get', formData);
  100.         const playData = res.data.data;
  101.         playData.token = videoToken;
  102.         return playData;
  103.     } catch (error) {
  104.         console.error(error);
  105.         return [];
  106.     }
  107. }

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

  109.     const formData = new FormData();
  110.     formData.append('appKey', appKey);
  111.     formData.append('appSecret', appSecret);

  112.     let storedToken = localStorage.getItem(orgId + '_videoToken');
  113.     if (storedToken === undefined) {
  114.         token = storedToken;
  115.     } else {
  116.         await axios.post(ysUrl + '/token/get', formData)
  117.             .then((res) => {
  118.                 token = res.data.data.accessToken;
  119.                 localStorage.setItem(orgId + '_videoToken', token);
  120.             })
  121.             .catch((error) => {
  122.                 console.error(error);
  123.             });
  124.     }
  125. };
复制代码
样式这里就不分享,主要是个简单的例子,基本的效果已经实现了

本帖子中包含更多资源

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

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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