腾讯云-实时音视频-TRTC基础音视频通话接入

基础音视频通话

4.x.x版本的 TRTC Web SDK。
音视频官网

    <div class="personal">
      <!--本地视频流-->
      <div class="video_block">
        <div id="localVideo" class="localVideo"></div>
        <img class="hung_up" src="../../../assets/image/hung_up.png" @click="quitRTC">
      </div>
      <!--远端视频流  多个房间-->
      <div class="add-room" id="remote-video-wrap">
      </div>
    </div>

// 引入
import TRTC from 'trtc-js-sdk';
// 设置日志输入级别
TRTC.Logger.setLogLevel(TRTC.Logger.LogLevel.WARN);

步骤1：创建 Client 对象

通过 TRTC.createClient() 方法创建 Client 对象，参数设置如下：

• mode: 实时音视频通话模式，设置为videoCall
• sdkAppId: 您从腾讯云申请的 sdkAppId
• userId: 用户 ID
• userSig: 用户签名

**userId 可以获取当前登录用户的账号，也可以随机生成字符串，
通过调用后端接口拿到userSig **

  // 获取userSig
  public async getUserSig (): Promise<void> {
    const res: any = await this.$api.xHttp.get(this.$interfaces.video.usersig, {
      appid: this.sdkappid,
      userid: this.form.userId
    }, null, {defEx: false, defData: false});
    if (res.code === 1) {
      this.userSig = res.data;
    }
  }

-房间ID根据后台返回 加入同一个房间 也可以自己定义房间号-
退出视频要调用一下方法， 彻底关闭本地视频流 否则浏览器会一直提示视频还在调用中

this.localStream.close(); // 彻底关闭本地视频流

代码如下：

  public mounted () {
    this.initTRTC();
  }
 /***
   * 初始化视频
   */
  public initTRTC () {
    this.clientTRTC = TRTC.createClient({
      mode: 'videoCall',
      sdkAppId: this.sdkappid, // 此处填写你的sdkappid
      userId: this.userId,
      userSig: this.userSig
    });
    this.onStreamAdded(); // 监听远端流事件
    this.onStreamSubscribed(); // 订阅远端流
    this.onStreamRemoved(); // 取消订阅远端流
    this.clientJoin();
  }

  // 监听远端流事件
  public onStreamAdded () {
    this.clientTRTC.on('stream-added', (event: any) => {
      const remoteStream = event.stream;
      console.log('远端流增加: ' + remoteStream.getId());
      // 订阅远端流
      this.clientTRTC.subscribe(remoteStream);
    });
  }

  // 订阅远端流
  public onStreamSubscribed () {
    this.clientTRTC.on('stream-subscribed', (event: any) => {
      const remoteStream = event.stream;
      const remoteId = 'remote' + remoteStream.getId();
      console.log('远端流订阅成功：' + remoteStream.getId());
      // 播放远端流
      // remoteStream.play('remoteVideo-' + remoteStream.getId());
      const videoDiv: any = document.createElement('div');
      videoDiv.id = remoteId;
      videoDiv.style.width = '320px';
      videoDiv.style.height = '240px';
      videoDiv.style.marginRight = '20px';
      videoDiv.style.marginBottom = '20px';
      videoDiv.className = 'remoteVidwo';
      (document.getElementById('remote-video-wrap') as any).appendChild(videoDiv);
      remoteStream.play(remoteId);
    });
  }

  // 加入房间
  public clientJoin () {
    this.clientTRTC.join({roomId: this.roomId})
      .catch((error: any) => {
        console.error('进房失败 ' + error);
      })
      .then(() => {
        console.log('进房成功');
        // 创建本地流
        this.localStream = TRTC.createStream({userId: this.userId, audio: true, video: true});
        // 初始化本地流成功
        this.createStream();
        this.enterRoomInfo(); // 告诉后台执行混流
      });
  }

  // 初始化本地流成功
  public createStream () {
    this.localStream
      .initialize()
      .catch((error: any) => {
        console.error('初始化本地流失败 ' + error);
      })
      .then(() => {
        console.log('初始化本地流成功');
        this.localStream.play('localVideo');
        // 发布本地流
        this.pubLocalStream();
      });
  }

  // 本地流发布
  public pubLocalStream () {
    this.clientTRTC
      .publish(this.localStream)
      .catch((error: any) => {
        console.error('本地流发布失败 ' + error);
      })
      .then(() => {
        console.log('本地流发布成功');
      });
  }

  // 取消订阅远端流
  public onStreamRemoved () {
    this.clientTRTC.on('stream-removed', (event: any) => {
      const remoteStream = event.stream;
      const remoteId = 'remote' + remoteStream.getId();
      remoteStream.stop();
      (document.getElementById('remote-video-wrap') as any).removeChild(document.getElementById(remoteId));
    });
  }

  // 关闭视频
  public quitRTC () {
    this.localStream.close(); // 彻底关闭本地视频流
    // 退房
    this.clientTRTC.leave().then((res: any) => {
      console.log('退房成功', res);
      this.$emit('close');
      this.leaveRoomInfo(); // 告诉后台执行混流
    }).catch((error: any) => {
      // 错误不可恢复，需要刷新页面。
      console.error('退房失败 ' + error);
    });
  }