切换大小屏

简介

请先查看 快速接入 了解音视频通话的基本操作逻辑后，再查看本文。

在音视频通话过程中，通常涉及不同用户的界面切换，以一个点对点的音视频通话为例，常见的显示方式例如：

  1. 启动应用后，大画面显示自己的画面；
  2. 其他用户加入后，将对方显示到大画面，将自己的画面切换到右上角的小画面；
  3. 可以点击画面，将自己和对方的画面位置互换。

相应的应用逻辑例如：

  1. 自己先加入频道，加入前不进行本地预览，直接加入频道；
    加入频道成功后，开始发送本地视频，发送成功后显示本地画面到大画面。
  2. 对方后加入频道，对方加入后把本地画面切换到右上角的小画面；
    对方开启视频后，按大画面订阅其视频，收到视频后，显示到大画面。
  3. 点击自己的小画面后，将自己的画面切换到大画面；
    同时按照小画面重新订阅对方视频以节约流量和性能，收到视频后，显示到小画面；
    再次点击小画面，则再次互换。

针对以上场景，我们结合各端 SDK 接口介绍如何实现：

Windows (C++)

请先查看 页面顶部 假设的应用逻辑，以下内容基于该假设。

假设大画面是一个名为 largeView 的充满全屏的 UI 视图，小画面是一个名为 smallView 的宽90、高160的 UI 视图。

环节1：大画面显示自己的画面

  • 自己调用 joinChannel 方法加入频道；
  • 加入频道会收到 onChannelJoinConfirm 通知，其中 QResult 为 OK 表示加入成功；
  • 加入成功后调用 startVideo 方法，window 参数(渲染窗口)传入 largeView 来显示自己的画面。

环节2：大画面显示对方的画面

  • 对方加入频道会触发 onUserJoinIndication 通知，会返回对方的 userId，此时调用 startVideo 方法，window 参数传入 smallView 将自己的画面切换到小画面显示；
  • 对方开启视频后会触发 onUserVideoStart 通知，会返回对方的 userId 和最高视频档位 maxProfile，此时调用 subscribeVideo 方法订阅其视频，window 参数传入 largeView 来显示对方的画面，config 参数的 profileType 属性设置为对方的 maxProfile。

环节3：切换双方画面

  • 当点击自己的小画面时，先调用 startVideo 方法，window 参数传入 largeView 将自己的画面切换到大画面；
  • 再调用 subscribeVideo 方法重新订阅对方视频(不需要先取消订阅)，userId 参数传入对方账号，window 参数传入 smallView 将对方画面设置到小画面显示，config 参数的 profileType 属性设置为 Low；

同理，如果再次点击小画面：

  • 先调用 startVideo 方法，window 参数传入 smallView 将自己的画面切换到小画面；
  • 再调用 subscribeVideo 方法重新订阅对方视频(不需要先取消订阅)，userId 参数传入对方账号，window 参数传入 largeView 将对方画面设置到大画面显示，config 参数的 profileType 属性设置为对方的 maxProfile。

iOS (Objective-C)

请先查看 页面顶部 假设的应用逻辑，以下内容基于该假设。

假设大画面是一个名为 largeView 的充满全屏的 UIView，小画面是一个名为 smallView 的宽90、高160的 UIView。

环节1：大画面显示自己的画面

  • 自己调用 - joinChannelWithToken:channelId:userId:config: 方法加入频道；
  • 加入频道会收到 - onChannelJoinConfirm: 通知，其中 PanoResult 为 kPanoResultOK 表示加入成功；
  • 加入成功后调用 - startVideoWithView:config: 方法，view 参数传入 largeView 来显示自己的画面。

环节2：大画面显示对方的画面

  • 对方加入频道会触发 - onUserJoinIndication:withName: 通知，会返回对方的 userId，此时调用 - startVideoWithView:config: 方法，view 参数传入 smallView 将自己的画面切换到小画面显示；
  • 对方开启视频后会触发 - onUserVideoStart:withMaxProfile: 通知，会返回对方的 userId 和最高视频档位 maxProfile，此时调用 - subscribeVideo:withView:config: 方法订阅其视频，view 参数传入 largeView 来显示对方的画面，config 参数的 profileType 属性设置为对方的 maxProfile。

环节3：切换双方画面

  • 当点击自己的小画面时，先调用 - startVideoWithView:config: 方法，view 参数传入 largeView 将自己的画面切换到大画面；
  • 再调用 - subscribeVideo:withView:config: 方法重新订阅对方视频(不需要先取消订阅)，userId 参数传入对方账号，view 参数传入 smallView 将对方画面设置到小画面显示，config 参数的 profileType 属性设置为 kPanoProfileLow；

同理，如果再次点击小画面：

  • 先调用 - startVideoWithView:config: 方法，view 参数传入 smallView 将自己的画面切换到小画面；
  • 再调用 - subscribeVideo:withView:config: 方法重新订阅对方视频(不需要先取消订阅)，userId 参数传入对方账号，view 参数传入 largeView 将对方画面设置到大画面显示，config 参数的 profileType 属性设置为对方的 maxProfile。

Android (Java)

请先查看 页面顶部 假设的应用逻辑，以下内容基于该假设。

Android SDK 使用的画布类型为 com.pano.rtc.api.RtcView，可以动态创建，也可以通过 XML 文件静态配置。

  • RtcView 外面必须包裹一层 Layout (建议使用 ConstraintLayout)，而且 RtcView 自身宽高需要设置为 wrap_content。
  • 更多详细信息，可以 点此查看。

假设大画面名为 large_view，其父级 Layout 充满全屏；小画面名为 small_view，其父级 Layout 宽90dp、高160dp。

环节1：大画面显示自己的画面

  • 自己调用 joinChannel 方法 加入频道；
  • 加入频道会收到 onChannelJoinConfirm 通知，其中 result 为 OK 表示加入成功；
  • 加入成功后调用 setLocalVideoRender 方法传入 large_view 来设置本地画布；
  • 再调用 startVideo 方法开启视频，即可通过 large_view 显示自己的画面。

环节2：大画面显示对方的画面

  • 对方加入频道会触发 onUserJoinIndication 通知，此时调用 setLocalVideoRender 方法传入 small_view 将自己的画面切换到小画面。
  • 对方开启视频会触发 onUserVideoStart 通知，其中返回对方的 userId 和最高视频档位 maxProfile；
  • 此时调用 setRemoteVideoRender 方法传入对方的 userId 和 large_view 设置将对方画面显示到大画面；
  • 然后调用 subscribeVideo 方法传入对方的 userId 和 maxProfile 来订阅其视频。

环节3：切换双方画面

  • 当点击自己的小画面时，先调用 setLocalVideoRender 传入 large_view 将自己的画面切换到大画面；
  • 再调用 setRemoteVideoRender 方法传入对方的 userId 和 small_view 将对方的画面切换到小画面；
  • 最后调用 subscribeVideo 方法(不需要先取消订阅)传入对方的 userId，profileType 设置为 Low 来订阅对方的小画面。

同理，如果再次点击小画面：

  • 先调用 setLocalVideoRender 传入 small_view 将自己的画面切换到小画面；
  • 再调用 setRemoteVideoRender 方法传入对方的 userId 和 large_view 将对方的画面切换到大画面；
  • 最后调用 subscribeVideo 方法(不需要先取消订阅)传入对方的 userId，profileType 设置为对方的 maxProfile 来订阅对方的大画面。

Web

请先查看 页面顶部 假设的应用逻辑，以下内容基于该假设。

假设大画面是一个名为 largeView 的 DIV（宽1280px，高720px），小画面是一个名为 smallView 的 DIV（宽320px，高180px），所有回调信息使用 data 参数接收。

环节1：大画面显示自己的画面

  • 自己调用 joinChannel 方法加入频道；
  • 加入频道会收到 joinChannelConfirm 通知，其中 result 为 'success' 表示加入成功；
  • 加入成功后调用 startVideo() 方法发送本地视频，发送成功后会触发 getLocalVideo 通知，通过 appendChild 方法将返回的 data.data.videoTag 添加到 largeView 中。

环节2：大画面显示对方的画面

  • 对方加入频道会触发 userJoin 通知，此时将自己的画面从 largeView 中移除并添加到 smallView 中，设置自己的画面宽高，例如通过 videoTag.setAttribute('style', 'width: 100%; height: 100%;'); 设置自己画面的 videoTag 适应容器的宽高。
  • 对方开启视频会触发 userVideoStart 通知，其中 data.userId 返回对方账号，此时调用 subscribeVideo 方法订阅其视频，quality 参数设置为 PanoRtc.Constants.VideoProfileType.HD720P，userId 参数设置为对方账号；
  • 订阅成功后，会触发 userVideoReceived 通知，此时通过 userVideoReceived 通知返回的 data.data.videoTag 获取对方的视频并添加到 largeView 中。

环节3：切换双方画面

  • 点击自己的小画面时，先将 largeView 置空，然后将自己的画面从 smallView 中移除并添加到 largeView 中，设置自己的画面宽高适应容器宽高；
  • 重新调用 subscribeVideo 方法订阅对方视频(不需要先取消订阅)，quality 参数设置为 PanoRtc.Constants.VideoProfileType.Low 表示180P；
  • 重新订阅后，对方视频的 videoTag 分辨率会自动发生变化，将其添加到 smallView 中即可。

同理，如果再次点击小画面：

  • 先将 smallView 置空，然后将自己的画面从 largeView 中移除并添加到 smallView 中，设置自己的画面宽高适应容器宽高；
  • 重新调用 subscribeVideo 方法订阅对方视频(不需要先取消订阅)，quality 参数设置为 PanoRtc.Constants.VideoProfileType.HD720P；
  • 重新订阅后，对方视频的 videoTag 分辨率会自动发生变化，将其添加到 largeView 中即可。
Last updated on 2022/2/16
← 远程控制基本格式 →