增加摄像头检测功能

src/layout/layout-part/heads.vue

@@ -8,9 +8,7 @@
         </el-col>
         <el-col :span="12" class="right">
           <span
-            ><el-link target="_blank" href="https://www.qcloudtrtc.com/webrtc-samples/abilitytest/index.html" :underline="false"
-              ><i class="iconfont iconbangding"></i>直播检测</el-link
-            ></span
+            ><el-link target="_blank" href="/livecheck" :underline="false"><i class="iconfont iconbangding"></i>直播检测</el-link></span
           >
           <span @click="passwdBtn()"><i class="iconfont iconmima_huaban1"></i>修改密码</span>
           <span

src/layout/main-layout.vue

@@ -46,6 +46,8 @@ export default {
       let route = window.location.pathname;
       if (route == '/login') {
         return route.includes('login');
+      } else if (route == '/livecheck') {
+        return route.includes('livecheck');
       } else {
         return route.includes('liveIndex');
       }

src/router/index.js

@@ -113,6 +113,12 @@ const routes = [
     meta: { title: '登录' },
     component: () => import('../views/login.vue'),
   },
+  {
+    path: '/livecheck',
+    name: 'livecheck',
+    meta: { title: '登录' },
+    component: () => import('../views/livecheck.vue'),
+  },
 ];
 const router = new VueRouter({
   mode: 'history',

src/views/livecheck.vue

@@ -0,0 +1,218 @@
+<template>
+  <div id="livecheck">
+    <el-row id="test-content" class="container">
+      <div class="header">
+        <h2 class="title">WEBRTC 能力测试</h2>
+        <el-button class="btn btn-info btn-circle btn-xl" type="danger" size="mini" @click="checkstart">开始</el-button>
+      </div>
+      <div class="header">
+        <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: gensign } = createNamespacedHelpers('gensign');
+import TRTC from 'trtc-js-sdk';
+export default {
+  name: 'livecheck',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    ...gensign(['gensignFetch']),
+    async checkstart() {
+      TRTC.checkSystemRequirements().then(result => {
+        if (!result) {
+          alert('Your browser is not compatible with TRTC');
+        }
+      });
+      await this.initclient();
+    },
+    async initclient() {
+      const userid_ = 'testlivecheck';
+      const res = await this.gensignFetch({ userid: userid_ });
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        const client_ = TRTC.createClient({
+          mode: 'live',
+          sdkAppId: '1400380125',
+          userId: userid_,
+          userSig: res.data,
+        });
+        await client_.join({ roomId: 9999, role: 'anchor' });
+        const localStream_ = await TRTC.createStream({
+          audio: true,
+          video: true,
+          userId: userid_,
+        });
+        localStream_.setVideoProfile('480p');
+        await localStream_.initialize();
+        await client_.publish(localStream_);
+        localStream_.play('main-video');
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+body {
+  /* padding: 50px; */
+  font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00b7ff;
+}
+
+.box {
+  width: 100%;
+  align-items: center;
+}
+.detail-box {
+  max-width: 640px;
+  width: 100%;
+  height: auto;
+  background: #e2e2e2;
+  margin-top: 2px;
+  font-family: Consolas;
+  font-size: 16px;
+  padding-top: 15px;
+  padding-left: 15px;
+  padding-bottom: 15px;
+  margin: auto;
+}
+#main-video {
+  width: 700px;
+  height: 500px;
+  grid-area: 1/1/3/4;
+  background-color: #000;
+}
+
+#test-content {
+  display: flex;
+  display: -webkit-flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.title {
+  width: 600px;
+  height: 70px;
+  color: white;
+  align-items: center;
+  display: flex;
+  padding-left: 20px;
+}
+.container {
+  padding: 0 !important;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  background: #4f7dc9;
+  max-width: 700px;
+  margin-bottom: 20px;
+  align-items: center;
+  width: 100%;
+  margin: auto;
+  padding: 0 10px;
+}
+.btn-circle {
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  padding: 6px 0;
+  font-size: 12px;
+  line-height: 1.428571429;
+  border-radius: 15px;
+}
+.btn-circle.btn-lg {
+  width: 50px;
+  height: 50px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 25px;
+}
+.btn-circle.btn-xl {
+  width: 70px;
+  height: 70px;
+  padding: 10px 16px;
+  font-size: 24px;
+  line-height: 1.33;
+  border-radius: 35px;
+}
+
+#start-btn {
+  display: flex;
+  font-size: 20px;
+  color: black;
+  background: #99dd99;
+}
+
+#detail-info {
+  display: flex;
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+}
+
+.title {
+  color: black;
+  font-size: 20px;
+}
+
+#stunserver {
+}
+
+div#meters {
+  padding: 10px;
+}
+
+div#meters > div {
+  margin: 0 0 0 0;
+}
+
+div#meters div.label {
+  display: inline-block;
+  font-weight: 400;
+  margin: 0 0.5em 0 0;
+  width: 5em;
+  color: #000;
+}
+
+div#meters div.value {
+  display: inline-block;
+}
+
+meter {
+  width: 50%;
+}
+
+meter#clip {
+  color: #db4437;
+}
+
+meter#slow {
+  color: #f4b400;
+}
+
+meter#instant {
+  color: #0f9d58;
+}
+</style>