live-cms/src/layout/live/detailmetting.vue

<template>
  <div id="detailmetting">
    <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">
            <el-col :span="24" class="videoMeet">
              <el-col :span="18" class="one">
                <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
              </el-col>
              <el-col :span="6" class="two">
                <el-col :span="24" class="twoOne">
                  <div id="look-video-1" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
                </el-col>
                <el-col :span="24" class="twoOne">
                  <div id="look-video-2" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
                </el-col>
                <el-col :span="24" class="twoOne">
                  <div id="look-video-3" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
                </el-col>
              </el-col>
              <el-col :span="6" class="three">
                <div id="look-video-4" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
              </el-col>
              <el-col :span="6" class="three">
                <div id="look-video-5" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
              </el-col>
              <el-col :span="6" class="three">
                <div id="look-video-6" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
              </el-col>
              <el-col :span="6" class="three">
                <div id="look-video-7" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
              </el-col>
            </el-col>
          </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: 'detailmetting',
  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()));
      // 订阅其他用户音视频
      let i = 0;
      this.client_.on('stream-subscribed', event => {
        const remoteStream = event.stream;
        // 远端流订阅成功，播放远端音视频流
        console.log('111' + remoteStream.getType());
        i = i + 1;
        if (i < 8) {
          const id_ = 'look-video-' + i;
          remoteStream.play(id_);
        }
      });
      // 监听远端流增加事件
      this.client_.on('stream-added', event => {
        const remoteStream = event.stream;
        console.log('222' + remoteStream.getType());
        // 订阅远端音频和视频流
        this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
          console.error('failed to 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;
      overflow: hidden;
      position: relative;
      .videoMeet {
        .one {
          height: 480px;
          overflow: hidden;
        }
        .two {
          height: 480px;
          overflow: hidden;
          .twoOne {
            height: 160px;
            overflow: hidden;
          }
        }
        .three {
          height: 160px;
          overflow: hidden;
        }
      }
    }
    .noVideo {
      min-height: 640px;
      background-color: #151618;
    }
    .rightDown {
      height: 100px;
      background-color: #232428;
    }
  }
}
/deep/.el-dialog__body {
  min-height: 100px;
}
#main-video {
  width: 100%;
  height: 480px;
  min-height: 480px;
  grid-area: 1/1/3/4;
}
.lookvideo {
  width: 100%;
  height: 160px;
  min-height: 160px;
  grid-area: 1/1/3/4;
}
</style>