trtc-cloud-js-sdk 1.0.13 → 2.0.0

package/examples/vueDemo/src/views/improve/live-room-audience.vue

@@ -0,0 +1,383 @@
+<template name="trtcRoomAudience">
+  <div id="live-room">
+    <nav-bar :title="'房间号：' + roomId+'；观众：'+userId"></nav-bar>
+
+    <!-- 视频容器 -->
+    <div id="video-container"></div>
+
+    <div id="controll-bar">
+      <b-button variant="link" @click="exitRoom">
+        <b-iconstack font-scale="1">
+          <b-icon icon="power" variant="warning"></b-icon>
+        </b-iconstack>
+      </b-button>
+    </div>
+
+    <div>
+      <b-modal id="no-anchor-modal" size="lg" title="提示" @ok="exitAndDeleteRoom">此房间没有主播，请换一个房间.</b-modal>
+      <b-modal
+        id="live-stop-modal"
+        size="lg"
+        title="提示"
+        @ok="exitRoom"
+      >所有主播已经离开，点“OK” 离开房间，点“chancel”继续等待。</b-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import TRTCCloud from 'trtc-js-sdk';
+import {destroyLiveRoom} from '../../common/live-room-service';
+import {
+  TRTCAppScene, 
+  TRTCVideoStreamType, 
+  TRTCVideoFillMode, 
+  TRTCRoleType, 
+  TRTCParams, 
+} from "@trtc/cloud-sdk-types";
+import genTestUserSig from '../../debug/gen-test-user-sig';
+import Log from '../../common/log';
+const logger = new Log(`trtcRoom`);
+let trtcCloud = null; // 用于TRTCIns 实例， mounted 时实体化
+export default {
+  data() {
+    return {
+      roomId: 0, 
+      userId: '',
+      videosList: [],
+      streamType: TRTCVideoStreamType.TRTCVideoStreamTypeBig,
+      isMuteMic: false,
+      isDisableCamara : false,
+      isScreenSharing: false,
+      getScreensTaskID: 0,
+      screensList: [],
+      screensListVisiable: false,
+      videoContainer: null,
+      enablePush: false,
+      anchorIdList: [], // 主播ID列表
+      noAnchorTimoutID: '',
+      noAnchorCountDown: 3, // 空房间倒计时检测的最大时长，如果达到了这个时间，仍没有触发 onUserVideoAvailable ，就会提示用户是否要退出此直播间。
+
+      // 存放远程用户视频列表
+      remoteVideos: {},
+    };
+  },
+
+  computed: {
+    subStreamWidth() {
+      return Math.floor(this.videoContainer.clientWidth * 0.2);
+    },
+
+    subStreamHeight () {
+      return Math.floor(this.videoContainer.clientHeight * 0.2);
+    }
+  },
+
+  methods: {
+
+    /** 
+     * 启动一个计时器，当进入了空的房间 n 秒后给出提示
+     */
+    startNoAnchorCountDown() {
+      this.noAnchorTimoutID = setTimeout(()=>{
+        if (this.anchorIdList.length===0) {
+          this.$bvModal.show('no-anchor-modal');
+        }
+      },this.noAnchorCountDown * 1000);
+    },
+
+
+    /**
+    * 当进入房间时触发的回调
+    * @param {number} result - 进房结果， 大于 0 时，为进房间消耗的时间，这表示进进房成功。如果为 -1 ，则表示进房失败。
+    **/
+    onEnterRoom(result) {
+      if ( result > 0 ) {
+        logger.log(`onEnterRoom，进房成功，使用了 ${result} 毫秒`);
+        this.startNoAnchorCountDown();
+      } else {
+        this.$bvToast.toast(`进房失败 ${result}`);
+        logger.warn(`onEnterRoom: 进房失败 ${result}`);
+      }
+    },
+
+    /**
+     * 当退出房间时触发的回调
+     */
+    onExitRoom(reason) {
+      logger.warn(`onExitRoom, reason: ${reason}`);
+    },
+
+    /**
+     * 当主播进房时，把主播ID push 到列表里，并返回列表的长度
+     */
+    anchorIn(uid) {
+      if (!this.anchorIdList.includes(uid)) {
+        this.anchorIdList.push(uid);
+      }
+      return this.anchorIdList.length;
+    },
+
+    /**
+     * 当主播退房时，把主播ID 从列表中 去除，并返回列表的长度
+     */
+    anchorOut(uid) {
+      let idx = this.anchorIdList.indexOf(uid);
+      this.anchorIdList = this.anchorIdList.slice(idx);
+      return this.anchorIdList.length;
+    },
+
+   /**
+    * 远程用户视频流的状态发生变更时触发。
+    * @param {number} uid - 用户标识
+    * @param {boolean} available - 画面是否开启
+    **/
+    onUserVideoAvailable(uid, available) {
+      logger.log(`onUserVideoAvailable: uid: ${uid}, available ${available}`);
+      if (available === 1) {
+        clearTimeout(this.noAnchorTimoutID);
+        this.anchorIn(uid);
+        this.showAnchorVideo(uid);
+        this.$bvToast.toast(`主播 ${uid} 进入房间`, {variant: 'primary'});
+      } else {
+        this.$bvToast.toast(`主播 ${uid} 退出房间`, {variant: 'warning'});
+        this.closeAnchorVideo(uid);
+        if (this.anchorOut() === 0) {
+          this.$bvModal.show('live-stop-modal');
+        }
+      }
+    },
+
+    /**
+     * 显示主播的视频，直播模式下，显示主播的画面
+     */
+    showAnchorVideo(uid) {
+      let id = `${uid}-${this.roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
+      logger.log(`showAnchorVideo: remoteVideoIndex: ${this.remoteVideoIndex}; uid: ${uid}; `);
+      let view = document.getElementById(id);
+      if (!view) {
+        view = document.createElement('div');
+        view.id = id;
+        this.videoContainer.appendChild(view);
+      }
+      if (view.className.indexOf('anchor-view') < 0) {
+        view.classList.add('anchor-view');
+      }
+      this.remoteVideos[id] = view;
+      trtcCloud.startRemoteView(uid, view);
+      trtcCloud.setRemoteViewFillMode(uid, TRTCVideoFillMode.TRTCVideoFillMode_Fill);
+      this.videoTypeSettingAutoWrap();
+    },
+
+    /**
+     * 关闭主播的视频
+     * @param {number} uid 
+     */
+    closeAnchorVideo(uid) {
+      let id = `${uid}-${this.roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
+      let view = document.getElementById(id);
+      if (view) {
+        this.videoContainer.removeChild(view);
+      }
+      delete this.remoteVideos[id];
+      this.remoteVideoIndex--;
+      this.videoTypeSettingAutoWrap();
+    },
+
+    /**
+     * 视频元素自动换行排版
+     */
+    videoTypeSettingAutoWrap () {
+      let maxPerline = 2; // 每行最多放三个
+      let remoteVideos = this.remoteVideos;
+      let winWidth = 100; // 窗口宽度，百分比值
+      let winHeight = 100; // 窗口高度，百分比值
+      let len = Object.keys(remoteVideos).length;
+      let nw = 1;
+      let nh = 1;
+      for (let id in remoteVideos) {
+        nw = len <= maxPerline ? len : maxPerline;
+        nh = Math.ceil(len / maxPerline);
+        remoteVideos[id].className = `user-video-container-auto-wrap`;
+        remoteVideos[id].style.width = `${winWidth / nw}vw`
+        remoteVideos[id].style.height = `${winHeight / nh}vh`
+      }
+    },
+
+    /**
+     * 当主播进入本房间
+     */
+    onRemoteUserEnterRoom(uid) {
+      logger.warn('onRemoteUserEnterRoom', uid);
+        if (!this.anchorIdList.includes(uid)) {
+          this.anchorIdList.push(uid);
+          this.$bvToast.toast(`主播 ${uid}，进入房间。`, {
+            variant: 'primary'
+          });
+        }
+    },
+
+    onRemoteUserLeaveRoom(uid) {
+      logger.warn('onRemoteUserLeaveRoom', uid);
+      this.closeAnchorVideo(uid);
+      if (this.anchorOut(uid) === 0) {
+        this.$bvModal.show('live-stop-modal');
+      }
+    },
+
+    /**
+     * 当远程用户屏幕分享的状态发生变化
+     **/
+    onUserSubStreamAvailable(uid, available) {
+      logger.log(`onUserSubStreamAvailable ${uid}, ${available}`);
+      if (available) {
+        this.showRemoteScreenSharing(uid);
+      } else {
+        this.closeRemoteScreenSharing(uid);
+      }
+    },
+
+    /**
+     * 显示远程用户的屏幕分享
+     */
+    showRemoteScreenSharing(uid) {
+      let id = `${uid}-${this.roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeSub}`;
+      logger.log(`showRemoteScreenSharing:  uid: ${id}`);
+      let W = this.subStreamWidth;
+      let H = this.subStreamHeight;
+      let view = document.getElementById(id);
+      if (!view) {
+        view = document.createElement('div');
+        view.id = id;
+        view.style.width = `${W}px`;
+        view.style.height = `${H}px`;
+        this.videoContainer.appendChild(view);
+      }
+      this.remoteVideos[id] = view;
+      trtcCloud.startRemoteSubStreamView(uid, view);
+      trtcCloud.setRemoteSubStreamViewFillMode(uid, TRTCVideoFillMode.TRTCVideoFillMode_Fill);
+      this.videoTypeSettingAutoWrap();
+    },
+
+    /**
+     * 关闭远程用户的屏幕分享
+     *
+     * @param {*} uid
+     */
+    closeRemoteScreenSharing (uid) {
+      let id = `${uid}-${this.roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeSub}`;
+      let view = document.getElementById(id);
+      if (view) {
+        this.videoContainer.removeChild(view);
+      }
+      delete this.remoteVideos[id];
+    },
+
+    /** 
+     * 离开房间
+    */
+    exitRoom(event) {
+      logger.log('exitRoom', event);
+      trtcCloud.exitRoom();
+      let my = this;
+      
+      setTimeout(()=>{
+        my.$router.push('/live-index/audience');
+      }, 0 );
+    },
+
+    /** 
+     * 退出并清除房间
+     */
+    exitAndDeleteRoom() {
+      destroyLiveRoom(this.roomId);
+      this.exitRoom();
+    }
+
+  },
+
+  mounted() {
+    // 1. 获取用于承载视频的 HTMLElement；
+    this.videoContainer = document.querySelector('#video-container');
+    logger.log(`mounted: `, this.$route.params);
+
+    // 获取 vue-router 传参：userId 和 roomId
+    this.roomId = parseInt(this.$route.params.roomId); // roomId 为整数类型
+    this.userId = this.$route.params.userId; // userId 为字符串类型
+
+    if (!this.roomId || !this.userId) {
+      this.$bvToast.toast('roomId 或 userId 为空，请填写后再试。');
+      this.$router.push('live-index/audience');
+      return;
+    }
+
+    // 2. 计算签名
+    this.sdkInfo = genTestUserSig(this.userId);
+
+    // 3. 实例化一个 TRTCCloud （包装了 TRTCCloud的类）
+    trtcCloud = new TRTCCloud();
+    logger.warn(`sdk version: ${trtcCloud.getSDKVersion()}`);
+
+    // 4. 配置基本的事件订阅
+    trtcCloud.on('onEnterRoom', this.onEnterRoom.bind(this));
+    trtcCloud.on('onExitRoom', this.onExitRoom.bind(this));
+    trtcCloud.on('onUserVideoAvailable', this.onUserVideoAvailable.bind(this));
+    trtcCloud.on('onRemoteUserEnterRoom', this.onRemoteUserEnterRoom.bind(this));
+    trtcCloud.on('onRemoteUserLeaveRoom', this.onRemoteUserLeaveRoom.bind(this));
+    trtcCloud.on('onUserSubStreamAvailable', this.onUserSubStreamAvailable.bind(this));
+
+    // 5. 进入房间
+    // TRTCParams 详细说明，请查看文档：https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCParams.html
+    let param = new TRTCParams();
+    param.sdkAppId = this.sdkInfo.sdkappid;
+    param.userSig = this.sdkInfo.userSig;
+    param.roomId = this.roomId;
+    param.userId = this.userId;
+    param.privateMapKey = ''; // 房间签名（非必填）7.1.157 版本以上（含），可以忽略此参数，7.1.157 之前的版本建议赋值为空字符串
+    param.businessInfo = ''; // 业务数据（非必填）7.1.157 版本以上（含），可以忽略此参数，7.1.157 之前的版本建议赋值为空字符串
+    param.role = TRTCRoleType.TRTCRoleAudience; // 直播场景下的角色，仅适用于直播场景（TRTCAppSceneLIVE 和 TRTCAppSceneVoiceChatRoom），视频通话场景下指定无效。默认值：主播（TRTCRoleAnchor）
+    trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneLIVE);
+
+    // 挂到 windows BOM 下，方便调试。
+    window.trtc = trtcCloud;
+  },
+
+  beforeDestroy() {
+    this.isScreenSharing = false;
+  }
+};
+</script>
+
+<style scoped>
+#controll-bar {
+  position: fixed;
+  width: 100%;
+  height: 10vh;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding-top: 0.9em;
+}
+
+#controll-bar > button {
+  margin: 0 2em;
+  border: none;
+}
+
+#controll-bar > button > .b-icon {
+  width: 2.5;
+}
+</style>
+<style>
+.user-video-container-auto-wrap {
+  float: left;
+  overflow: hidden;
+}
+</style>
+<style>
+.anchor-view {
+  width: 100vw;
+  height: 101vh;
+}
+</style>

package/examples/vueDemo/src/views/sdkAppId/index.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="fillcontain">
+    <div class="query-container">
+      <div class="query-project-name">
+        <label for="project-name">项目：</label>
+        <el-select class="query-select-container" v-model="selectValue" placeholder="请选择" id="project-name" multiple
+          collapse-tags @change="getNewSdkAppId">
+          <el-option v-for="(item, idx) in selectProjectNameList" :key="item.value + '-' + idx" :label="item.name"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+
+      <label for="date-range" class="date-range-label">日期选择：</label>
+      <el-date-picker class="date-range" v-model="dateRange" type="daterange" @blur="getNewSdkAppId"
+        placeholder="选择日期范围">
+      </el-date-picker>
+    </div>
+    <tendency :sevenDate='sevenDate' :sevenDay='sevenDay' :title='graphicTitle' :legend="legend" :loading="loading">
+    </tendency>
+    <div class="table_container">
+      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" border>
+        <el-table-column v-for="(item, index) in headerTable" :key="index" :label="item.label" :prop="item.name">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import tendency from '@/components/tendency.vue';
+import {
+  getProjectName,
+  getSdkAppId,
+} from "@/api/index";
+import { getUrlParam } from "@/utils/utils";
+
+const defaultProjectName = 'uniappApiExampleExt';
+export default {
+  data() {
+    return {
+      headerTable: [
+        {
+          label: "时间",
+          name: "time",
+        },
+      ],
+
+      graphicTitle: '新增 sdkAppId',
+      sevenDay: [],
+      sevenDate: [],
+      legend: [],
+      selectProjectNameList: [],
+      preSelectValue: [], // 前面选择的项目名称, 用于对比选择是否改变, 从而减少请求
+      selectValue: [],
+      preDateRange: [], // 前面选择的日期选择范围, 用于对比时间是否改变, 从而减少请求
+      dateRange: [], // 默认最近一周
+      loading: false,
+      tableLoading: false,
+      tableData: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  mounted() {
+    const fromSource = getUrlParam('from') || '';
+    // 访问来源于小马时，隐藏侧边栏、项目选择项
+    if (fromSource === 'bi') {
+      document.querySelector('.sidebar').style.display = 'none'; // 隐藏侧边栏
+      document.querySelector('.header').style.display = 'none'; // 隐藏 header
+      document.querySelector('.tags').style.display = 'none'; // 隐藏 tags
+      document.querySelector('.query-project-name').style.display = 'none'; // 隐藏 select
+      document.querySelector('.content-box').style.position = 'static';
+    }
+  },
+  components: {
+    tendency,
+  },
+  methods: {
+    async initData() {
+      try {
+        await this.getProjectNameList();
+        await this.getNewSdkAppId();
+      } catch (err) {
+        console.log("获取数据失败", err);
+      }
+    },
+    // 获取所有的项目名称列表
+    async getProjectNameList() {
+      try {
+        const response = await getProjectName({ type: 'external' });
+        this.selectProjectNameList = response.data && response.data.projectNameList || [];
+
+        // 项目名称处理
+        const urlProjectNameList = (getUrlParam('projectName') || '').length > 0 ? getUrlParam('projectName').split(',') : [];
+        if (urlProjectNameList.length > 0) {
+          this.selectValue = urlProjectNameList;
+          this.preSelectValue = this.selectValue;
+          this.headerTable = [...this.headerTable, ...urlProjectNameList.map(str => ({ length: str, name: `${str}Value` }))]
+        } else {
+          this.selectValue = [defaultProjectName];
+          this.preSelectValue = this.selectValue;
+          this.headerTable = [...this.headerTable, {
+            label: defaultProjectName,
+            name: `${defaultProjectName}Value`,
+          }]
+        }
+        // 查询时间处理
+        let startTime = getUrlParam('startTime') || '';
+        let endTime = getUrlParam('endTime') || '';
+        startTime = startTime.includes('-') ? startTime : +startTime;
+        endTime = endTime.includes('-') ? endTime : +endTime;
+        // 字符串时间('2022-08-03 12:12:04')、时间戳时间(1658592000000)，转成日期时间戳
+        if (startTime && endTime) { // url 中同时包含 startTime、endTime
+          startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
+          endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
+        } else if (!startTime && !endTime) { // url 中没有 startTime、endTime
+          startTime = (new Date()).getTime() - 7 * 24 * 60 * 60 * 1000;
+          endTime = (new Date()).getTime();
+        } else if (startTime && !endTime) { // url 中有 startTime 没有 endTime
+          startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD')).valueOf();
+          endTime = dayjs(dayjs(startTime + 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
+        } else if (!startTime && endTime) { // url 中没有 startTime 有 endTime
+          endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
+          startTime = dayjs(dayjs(endTime - 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
+        }
+        this.dateRange = [startTime, endTime];
+      } catch (error) {
+        console.error('getProjectNameList = ', error);
+      }
+    },
+    // 获取新增 sdkAppId 数据
+    async getNewSdkAppId() {
+      this.tableData = [];
+      this.sevenDay = [];
+      this.sevenDate = [];
+      this.legend = [];
+      const projectNameList = this.selectValue;
+      if (projectNameList.length === 0) {
+        return;
+      }
+      let startTimeStamps, endTimeStamps;
+      if (this.dateRange.length > 0) {
+        startTimeStamps = dayjs(dayjs(this.dateRange[0]).format('YYYY-MM-DD')).valueOf();
+        endTimeStamps = dayjs(dayjs(this.dateRange[1]).format('YYYY-MM-DD')).valueOf();
+      }
+      // 项目选择未改变且查询时间段未改变时, 不请求新的数据
+      if (this.dateRange.length > 0) {
+        if ((this.preSelectValue.join(',') === projectNameList.join(',')) && (this.preDateRange.join(',') === `${startTimeStamps},${endTimeStamps}`)) {
+          return;
+        }
+      } else {
+        if (this.preSelectValue.join(',') === projectNameList.join(',')) {
+          return;
+        }
+      }
+      this.preSelectValue = projectNameList;
+      this.preDateRange = [startTimeStamps, endTimeStamps];
+      this.headerTable = [this.headerTable[0], ...this.preSelectValue.map(str => ({ label: str, name: str }))]
+
+      try {
+        this.loading = true;
+        this.tableLoading = true;
+        const response = await getSdkAppId({
+          projectNameList,
+          startTimeStamps,
+          endTimeStamps,
+        });
+        this.loading = false;
+        this.tableLoading = false;
+        const { data } = response;
+        this.legend = projectNameList;
+        this.sevenDay = Object.keys(data[projectNameList[0]].data).map(str => dayjs(+str).format('YYYY-MM-DD'));
+        const dataList = projectNameList.map(key => {
+          const temp = data[key].data;
+          return Object.keys(temp).map(val => temp[val].num);
+        });
+        this.graphicTitle = `${this.selectValue.join(',')} 新增 sdkAppId`
+        this.sevenDate = dataList;
+        const tempData = dataList[0].map((key, idx) => {
+          let result = {
+            time: this.sevenDay[idx],
+          };
+          projectNameList.forEach((key, index) => {
+            const dateKey = new Date(this.sevenDay[idx] + ' 00:00:00').getTime();
+            const obj = data[key].data;
+            const sdkAppIdList = obj[`${dateKey}`].list.map(obj => obj.sdkAppId);
+            const content = sdkAppIdList.length > 0 ? dataList[index][idx] + '\nsdkAppId：' + sdkAppIdList.join(', ') : 0;
+            // const content = sdkAppIdList.length > 0 ? dataList[index][idx] + '【 ' + sdkAppIdList.join(', ') + ' 】' : 0;
+            result = {
+              ...result,
+              [`${key}`]: content,
+            }
+          });
+          return result;
+        });
+        this.tableData = tempData;
+      } catch (error) {
+        console.error(' getNewSdkAppId = ', error);
+        this.loading = false;
+        this.tableLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+// @import "../style/mixin";
+
+.query-container {
+  display: flex;
+  padding: 20px;
+  align-items: center;
+
+  .date-range-label {
+    margin-left: 12px;
+  }
+
+  .query-select-container {
+    width: 260px;
+  }
+}
+
+.el-table {
+  .cell {
+    white-space: pre-line;
+  }
+}
+
+.demo-table-expand {
+  font-size: 0;
+}
+
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+
+.table_container {
+  padding: 20px;
+}
+
+.Pagination {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 8px;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #20a0ff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+}
+</style>

package/examples/vueDemo/vite.config.js

@@ -0,0 +1,18 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+export default {
+  base: './',
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [vue()],
+  optimizeDeps: {
+    include: ['schart.js']
+  },
+  server: {
+    port: 8080,
+  }
+}