WebRTC用到的方法

一.创建Client对象
相关参数 (Client对象更多参数):
● mode: 实时音视频通话模式,设置为 ‘rtc’。
● sdkAppId: 您在腾讯云创建的音视频应用的 sdkAppId。
● userId: 用户 ID,由您指定。
● userSig: 用户签名,参考获取临时 userSig,或者部署 userSig 签发服务

this._client = this._trtc.createClient({
        sdkAppId,
        userId,
        userSig,
        mode,
        autoSubscribe: false,  // 不自动订阅
        enableAutoPlayDialog: false,
      });

二.进入音视频通话房间
相关参数(更多参数 client.join() ):
roomId:房间id

try {
  await client.join({ roomId: 8888 });
  console.log('进房成功');
} catch (error) {
  console.error('进房失败 ' + error);
}

三.创建本地音视频流
相关参数(更多参数TRTC.createStream() ):
● userId:用户 ID
● audio:是否开启音频
● video:是否开启视频
从麦克风和摄像头中采集音视频流

const localStream = TRTC.createStream({ userId, audio: true, video: true });

四.采集页面中正在播放的视频源

try {
      const playElement: any = document.getElementById(elementId);
      const stream = playElement.captureStream();
      const audioTrack = stream.getAudioTracks()[0];
      const videoTrack = stream.getVideoTracks()[0];
      this._captureLocalStream = this._trtc.createStream({
        userId: `${this._userId}sub`,
        audioSource: audioTrack,
        videoSource: videoTrack,
      });
      // 请确保视频属性跟外部传进来的视频源一致,否则会影响视频通话体验
      this._captureLocalStream.setVideoProfile('720p');
      //初始化音视频流
      await this._captureLocalStream.initialize();
      // 加入房间
      await this._captureClient.join({ roomId: this._roomId });
      // 发布流
      await this._captureClient.publish(this._captureLocalStream);
      this._info('音视频课件-startCaptureStream-publish');
      return Promise.resolve();
    } catch (error) {
      this._error('音视频课件-startCaptureStream-error', JSON.stringify(error));
      return Promise.reject();
    }

initialize()初始化音视频流
publish() 发布音视频流

五.订阅远端音视频流
远端流通过监听事件 client.on(‘stream-added’) 获得,请在client.join() 进房前注册该事件,确保您不会错过远端用户进房通知。 收到上述事件后要通过client.subscribe() 订阅远端音视频流。

this._client.on('stream-added', (event: any) => {
        const remoteStream = event.stream;
          //订阅远端流
        client.subscribe(remoteStream);
      });
this._client.on('stream-updated', (event: any) => {
        const remoteStream = event.stream;
});
this._client.on('stream-removed', (event: any) => {
        const remoteStream = event.stream;
});
this._client.on('stream-subscribed', (event: any) => {
       const remoteStream = event.stream;
       console.log('远端流订阅成功:' + remoteStream.getId());
});

你可能感兴趣的:(学习,vue.js,js)