设置视图

设置本地视图

1. 在发起呼叫前，可以通过开启摄像头和设置本地视图来实现预览效果，调用 RCCallClient 的 setVideoView 方法，将创建好的 RCCallVideoView 对象以及当前用户的 userId 传入即可。
2. 结合 ArkTS XComponent 组件渲染视图，保证 RCCallVideoView 的 viewId 与 XComponent 的 id 一致且唯一，建议使用 userId 。

• 参数说明：

  参数	类型	必填	说明
  userId	string	是	用户id
  videoView	RCCallVideoView	否	渲染视图对象

• 示例代码：

  TypeScript

  @Component
  export struct MyStruct {
      ///一般使用用户真实的 userId
      localViewId: string = 'localUserId'
      private _callClient: RCCallClient = CallClientInstance
  }
  TypeScript

  XComponent({
      id: this.localViewId,
      type: XComponentType.SURFACE,
      libraryname: 'nativerender'
  })
      .onLoad((xComponentContext) => {
          /// 设置本地视图
          // RCRTCVideoFillMode 表示渲染模式
          let videoView = new RCRTCVideoView(this.localViewId, RCRTCVideoFillMode.ASPECT_FILL)
          this._callClient.setVideoView(this.localViewId, videoView)
      })
      .onAreaChange((oldValue: Area, newValue: Area) => {
          console.info("onAreaChange: newValue:" + JSON.stringify(newValue) + " , oldValue:" + JSON.stringify(oldValue))
      })
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
          console.info("onSizeChange: newValue:" + JSON.stringify(newValue) + " , oldValue:" + JSON.stringify(oldValue))
      })
      .height('100%')
      .width('100%')

设置远端视图

使用远端用户的 userId 构建 RCCallVideoView 对象当做参数，同样使用 setVideoView 方式可设置远端视图， 无论是在通话前或者通话中设置，SDK 会在拿到远端视频流数据后对应寻找用户设置的 RCCallVideoView 视图按需渲染。

• 参数说明：

  参数	类型	必填	说明
  viewId	string	是	视图id，用来渲染时使用，保证唯一性
  fillMode	RCRTCVideoFillMode	是	渲染模式，默认是 ASPECT_FILL

• 示例代码：

  TypeScript

  /// 设置远端视图
  @Component
  export struct MyStruct {
      ///一般使用用户真实的 userId
      remoteViewId: string = 'remoteUserId'
      private _callClient: RCCallClient = CallClientInstance
  }
  TypeScript

  XComponent({
      id: this.remoteViewId,
      type: XComponentType.SURFACE,
      libraryname: 'nativerender'
  })
      .onLoad((xComponentContext) => {
          /// 设置远端渲染视图
          // RCRTCVideoFillMode 表示渲染模式
          let videoView = new RCRTCVideoView(this.remoteViewId, RCRTCVideoFillMode.ASPECT_FILL)
          this._callClient.setVideoView(this.remoteViewId, videoView)
      })
      .onAreaChange((oldValue: Area, newValue: Area) => {
          console.info("onAreaChange: newValue:" + JSON.stringify(newValue) + " , oldValue:" + JSON.stringify(oldValue))
      })
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
          console.info("onSizeChange: newValue:" + JSON.stringify(newValue) + " , oldValue:" + JSON.stringify(oldValue))
      })
      .height('100%')
      .width('100%')
  

移除渲染视图

当设置过视图后，如果需要移除该视图，还是使用 setVideoView 方法传入相同 userId ，参数 videoView 传 null，SDK 会根据传入的 userId 移除对应的视图。

• 示例代码：

  TypeScript

  /// 移除远端视图
  this._callClient.setVideoView(this.remoteViewId, null)
  /// 移除本地视图
  this._callClient.setVideoView(this.localViewId, null)