trtc-cloud-js-sdk 2.0.0 → 2.1.0

package/examples/vueDemo/src/components/Tags.vue

@@ -1,174 +0,0 @@
-<template>
-    <div class="tags" v-if="tags.show">
-        <ul>
-            <li class="tags-li" v-for="(item,index) in tags.list" :class="{'active': isActive(item.path)}" :key="index">
-                <router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link>
-                <span class="tags-li-icon" @click="closeTags(index)">
-                    <i class="el-icon-close"></i>
-                </span>
-            </li>
-        </ul>
-        <div class="tags-close-box">
-            <el-dropdown @command="handleTags">
-                <el-button size="mini" type="primary">
-                    标签选项
-                    <i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <template #dropdown>
-                    <el-dropdown-menu size="small">
-                        <el-dropdown-item command="other">关闭其他</el-dropdown-item>
-                        <el-dropdown-item command="all">关闭所有</el-dropdown-item>
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
-        </div>
-    </div>
-</template>
-
-<script>
-import { useTagsStore } from '../store/tags'
-import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
-export default {
-    setup() {
-        const route = useRoute();
-        const router = useRouter();
-        const isActive = (path) => {
-            return path === route.fullPath;
-        };
-
-        const tags = useTagsStore();
-        // 关闭单个标签
-        const closeTags = (index) => {
-            const delItem = tags.list[index];
-            tags.delTagsItem(index);
-            const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
-            if (item) {
-                delItem.path === route.fullPath && router.push(item.path);
-            } else {
-                router.push("/");
-            }
-        };
-
-        // 设置标签
-        const setTags = (route) => {
-            const isExist = tags.list.some((item) => {
-                return item.path === route.fullPath;
-            });
-            if (!isExist) {
-                if (tags.list.length >= 8) tags.delTagsItem(0);
-                tags.setTagsItem({
-                    name: route.name,
-                    title: route.meta.title,
-                    path: route.fullPath,
-                });
-            }
-        };
-        setTags(route);
-        onBeforeRouteUpdate((to) => {
-            setTags(to);
-        });
-
-        // 关闭全部标签
-        const closeAll = () => {
-            tags.clearTags();
-            router.push("/");
-        };
-        // 关闭其他标签
-        const closeOther = () => {
-            const curItem = tags.list.filter((item) => {
-                return item.path === route.fullPath;
-            });
-            tags.closeTagsOther(curItem);
-        };
-        const handleTags = (command) => {
-            command === "other" ? closeOther() : closeAll();
-        };
-
-        // 关闭当前页面的标签页
-        // tags.closeCurrentTag({
-        //     $router: router,
-        //     $route: route
-        // });
-
-        return {
-            isActive,
-            tags,
-            closeTags,
-            handleTags,
-        };
-    },
-};
-</script>
-
-
-<style>
-.tags {
-    position: relative;
-    height: 30px;
-    overflow: hidden;
-    background: #fff;
-    padding-right: 120px;
-    box-shadow: 0 5px 10px #ddd;
-}
-
-.tags ul {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-}
-
-.tags-li {
-    float: left;
-    margin: 3px 5px 2px 3px;
-    border-radius: 3px;
-    font-size: 12px;
-    overflow: hidden;
-    cursor: pointer;
-    height: 23px;
-    line-height: 23px;
-    border: 1px solid #e9eaec;
-    background: #fff;
-    padding: 0 5px 0 12px;
-    vertical-align: middle;
-    color: #666;
-    -webkit-transition: all 0.3s ease-in;
-    -moz-transition: all 0.3s ease-in;
-    transition: all 0.3s ease-in;
-}
-
-.tags-li:not(.active):hover {
-    background: #f8f8f8;
-}
-
-.tags-li.active {
-    color: #fff;
-}
-
-.tags-li-title {
-    float: left;
-    max-width: 80px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-right: 5px;
-    color: #666;
-}
-
-.tags-li.active .tags-li-title {
-    color: #fff;
-}
-
-.tags-close-box {
-    position: absolute;
-    right: 0;
-    top: 0;
-    box-sizing: border-box;
-    padding-top: 1px;
-    text-align: center;
-    width: 110px;
-    height: 30px;
-    background: #fff;
-    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-}
-</style>

package/examples/vueDemo/src/components/tendency.vue

@@ -1,206 +0,0 @@
-<template>
-  <div class="line1">
-    <div :id="domId" class="" style="width: 90%;height:450px;"></div>
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts/lib/echarts';
-// 引入柱状图
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/markPoint';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/grid';
-export default {
-  mounted() {
-    this.myChart = echarts.init(document.getElementById(this.domId));
-    this.initData();
-  },
-  props: {
-    sevenDate: {
-      type: Array,
-      default: [],
-    },
-    sevenDay: {
-      type: Array,
-      default: [],
-    },
-    title: {
-      type: String,
-      default: '标题',
-    },
-    legend: {
-      type: Array,
-      default: [],
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    domId: {
-      type: String,
-      default: 'line1'
-    },
-    graphType: {
-      type: String,
-      default: 'line',
-    },
-  },
-  methods: {
-    initData() {
-      const colors = ['#5793f3', '#675bba', '#d14a61'];
-      const option = {
-        color: colors,
-        title: {
-          text: this.title,
-          subtext: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          // orient: 'vertical',
-          x: 'center',
-          y: 'bottom',
-          padding: [50, 50, 0, 0],
-          data: this.legend,
-        },
-        toolbox: {
-          show: this.graphType !== 'bar' ? true : false,
-          feature: {
-            dataZoom: {
-              yAxisIndex: 'none'
-            },
-            dataView: { readOnly: false },
-            magicType: { type: ['bar', 'line'] },
-            restore: {},
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: this.sevenDay
-        },
-        yAxis: [
-          {
-            type: 'value',
-            // name: '用户',
-            min: 0,
-            // max: 200,
-            position: 'left',
-            axisLine: {
-              lineStyle: {
-                color: '#999'
-              }
-            },
-            axisLabel: {
-              formatter: '{value}'
-            }
-          },
-          {
-            type: 'value',
-            // name: '订单',
-            min: 0,
-            // max: 200,
-            position: 'right',
-            axisLine: {
-              lineStyle: {
-                color: '#999'
-              }
-            },
-            axisLabel: {
-              formatter: '{value}'
-            }
-          },
-        ],
-        series: this.sevenDate.slice(0, 6).map((arr, index) => {
-          return {
-            name: this.legend[index],
-            type: this.graphType,
-            data: arr,
-            smooth: true, // true 为平滑曲线; false 为直线
-            yAxisIndex: 1,
-            markPoint: {
-              data: this.sevenDate.length > 1 ? [] : [
-                { type: 'max', name: '最大值' },
-                { type: 'min', name: '最小值' }
-              ]
-            },
-          };
-        }),
-        // series: [
-        //   {
-        //     name: '新注册用户',
-        //     type: 'line',
-        //     data: this.sevenDate[0],
-        //     yAxisIndex: 1,
-        //     markPoint: {
-        //       data: [
-        //         { type: 'max', name: '最大值' },
-        //         { type: 'min', name: '最小值' }
-        //       ]
-        //     },
-        //   },
-        //   {
-        //     name: '新增订单',
-        //     type: 'line',
-        //     data: this.sevenDate[1],
-        //     yAxisIndex: 1,
-        //     markPoint: {
-        //       data: [
-        //         { type: 'max', name: '最大值' },
-        //         { type: 'min', name: '最小值' }
-        //       ]
-        //     },
-        //   },
-        //   {
-        //     name: '新增管理员',
-        //     type: 'line',
-        //     data: this.sevenDate[2],
-        //     yAxisIndex: 1,
-        //     markPoint: {
-        //       data: [
-        //         { type: 'max', name: '最大值' },
-        //         { type: 'min', name: '最小值' }
-        //       ]
-        //     },
-        //   }
-        // ]
-      };
-      this.myChart.clear();
-      this.myChart.setOption(option);
-    }
-  },
-  watch: {
-    sevenDate: function () {
-      this.initData()
-    },
-    sevenDay: function () {
-      this.initData()
-    },
-    loading: function (isShowLoading) {
-      if (isShowLoading) {
-        this.myChart.showLoading({
-          title: '加载中',
-          mask: true,
-        });
-      } else {
-        this.myChart.hideLoading();
-      }
-    },
-  }
-}
-</script>
-
-<style lang="less">
-// @import '../style/mixin';
-
-.line1 {
-  display: flex;
-  justify-content: center;
-}
-</style>

package/examples/vueDemo/src/components/trtc/main-menu.vue

@@ -1,50 +0,0 @@
-<template name="main-menu">
-
-  <div class="main-menu">
-    <ul>
-      <li> <router-link to="/trtc-index" > RTC </router-link> </li>
-      <li> <router-link to="/live-index/anchor" > LIVE </router-link> </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "main-menu",
-}
-</script>
-
-<style scoped>
-.main-menu{
-  font-size: 2em;
-}
-.main-menu>ul {
-    display: block;
-    list-style: none;
-    margin: 30vh auto 5vh auto;
-    width: 50%;
-    padding: 0;
-}
-.main-menu>ul>li {
-    margin: 2px 5px;
-    height: 2em;
-    line-height: 2em;
-    text-align: center;
-}
-.main-menu>ul>li>a {
-    color: #fff;
-    text-decoration: none;
-    display: block;
-    border-radius: 5px;
-    height: 2em;
-    line-height: 2em;
-    margin: 1em;
-    background-color: #007bff;
-}
-.main-menu>ul>li>a:hover {
-  background-color: #0069d9;
-}
-</style>
-<style>
-
-</style>

package/examples/vueDemo/src/components/trtc/nav-bar.vue

@@ -1,53 +0,0 @@
-<template>
-<div class="back-href-container">
-    <div class="back-button">
-        <router-link :to="href" v-if="href">
-            <b-icon-chevron-left color="white"></b-icon-chevron-left>
-        </router-link>
-    </div>
-    <h3 class="title" v-if="title">{{title}}</h3>
-</div>
-
-</template>
-
-<script>
-
-
-export default {
-    props: {
-        href: {
-            type: String,
-            required: false
-        },
-        title: {
-            type: String,
-            required: false
-        }
-    },
-}
-
-</script>
-<style scoped>
-.back-href-container {
-    height: 5vh;
-    line-height: 5vh;
-    background-color: rgba(0,0,0, 0.5);
-}
-.back-button {
-    display: inline-block;
-    width: 5vw;
-    text-align: center;
-    font-size: 3vh;
-}
-.title {
-    display: inline-block;
-    margin: 0px;
-    padding: 0px;
-    top: 1vh;
-    left: 0;
-    text-align: center;
-    color: #fff;
-    width: 90vw;
-    font-size: 2vh;
-}
-</style>

package/examples/vueDemo/src/components/trtc/show-screen-capture.vue

@@ -1,118 +0,0 @@
-<template>
-    <div id="screens-list">
-        <div class="loading-animation" v-if="list.length===0">
-            <b-icon icon="arrow-clockwise" animation="spin" font-scale="2" ></b-icon>
-        </div>
-        <div v-for="item in list" :key="item.sourceId" :label="item.sourceName" class="screen-info"  
-            v-bind:data-id="item.sourceId"
-            v-bind:data-name="item.sourceName"
-            v-bind:data-type="item.type"
-            @click="onChoose">
-            <canvas :id="['screen_'+item.sourceId]" @onload="onCanvasLoaded"></canvas>
-            <p>
-                <b-button variant="link"> {{item.sourceName.length > 20 ? item.sourceName.slice(0,20)+'...' : item.sourceName }} </b-button>
-            </p>
-        </div>
-    </div>   
-</template>
-
-<script>
-import Log from '../common/log';
-let logger = new Log('ShowScreenCapture');
-export default {
-    data() {
-        return {
-
-        };
-    },
-
-    props: {
-        list: {
-            type: Array,
-            required: true
-        },
-        onClick : {
-            type: Function,
-            required: true
-        },
-    },
-
-    methods: {
-
-        onChoose (event) {
-            try {
-                this.onClick(event);
-            } catch(err) {
-                logger.log('onChoose error:', err);
-            }
-        },
-
-        onCanvasLoaded(event) {
-            logger.log('onCanvasLoaded:', event);
-        },
-
-        renderScreensList() {
-            if (this.list.length === 0) {
-                return;
-            }
-            let {list} = this;
-            let srcInfos = null;
-            let elId = '';
-            let cnvs = null;
-            let imgData = null;
-
-            for (let i = 0; i < list.length; i++) {
-                srcInfos = list[i];
-                if (srcInfos.thumbBGRA.length===0) continue;
-                elId = `screen_${srcInfos.sourceId}`;
-                cnvs = document.getElementById(elId);
-                cnvs.width = srcInfos.thumbBGRA.width;
-                cnvs.height = srcInfos.thumbBGRA.height;
-                imgData =  new ImageData(new Uint8ClampedArray(srcInfos.thumbBGRA.buffer), srcInfos.thumbBGRA.width,  srcInfos.thumbBGRA.height );
-                cnvs.getContext("2d").putImageData(imgData, 0, 0);
-            }
-        },
-    },
-
-    mounted() {
-        setTimeout(()=>{
-            this.renderScreensList.bind(this)();
-        }, 0);
-    }
-
-}
-
-</script>
-
-<style scoped>
-#screens-list {
-    text-align: center;
-    align-content: center;
-    height:70vh;
-    overflow:auto;
-}
-.loading-animation {
-    width:100vw;
-    height: auto;
-    text-align: center;
-}
-.screen-info {
-    display: inline-block;
-    text-align: center;
-    margin: 10px;
-    background-color: #fafafa;
-}
-.screen-info>p{
-    margin: 0;
-}
-.screen-info>canvas{
-    margin: 0;
-}
-.screen-info:hover {
-    background-color: #f2f2f2;
-    box-shadow: #333 0 0 10px;
-}
-.screen-info {
-    cursor: pointer;
-}
-</style>