hhh

src/layout/live/detailmetting.vue

@@ -0,0 +1,284 @@
+<template>
+  <div id="detailInfo">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="4" class="left">
+          <el-col :span="24" class="leftTop">
+            <el-image :src="roomInfo.filedir"></el-image>
+            <p>{{ roomInfo.title }}</p>
+            <p>{{ roomInfo.content }}</p>
+          </el-col>
+          <el-col :span="24" class="leftDown">
+            <el-col :span="8" class="btn" @click.native="shexiangBtn()">
+              <i class="iconfont iconshexiangtou"></i>
+              <p>摄像头</p>
+            </el-col>
+            <el-col :span="8" class="btn" @click.native="tianchongBtn()">
+              <i class="iconfont iconmaikefeng-tianchong"></i>
+              <p>麦克风</p>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="20" class="right">
+          <el-col :span="24" class="rightTop">
+            <span @click="liveon"><i class="iconfont iconshexiangtou"></i>摄像头</span>
+            <span @click="liveclose">关闭</span>
+          </el-col>
+          <el-col :span="2" class="noVideo"> </el-col>
+          <el-col :span="20" class="video">
+            <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+          </el-col>
+          <el-col :span="2" class="noVideo"> </el-col>
+          <el-col :span="24" class="rightDown">
+            <!-- 开始直播 -->
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="摄像头" :visible.sync="shexiangDia" width="30%" :before-close="handleClose">
+      <el-select @change="cameraChange" v-model="cameraId" filterable placeholder="请选择摄像头">
+        <el-option v-for="item in cameras" :key="item.deviceId" :label="item.label" :value="item.deviceId"> </el-option>
+      </el-select>
+    </el-dialog>
+    <el-dialog title="麦克风" :visible.sync="tianchongDia" width="30%" :before-close="handleClose">
+      <el-select @change="micrChange" v-model="microphoneId" filterable placeholder="请选择麦克风">
+        <el-option v-for="item in microphones" :key="item.deviceId" :label="item.label" :value="item.deviceId"> </el-option>
+      </el-select>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: gensign } = createNamespacedHelpers('gensign');
+import TRTC from 'trtc-js-sdk';
+export default {
+  name: 'detailInfo',
+  props: {
+    roomInfo: null,
+  },
+  components: {},
+  data: function() {
+    return {
+      // 摄像头
+      shexiangDia: false,
+      cameraId: '',
+      cameras: [],
+      // 麦克风
+      tianchongDia: false,
+      microphoneId: '',
+      microphones: [],
+      client_: '',
+      localStream_: '',
+      sdkAppId_: '1400380125',
+
+      userId_: '1111',
+      open_: false,
+    };
+  },
+  created() {
+    this.initclient();
+    this.getDevices();
+  },
+  methods: {
+    ...gensign(['gensignFetch']),
+    async getDevices() {
+      this.cameras = await TRTC.getCameras();
+      this.microphones = await TRTC.getMicrophones();
+    },
+    async initclient() {
+      console.log(this.user.uid);
+      this.userId_ = this.user.uid;
+      const res = await this.gensignFetch({ userid: this.userId_ });
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        this.client_ = TRTC.createClient({
+          mode: 'live',
+          sdkAppId: this.sdkAppId_,
+          userId: this.userId_,
+          userSig: res.data,
+        });
+      }
+    },
+    async liveon() {
+      this.open_ = true;
+      console.log('8888--' + this.userId_);
+      if (this.cameraId === '' || this.microphoneId === '') {
+        this.$message({
+          message: '请选择摄像头和麦克风',
+          type: 'warning',
+        });
+        return;
+      }
+      await this.client_.join({ roomId: this.name, role: 'anchor' });
+      this.localStream_ = await TRTC.createStream({
+        audio: true,
+        video: true,
+        cameraId: this.cameraId,
+        microphoneId: this.microphoneId,
+        userId: this.userId_,
+      });
+      this.localStream_.setVideoProfile('480p');
+      await this.localStream_.initialize();
+      console.log('initialize local stream success');
+      // publish the local stream
+      await this.client_.publish(this.localStream_);
+      this.localStream_.play('main-video');
+      //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+    },
+    async shareon() {
+      const shareId = 'share-' + this.userId_;
+      const res = await this.gensignFetch({ userid: shareId });
+      if (this.$checkRes(res)) {
+        const shareClient = TRTC.createClient({
+          mode: 'videoCall',
+          sdkAppId: this.sdkAppId_,
+          userId: shareId,
+          userSig: res.data,
+        });
+        shareClient.setDefaultMuteRemoteStreams(true);
+        await shareClient.join({ roomId: this.name });
+        const localStream = TRTC.createStream({ audio: true, screen: true });
+        //localStream.setScreenProfile({ width: 200, height: 200, float: 'left', frameRate: 5, bitrate: 1600 /* kbps */ });
+        await localStream.initialize();
+        console.log('initialize share stream success');
+        await shareClient.publish(localStream);
+        this.client_.on('stream-added', event => {
+          const remoteStream = event.stream;
+          const remoteUserId = remoteStream.getUserId();
+          if (remoteUserId === shareId) {
+            // 取消订阅自己的屏幕分享流
+            this.client_.unsubscribe(remoteStream);
+          } else {
+            // 订阅其他一般远端流
+            this.client_.subscribe(remoteStream);
+          }
+        });
+      }
+    },
+    async liveclose() {
+      // 关闭视频通话
+      console.log(this.open_);
+      if (this.open_) {
+        const videoTrack = this.localStream_.getVideoTrack();
+        if (videoTrack) {
+          this.localStream_.removeTrack(videoTrack).then(() => {
+            console.log('remove video call success');
+            // 关闭摄像头
+            videoTrack.stop();
+            this.client_.unpublish(this.localStream_).then(() => {
+              // 取消发布本地流成功
+            });
+          });
+        }
+      }
+    },
+    async cameraChange() {
+      await this.localStream_.switchDevice('video', this.cameraId);
+    },
+    async micrChange() {
+      await this.localStream_.switchDevice('audio', this.microphoneId);
+    },
+    // 选择打开摄像头
+    shexiangBtn() {
+      this.shexiangDia = true;
+    },
+    // 选择打开麦克风
+    tianchongBtn() {
+      this.tianchongDia = true;
+    },
+    // 关闭摄像头&麦克风
+    handleClose(done) {
+      done();
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    name() {
+      return this.$route.query.name;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  background-color: #2a2b30;
+  min-height: 840px;
+  .left {
+    .leftTop {
+      min-height: 540px;
+      padding: 0 15px;
+      margin: 20px 0;
+      p {
+        color: #ccc;
+      }
+      p:nth-child(2) {
+        padding: 10px 0;
+      }
+      p:nth-child(3) {
+        line-height: 25px;
+      }
+    }
+    .leftDown {
+      padding: 10px 0 0 0;
+      border-top: 1px solid #000;
+      .btn {
+        margin: 0 0 15px 0;
+        color: #cccccc;
+        text-align: center;
+      }
+      .btn:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .right {
+    .rightTop {
+      height: 100px;
+      background-color: #232428;
+      text-align: right;
+      color: #ccc;
+      line-height: 100px;
+      span {
+        margin: 0 10px 0 0;
+      }
+      span:hover {
+        cursor: pointer;
+        color: #409eff;
+      }
+    }
+    .video {
+      min-height: 640px;
+      background-color: #000;
+    }
+    .noVideo {
+      min-height: 640px;
+      background-color: #151618;
+    }
+    .rightDown {
+      height: 100px;
+      background-color: #232428;
+    }
+  }
+}
+/deep/.el-dialog__body {
+  min-height: 100px;
+}
+#main-video {
+  float: left;
+  width: 100%;
+  height: 640px;
+  min-height: 600px;
+  grid-area: 1/1/3/4;
+}
+</style>

src/views/live/meetingDetail.vue

@@ -6,7 +6,7 @@
           <topInfo :topTitle="pageTitle"></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          会议直播
+          <detailMeetInfo :roomInfo="roomInfo"></detailMeetInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -16,19 +16,31 @@
 <script>
 import topInfo from '@/layout/public/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import detailMeetInfo from '@/layout/live/detailmetting.vue';
 const { mapActions: room } = createNamespacedHelpers('room');
 export default {
   name: 'detail',
   props: {},
   components: {
     topInfo,
+    detailMeetInfo,
   },
   data: function() {
-    return {};
+    return {
+      roomInfo: {},
+    };
+  },
+  created() {
+    this.searchInfo();
   },
-  created() {},
   methods: {
     ...room(['query', 'delete', 'update', 'fetch']),
+    async searchInfo() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `roomInfo`, res.data);
+      }
+    },
   },
   computed: {
     ...mapState(['user']),