腾讯云TRTC 多人视频会议

最新推荐文章于 2022-12-11 14:39:28 发布

Pky@

最新推荐文章于 2022-12-11 14:39:28 发布

阅读量1.3k

点赞数 2

分类专栏： TRTC

本文链接：https://blog.csdn.net/weixin_45370366/article/details/111315830

版权

本文详细介绍了如何利用腾讯云TRTC SDK构建一个稳定的多人视频会议系统，涵盖了实时音视频传输、网络优化、设备适配等关键点，为开发者提供了一站式解决方案。

摘要由CSDN通过智能技术生成

<template>
  <div class="center-page" v-loading="loading">
    <!--  -->
    <div class="on-box">
      <div id="local_stream" class="local-stream"></div>
      <div class="uese-box">
        <p>
          <span v-if="userTypes == 1">当事人: </span>
          <span v-else-if="userTypes == 2">被申请人: </span>
          <span v-else-if="userTypes == 3">法官: </span>
          {
  { userNames }}
        </p>
      </div>
      <div class="mask" v-show="!videoFlag">
        <img src="../../assets/images/offvideo.png" alt="" />
      </div>
      <div class="btn-chat">
        <div class="l-box">
          <div class="item-mic" @click="getmicFlag">
            <img
              :src="
                require(micFlag
                  ? '../../assets/images/yinp.png'
                  : '../../assets/images/yinph.png')
              "
              alt=""
            />
            <p>{
  { micFlag ? '关闭语音' : '打开语音' }}</p>
          </div>
          <div class="item-video" @click="getvideoFlag">
            <img
              :src="
                require(videoFlag
                  ? '../../assets/images/sxt.png'
                  : '../../assets/images/sxth.png')
              "
              alt=""
            />
            <p>{
  { videoFlag ? '关闭摄像头' : '打开摄像头' }}</p>
          </div>
          <div class="item-protocol" @click="getprotocol">
            <img src="../../assets/images/cswa.png" alt="" />
            <p>发送调解协议</p>
          </div>
          <div class="item-mic" @click="getallmicFlag">
            <img
              :src="
                require(allmicFlag
                  ? '../../assets/images/yinp.png'
                  : '../../assets/images/yinph.png')
              "
              alt=""
            />
            <p>{
  { allmicFlag ? '全体禁言' : '取消禁言' }}</p>
          </div>
        </div>
        <!-- 关闭操作 -->
        <div class="close-btn">
          <div class="item-close" @click="leaveRoom">
            <img src="../../assets/images/gbvideo.png" alt="" />
            <p>退出会议</p>
          </div>
          <div class="item-close" @click&#