跳到主要内容

CallLib 5.X 升级到 CallPlus

安装依赖​

为便于开发者从 CallLib 向 CallPlus 升级，融云自 CallPlus 2.1.4 版本开始，在 CallPlus 包中提供子包 @rongcloud/plugin-call-plus/wrapper 以用于开发者集成替换。

使用包管理器方式集成

shell
# 移除旧版本 CallLib
npm rm @rongcloud/plugin-call

# 安装 CallPlus，自 2.1.4 版本后，包内将携带 wrapper 子包
npm i @rongcloud/plugin-call-plus

使用 CDN 方式集成

注意：使用 CDN 方式引入 CallPlus 与 CallPlusWrapper 包时，需确保两个包的版本号一致。

html
<script src="https://cdn.ronghub.com/RongIMLib-5.9.5.prod.js"></script>
<script src="https://cdn.ronghub.com/RCRTC-5.7.1.prod.js"></script>
<script src="https://cdn.ronghub.com/CallPlus-2.1.4.prod.js"></script>
<script src=" https://cdn.ronghub.com/CallPlusWrapper-2.1.4.prod.js"></script>

集成代码变动​

初始化​

旧方式：

typescript
import { installer as callInstaller, RCCallClient } from '@rongcloud/plugin-call';

const caller: RCCallClient = RongIMLib.installPlugin(callInstaller, {
  rtcClient,
  onSession: (session: RCCallSession) => {},
  onSessionClose: (session: RCCallSession, summaryInfo?: IEndSummary) => {},
}

需替换为：

typescript
// 包名引用注意变更
import { installer as callPlusInstaller, RCCallPlusClient } from '@rongcloud/plugin-call-plus';
import { installer as wrapperInstaller, RCCallClient } from '@rongcloud/plugin-callplus/wrapper';

// 需要先初始化 CallPlus，RTCClient 初始化方式不变
const callPlusClient = RongIMLib.installPlugin(callPlusInstaller, { rtcClient });

// 初始化 CallPlusWrapper，以替换原 CallLib 的 CallClient
const caller = RongIMLib.installPlugin(wrapperInstaller, {
  callPlusClient,
  onSession: (session: RCCallSession) => {},
  onSessionClose: (session: RCCallSession, summaryInfo?: IEndSummary) => {},
});

视频媒体标签​

原 CallLib 在播放视频时，需要使用 track.play() 传入 <video> 标签元素；在 CallPlusWrapper 中，进行视频通话，需开发者通过调 setVideoView 设置房间人员与视频元素的绑定关系。

html
<video id="local_video_element_id"></video>
<video id="remote_video_element_id"></video>
typescript
callPlusClient.setVideoView([
  {
    userId: '<local-userId>',
    videoElement: document.getElementById('local_video_element_id')
  },
  {
    userId: '<remote-userId>',
    videoElement: document.getElementById('remote_video_element_id')
  },
]);

onTrackReady 通知​

CallPlusWrapper 中的 onTrackReady 回调接口变更，不再对外回调 track 实例，因此业务层无法继续调用 track.play() 方法进行媒体播放，需要改为使用 CallPlus 客户端实例 callPlusClient 的 playMedia 方法播放。

注意，由于 CallPlusWrapper 需要尽量保持兼容 CallLib，因此，CallPlusWrapper 中的 RCCallMediaType 枚举值与 CallPlus 的 RCCallPlusMediaType 并不相同，需要注意在播放前进行类型转换。

typescript
{
  onTrackReady(userId: string, mediaType: RCCallMediaType, session?: RCCallSession) {
    // 枚举类型转换
    const playMediaType = mediaType === RCCallMediaType.AUDIO
      ? RCCallPlusMediaType.AUDIO
      : RCCallPlusMediaType.VIDEO;
    // 使用 CallPlus 播放媒体
    // 播放视频前，请确保已经调用 `setVideoView` 方法为其设置视频视图
    callPlusClient.playMedia(userId, playMediaType);
  }
}

质量数据​

由于 CallPlus 中的质量数据接口变更，无法与既有 CallLib 兼容，因此 CallPlusWrapper 暂时不支持质量数据监听，onRTCStateReport 接口废弃；

CallPlusWrapper 2.1.6 版本中提供新的质量数据接口以满足业务对质量数据的需求：

typescript
/**
 * 上行丢包率及延迟信息回调，每秒回调一次
 * @param packetLostRate 丢包率，0-100
 * @param delay 发送端的网络延迟，单位毫秒
 * @since 2.1.6
 */
onSendPacketLoss(packetLostRate: number, delay: number, session: RCCallSession) {
  // 打印查看上行回调数据
  console.log(packetLostRate, delay);
},
/**
 * 下行丢包率及码率信息回调，每秒回调一次
 * @param data key: userId, value: 接收丢包统计数据
 * @param data[userId].packetLostRate 丢包率，取值范围是 0-100
 * @param data[userId].bitRate 码率大小，单位是 kbps
 * @since 2.1.6
 */
onReceivePacketLoss(data: { [userId: string]: RCCallPacketLossStats }, session: RCCallSession){
  // 打印查看下行回调数据
  console.log(data);
}

其他​

  • IRCCallInitOptions 声明中部分字段废弃，详情请查阅 IRCCallInitOptions
  • 废弃 registerUserInfo 方法，CallPlus Wrapper 中不支持注册用户信息和信息透传。
  • ISessionListener 监听器中废弃包括质量数据 onRTCStateReport 在内的部分事件回调，详情请查阅 ISessionListener
最后于 更新