视频通话-无UI模式

本篇将介绍如何使用XYRTC SDK 进行集成多人音视频通话到你的小程序项目之中。在开始之前，请确认您已经完成相应的准备工作。

提示

非组件集成，需您自己创建视图，其中小程序的实时音视频是基于微信原生组件标签 <live-pusher> 和 <live-player> 实现的，您可以通过 live-pusher 文档和 live-player 文档对其进行学习。

安装库

在小程序项目中安装小鱼小程序 SDK 库文件：

$ yarn add @xylink/xy-mp-sdk --save

基础流程引导

1. 在项目脚本里引入模块

import XYRTC from '@xylink/xy-mp-sdk';

2. 初始化XYRTC实例

在项目脚本中引入XYRTC模块并初始化XYRTC实例

// 引入SDK
import XYRTC from "@xylink/xy-mp-sdk";


Page({
  // 页面加载时触发
  onLoad() {
    // 创建client实例，保存到当前页面的实例上，后续需要调用client内部的方法
    this.XYClient = XYRTC.createClient({
      //...
    });
  },
})

3. 第三方登录

在页面加载阶段或者事件触发，进行登录操作。

this.XYClient.loginExternalAccount(params: LoginExternalAccountParams): Promise<StatusInfo>;

/**
 * 登录参数
 *
 * @property { string } extUserId - 第三方UserId，规则：数字、字母、\_-, 且长度不能超过 50字符
 * @property { string } displayName - 登录用户名
 */
interface LoginExternalAccountParams {
  extUserId: string;
  displayName: string;
}

/**
 * 登录结果信息
 *
 * @property { string } key - 错误码
 * @property { string } message - 消息提示
 * @property { IUserInfo } data - 登录用户信息
 */
interface StatusInfo {
  key: string;
  data: UserInfo | null;
  message: string;
}

/**
 * 用户信息
 *
 * @property { string } appId - 应用ID
 * @property { string } callNumber - 用户呼叫号码ID
 * @property { string } deviceSN - 设置SN
 * @property { string } displayName - 登录用户名
 * @property { string } enterpriseId - 登陆企业ID
 * @property { string } securityKey - 安全码
 * @property { string } userId - 用户ID
 */
interface UserInfo {
  appId: string;
  callNumber: string;
  deviceSN: string;
  displayName: string;
  enterpriseId: string;
  securityKey: string;
  userId: number;
}

4. 监听事件

SDK内部状态会通过roomEvent上报给业务层，需要在页面生命周期函数(onLoad)中初始化事件订阅：

this.XYClient.on('roomEvent', onRoomEvent）;

const onRoomEvent = (ms) => {
  const { type, detail } = ms.detail;

  switch (type) {
    // 入会成功消息
    case 'connected':
      break;
    // 退出会议消息
    case 'disconnected':
      break;
    // 获取到推流地址事件
    case 'pushUrl':
      break;
    // 参会者列表数据，当有人员变动或者状态变动，会实时推送最新的列表数据
    case 'roster':
      break;
    // 自动布局/自定义布局上报布局结果，基于此数据渲染画面
    case 'layout':
      break;
    .....
   
    default: {
      console.log('匹配到ws消息', ms.detail);
    }
  }
}

5. 呼叫

发起呼叫，内部会进行验证会议号、入会密码等逻辑，在回调事件中检测是否可以正常入会。

this.XYClient.makeCall(params: MakeCallParams): Promise<StatusInfo>;

/**
 * 呼叫参数
 *
 * @property {string}  string - 云会议室号
 * @property {string}  password - 云会议室入会密码, 默认填写为""
 * @property {string}  displayName - 入会名称
 * @property {boolean} isAudioMute - 关闭音频入会
 * @property {boolean} isVideoMute - 关闭视频入会
 * @property {CameraPosition}  cameraPosition - 前置或后置摄像头, 可选值：front，back
 */
interface MakeCallParams {
  number: string;
  password?: string;
  displayName?: string;
  isAudioMute?: boolean;
  isVideoMute?: boolean;
  cameraPosition?: CameraPosition;
}

/**
 * 前置或后置摄像头
 *
 * @property  FRONT front - 前置
 * @property  BACK back - 后置
 */
enum CameraPosition {
  FRONT = 'front',
  BACK = 'back'
}

/**
 * 返回结果
 *
 * @param { string } key - 错误码
 * @param { any } data - 数据
 * @param { string } message - 结果消息
 */
interface StatusInfo {
  key: string;
  data: any;
  message: string;
}

6. 推流入会

创建live-pusher标签，在roomEvent消息中监听到pushUrl推流地址后，通过setData赋值给live-pusher标签，之后调用startLivePusher进行推流；

备注：以下配置参数为必填项，更多配置可参考live-pusher 文档：

<live-pusher
   wx:if="{{pushUrl}}"
   id="pusher"
   url="{{ pushUrl }}"
   enable-camera="{{ camera && isPushed }}"
   muted="{{ muted }}"
   bindnetstatus="onPusherNetStatus"
   bindstatechange="onPusherStateChange"
   binderror="onPusherError"
   bindaudiovolumenotify="onPusherAudioVolumeNotify"
 />

调用startLivePusher方法进行推流

this.XYClient.on('roomEvent', (ms) => {
  const {type, detail} = ms;
  
  switch (type) {
    case 'pushUrl':
       this.setData(
         {
           pushUrl: detail
         },
         // 切记，需要等待推流地址设置完成后，再启动本地推流
         () => {
           this.XYClient.startLivePusher(
             () => {
               this.logger.log('[component]start pusher success');

               // 初始设置camera为关闭状态，等到推流启动后，再开启摄像头
               this.setData({ isPushed: true });
             },
             (err) => {
               this.logger.log('start pusher failed', err, 'warn');
             }
           );
         }
       );
      break;
  }
}）;

7. 订阅Layout事件获取远端视频流列表

this.XYClient.on('roomEvent', (ms) => {
  const {type, detail} = ms;
  
  switch (type) {
    case 'layout':
      this.setData({
        layout: detail
      });
    break;
  }
}）;

8、通过live-pusher和live-player渲染Layout数据

下方展示了基础的 live-pusher 和 live-player 标签的建议配置参数，在项目中建议采用：

<view
     wx:for="{{layout}}"
     wx:for-index="i"
     wx:for-item="item"
     wx:key="id"
    >
      <!-- 本地 -->
      <view
       wx:if="{{ item.isPusher }}"
       style="{{ item.style }}"
      >
        <live-pusher
         wx:if="{{pushUrl}}"
         id="pusher"
         url="{{ pushUrl }}"
         enable-camera="{{ camera && isPushed }}"
         muted="{{ muted }}"
         bindnetstatus="onPusherNetStatus"
         bindstatechange="onPusherStateChange"
         binderror="onPusherError"
         bindaudiovolumenotify="onPusherAudioVolumeNotify"
        />
      </view>
      <!-- 远端 -->
      <view
       wx:else
       style="{{ item.style }}"
      >
        <live-player
         wx:if="{{ item.playUrl}}"
         id="{{ item.id }}"
         src="{{ item.playUrl }}"
         mode="RTC"
         data-item="{{ item }}"
         muted="{{ item.muted }}"
         autoplay="{{ true }}"
         bindstatechange="onPlayStateChange"
         bindnetstatus="onPlayNetStatus"
         bindaudiovolumenotify="onPlayAudioVolumeNotify"
        />
      </view>
    </view>

向SDK绑定live-pusher和live-player状态变化等事件，SDK内部接管事件状态：

/**
     * 绑定live-pusher状态事件
     *
     * @param { * } e - live-pusher状态事件
     */
    onPusherStateChange(e) {
      this.XYClient.pusherEventHandler(e);
    },

    /**
     * 绑定live-pusher网络状态数据
     *
     * @param { * } e -
     */
    onPusherNetStatus(e) {
      this.XYClient.pusherNetStatusHandler(e);
    },
        
    /**
     * 绑定live-player状态事件
     *
     * @param { * } e - live-player状态事件
     */
    onPlayStateChange(e) {
      this.XYClient.playerEventHandler(e);
    },

    /**
     * 绑定live-player网络状态数据
     *
     * @param { * } e - live-pusher网络状态数据事件
     */
    onPlayNetStatus(e) {
      this.XYClient.playNetStatusHandler(e);
    },

    /**
     * 绑定live-pusher渲染错误事件
     *
     * @param { * } e - live-pusher推流失败事件
     */
    onPusherError(e) {
      this.XYClient.pusherErrorHandler(e);
    }

8. 退会

通过调用hangup()方法主动挂断会议；

this.XYClient.hangup();

下载非组件示例项目

如果您想要快速集成SDK到您的项目中，您可以直接获取我们在 Github 提供的示例程序，本地运行和测试，我们提供了uni-app实现的示例项目，详情见Demo下载；

2024-03-25 14:00:27

导出PDF文档