加入直播页面

src/store/index.js

@@ -16,6 +16,7 @@ import exportuser from '@common/store/market/exportuser';
 import user from './user';
 import place from './place';
 import onliveUser from './onlive/user';
+import onliveUser from './onlive/gensign';
 import * as ustate from '@/store/common/state';
 import * as umutations from '@/store/common/mutations';
 

src/store/onlive/gensign.js

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  gensignInfo: `/api/onlive/user/gensign`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async gensignFetch({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.gensignInfo}`, payload);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/live/parts/liveList.vue

@@ -13,7 +13,7 @@
             </p>
           </el-col>
           <el-col :span="6" class="right">
-            <p @click="$router.push({ path: '/live/roomDetail', query: { id: item.id } })" v-if="item.roomname">进入房间</p>
+            <p @click="$router.push({ path: '/live/roomDetail', query: { id: item.id,roomname:item.roomname } })" v-if="item.roomname">进入房间</p>
             <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
           </el-col>
         </el-col>

src/views/live/parts/roomsDetail.vue

@@ -4,7 +4,7 @@
       <el-col :span="24" class="info">
         <el-col :span="24" class="video">
           <el-col :span="24" class="videoLeft">
-            <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer videos" :playsinline="true"></videoPlayer>
+            <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
           </el-col>
           <!-- <el-col :span="9" class="videoRight">
             右侧
@@ -29,59 +29,66 @@
 </template>
 
 <script>
-import 'video.js/dist/video-js.css';
-import 'vue-video-player/src/custom-theme.css';
-import { videoPlayer } from 'vue-video-player';
-import 'videojs-flash';
+import TRTC from 'trtc-js-sdk';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: gensign } = createNamespacedHelpers('gensign');
 export default {
   name: 'roomsDetail',
   props: {},
   components: {
-    videoPlayer,
+    
   },
   data: function() {
     return {
-      input: '',
-      videoSrc: '',
-      videoOptions: {
-        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
-        autoplay: false, //如果true,浏览器准备好时开始回放。
-        muted: false, // 默认情况下将会消除任何音频。
-        loop: false, // 导致视频一结束就重新开始。
-        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-        language: 'zh-CN',
-        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        techOrder: ['flash', 'html5'], // 兼容顺序
-        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-        sources: [
-          {
-            // 流配置，数组形式，会根据兼容顺序自动切换
-            type: 'rtmp/hls',
-            src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
-            // src: 'rtmp://play.liaoningdoupo.com/live/1',
-          },
-        ],
-        poster: '', //你的封面地址
-        // width: document.documentElement.clientWidth,
-        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-        controlBar: {
-          timeDivider: true,
-          durationDisplay: true,
-          remainingTimeDisplay: false,
-          fullscreenToggle: true, //全屏按钮
-        },
-      },
+      client_: null,
+      localStream_: null,
+      sdkAppId_: '1400380125',
+      userId_: '',
     };
   },
-  created() {},
+  created() {
+    this.initclient();
+  },
   methods: {
+    ...gensign(['gensignFetch']),
     onSubmit() {
       console.log(this.input);
     },
+    async initclient() {
+      this.userId_ = this.user.uid;
+      const res = await this.gensignFetch({ userid: this.userId_ });
+      if (this.$checkRes(res)) {
+        this.client_ = TRTC.createClient({
+          mode: 'live',
+          sdkAppId: this.sdkAppId_,
+          userId: this.userId_,
+          userSig: res.data,
+        });
+        await this.client_.join({ roomId: this.roomname, role: 'anchor' });
+        this.client_.on('stream-subscribed', event => {
+          const remoteStream = event.stream;
+          // 远端流订阅成功，播放远端音视频流
+          remoteStream.play('look-video');
+        });
+        // 监听远端流增加事件
+        this.client_.on('stream-added', event => {
+          const remoteStream = event.stream;
+          // 订阅远端音频和视频流
+          this.client_.subscribe(remoteStream, { audio: true, video: true, screen: true }).catch(e => {
+            console.error('failed to subscribe remoteStream');
+          });
+        });
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    roomname() {
+      return this.$route.query.roomname;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -134,4 +141,9 @@ export default {
   height: 190px !important;
   border-radius: 10px;
 }
+#look-video {
+  width: 100%;
+  height: 200px;
+  grid-area: 1/1/3/4;
+}
 </style>