trtc-cloud-js-sdk 1.0.13 → 2.0.0

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

@@ -0,0 +1,174 @@
+<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

@@ -0,0 +1,206 @@
+<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

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,118 @@
+<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>