使用TRTC Web SDK实现互动直播

        let sdkAppId = this.sdkAppId; // 您从腾讯云申请的 sdkAppId
        let userId = this.userId; // 用户ID
        let roomId = this.roomId; // 房间号
        
        let mode = this.mode; //  实时音视频通话模式，‘live’为直播
        
        let role = this.role; //  直播模式时，设置有效，‘anchor’为主播角色，‘audience’为观众角色
        let client = this.client; // 本地客户端对象
        let localStream = this.localStream; // 本地音视频流对象
        let remoteStream = this.remoteStream; // 远端音视频流对象
        let userSig = genTestUserSig(userId).userSig; // 用户签名
        let clientConfig = { // 创建client对象时的配置参数
          mode,
          sdkAppId,
          userId,
          userSig
        };
        client = TRTC.createClient(clientConfig); // 创建client对象
        client.on("stream-added", event => { // 监听流的变化
          console.log("有人加入了");
          if(this.remoteStream != null){
            this.remoteStream.stop() // 将play（）创建的音视频标签从HTML中移除，详细请参考 https://trtc-1252463788.file.myqcloud.com/web/docs/LocalStream.html#stop
          }
          remoteStream = event.stream;
          this.remoteStream = remoteStream;
          console.log("远端流增加: " + remoteStream.getId());
          client.subscribe(remoteStream);
        });
        client.on("stream-subscribed", event => { // 监听流的订阅情况
          remoteStream = event.stream;
          console.log("远端流订阅成功：" + remoteStream.getId());
          if (role == "anchor") {
            remoteStream.play("audienceStream");
          } else if (role == "audience") {
            remoteStream.play("anchorStream");
          }
        });
        
        
        // 进入房间，主播进房role值为‘anchor’，观众进房间role值为‘audience’
        client.join({ roomId: parseInt(roomId), role }).then(() => {
          let streamConfig = { // 配置创建本地所收集的音视频流的参数
            userId: userId,
            video: true,
            audio: true
          };
          localStream = TRTC.createStream(streamConfig); // 创建本地流
          localStream.setVideoProfile("480p");
          if (role == "anchor") { // 判断角色是主播时，将收集本地音视频流进行推流操作
            console.log("主播");
            localStream.initialize().then(() => { // 初始化本地音视频流后进行之后的操作
              client.publish(localStream); // 进行推流操作
              localStream.play("anchorStream", { // 将本地流进行播放
                objectFit: "contain",
                muted: true // 本地流播放时，默认禁止播放本地流的音轨
              });
              this.localStream = localStream;
              this.client = client;
            });
          } else if (role == "audience") { // 判断角色是观众时，将收集的本地音视频流保存，用于连麦时的推流
            console.log("你是观众");
            this.localStream = localStream;
          }
          this.client = client;
        });

      let client = this.client;
      let localStream = this.localStream;
      client.unpublish(localStream).then(() => { // 先确保停止推流再离开房间，主播离开房间，整个直播会话结束
        client.leave();
      });

        let client = this.client;
        let localStream = this.localStream;
        client.switchRole("anchor").then(() => { // 转换观众身份为主播，
          localStream.initialize().then(() => {  // 初始化所收集到的本地流，然后进行推流和播放
            client.publish(localStream);  // 推流操作，会触发主播的stream-added通知
            localStream.play("audienceStream", {
              objectFit: "contain",
              muted: true
            });
            this.localStream = localStream;
            this.client = client;
          });
        });

        let client = this.client;
        client.switchRole("audience").then(() => { // 转换身份为观众，自动停止推流
          console.log("变观众了");
          let localStream = this.localStream;
          localStream.stop(); // 
        });