使用TRTC Web SDK实现实时音视频通话

        let sdkAppId = this.sdkAppId; // 您从腾讯云申请的 sdkAppId
        let userId = this.userId; // 用户ID
        let roomId = this.roomId; // 房间号
        let client = this.client; // 本地客户端对象
        let localStream = this.localStream; // 本地音视频流对象
        let remoteStream = this.remoteStream; // 远端音视频流对象
        let userSig = genTestUserSig(userId).userSig; // 用户签名，生成方式可以参考 https://cloud.tencent.com/document/product/647/17275

        // 创建client需要的配置参数
        let clientConfig = {
          mode: "rtc", // 实时音视频通话模式，设为‘rtc’；
          sdkAppId,
          userId,
          userSig
        };
        // 相关配置可参考 https://trtc-1252463788.file.myqcloud.com/web/docs/TRTC.html#.createClient
        // 先创建一个client对象
        client = TRTC.createClient(clientConfig);
        this.client = client;

        // client.on(eventName,handler)给client对象设置监听回调函数
        /*  
        eventName事件名称有：了解更多 https://trtc-1252463788.file.myqcloud.com/web/docs/module-Event.html
        stream-added  远端流添加事件，当远端用户发布流后会收到该通知
        stream-removed  远端流移除事件，当远端用户取消发布流后会收到该通知
        stream-updated  远端流更新事件，当远端用户添加、移除或更换音视频轨道后会收到该通知
        stream-subscribed  远端流订阅成功事件，调用 subscribe() 成功后会触发该事件
        connection-state-changed  WebSocket 信令通道连接状态变化事件
                                  ‘DISCONNECTED’：连接断开
                                  ‘CONNECTING’：正在连接中
                                  ‘RECONNECTING’：自动重连中
                                  ‘CONNECTED’：已连接
        peer-join  远端用户进房通知
        peer-leave  远端用户退房通知
            注意：
            live 模式下，不支持观众进退房通知
            v4.8.2 之前版本，远端用户进房推流后，才会收到进房通知
            v4.8.2 及其之后版本，远端用户进房，就能收到进房通知
        mute-audio  远端用户禁用音频通知
        mute-video  远端用户禁用视频通知
        client-banned  用户被踢出房间通知，被踢原因有：同名用户登录；被账户管理员主动踢出房间
        network-quality  网络质量统计数据事件，进房后开始统计，每两秒触发一次，包括上行（uplinkNetworkQuality）和下行（downlinkNetworkQuality）的质量统计数据
            上行网络质量为 SDK 到腾讯云的上行连接网络质量
            下行网络质量为 腾讯云到 SDK 的所有下行连接的平均网络质量
        error  错误事件，当出现不可恢复错误后，会抛出此事件
        player-state-changed  Audio/Video Player 状态变化事件 App 可根据状态变化来更新 UI，比如，通过监听 video player 状态变化来关闭或打开遮板
        */
        // 监听远端流添加事件 请在join()进房前注册该事件，确保您不会错过远端用户进房通知。 收到上述事件后要通过subscribe()订阅远端音视频流。
        client.on("stream-added", event => {
          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());
          // 播放远端流
          remoteStream.play("remoteStream");
        });

        // client.join()加入房间  相关API：https://trtc-1252463788.file.myqcloud.com/web/docs/Client.html#join
        client.join({ roomId: parseInt(roomId) }).then(() => {
          // 确保加入房间后执行一下代码
          // 创建一个localStream对象所要填写的参数配置
          let streamConfig = {
            userId: userId,
            video: true,
            audio: true
          };
          // 相关配置可参考 https://trtc-1252463788.file.myqcloud.com/web/docs/TRTC.html#.createStream
          // 创建一个localStream本地音视频流对象
          localStream = TRTC.createStream(streamConfig);

          // localStream初始化之前可以进行一些设置  具体方法可参考 https://trtc-1252463788.file.myqcloud.com/web/docs/LocalStream.html
          localStream.setVideoProfile("480p");
          /*
          localStream.setAudioProfile(profile) 设置音频Profile
          localStream.setVideoProfile(profile) 设置视频Profile  v4.8.4 及其之后版本，该方法支持动态调用；v4.8.4 之前版本，该方法需要在 initialize() 之前调用。
          localStream.setScreenProfile(profile) 设置屏幕分享Profile
          */

          // 初始化本地流
          localStream.initialize().then(() => {
            // 初始化成功之后执行一下函数

            /*
            localStream.setVideoContentHint(hint) 设置视频内容提示，主要用于提升在不同场景下的视频编码质量  该方法需要在调用 initialize() 成功之后调用。
            */

            // 初始化后进行推流
            // 该方法需要在 join() 进房后调用，一次音视频会话中只能发布一个本地流。若想发布另外一个本地流，可先通过 unpublish() 取消发布当前本地流后再发布新的本地流。
            // 在发布本地流后，可通过 removeTrack()、addTrack()、 replaceTrack() 来更新本地流中的某个音频或视频流。
            // 发布本地流后远端会收到 ‘stream-added’ 事件通知。同理远端发布视频流时本地端会收到 ‘stream-added’ 事件通知
            client.publish(localStream);
            localStream.play("localStream", {
              //  播放的相关配置参考  https://trtc-1252463788.file.myqcloud.com/web/docs/LocalStream.html#play
              objectFit: "contain", // 视频画面显示模式，参考 CSS object-fit 属性
              muted: true //本地流默认为true，防止播放从麦克风采集回来的声音
            });
            this.localStream = localStream;
            this.client = client;
          });
        });

      let client = this.client; // 本地客户端对象
      let localStream = this.localStream; // 本地音视频流对象
      client.unpublish(localStream).then(() => {
        // 确认取消发布本地流后执行一下代码

        // 退出当前音视频通话房间，结束一次音视频通话会话。
        // 退房前请确保已经通过 unpublish() 取消发布本地流，若未取消发布本地流，SDK 内部会自动取消发布本地流。 同时，退房会关闭所有远端流。
        client.leave();
      });