@ylink-sdk/wechat-miniprogram v1.0.11

亿联会议微信小程序SDK

简介

通过@ylink-sdk/wechat-miniprogram，开发者可快速开发出基于亿联会议体系架构的会议小程序。

快速上手

集成SDK

1. 安装SDK库

   # 通过yarn安装
   $ yarn add @ylink-sdk/wechat-miniprogram
   
   # 通过npm安装
   $ npm install @ylink-sdk/wechat-miniprogram

   提示：在通过npm/yarn安装/升级完成SDK库之后，需要执行构建npm操作，在工具菜单栏中执行：工具->构建 npm

   升级库

   # 通过yarn安装
   $ yarn upgrade @ylink-sdk/wechat-miniprogram
   
   # 通过npm安装
   $ npm update @ylink-sdk/wechat-miniprogram

2. 加入入会功能，在需入会的js文件中引用sdk的方法

   import ylink from '@ylink-sdk/wechat-miniprogram/lib.js';
   
   Page({
    data: {
      meeting: {
        meetingNum: '',
        displayName: '',
        pwd: '',
      },
      ...
    },
    ...
    onJoinMeeting() {
       ylink.join({
        meetingNum: this.data.meeting.meetingNum,
        pwd: this.data.meeting.pwd,
        displayName: this.data.meeting.displayName
      }, (result) => {
        if (result.bizCode === 900200) {
          // 跳转至<ylink-room />引用的会议界面
          wx.navigateTo({url: '/pages/meeting/index'});
        } else {
          // 异常提示，开发者可基于业务码表进行映射提示
          wx.showToast({
            title: result.bizCode,
            icon: 'none',
            duration: 2000,
          });
        }
      });
     }
   })

3. 加入会议功能，在需要会议功能的wxml使用组件，js中引用sdk的方法

   在需引入组件的页面目录下，配置相应页面的xxx.json文件：

   {
     "usingComponents": {
       "ylink-room": "@ylink-sdk/wechat-miniprogram"
     },
     // 会议界面布局默认是按照横屏模式来布局的
     "pageOrientation": "landscape"
   }

   在wxml文件中使用<ylink-room />组件，组件中的配置变量请参见API概览：

   <ylink-room
    id="ylink-room"
    beauty="{{8}}"
    handup="{{handup}}"
    muted="{{muted}}"
    camera="{{camera}}"
    hideSmallView="{{hideSmallView}}"
    devicePosition="{{devicePosition}}"
    bindonRoomEvent="onRoomEvent">
   </ylink-room>

   在Page中定义data属性及引入sdk方法

   Page({
    onReady() {
      // 缓存sdk <ylink-room/>组件节点context，为后续调用组件内部方法用
      this.ylinkRoom = this.selectComponent('#ylink-room');
      // 通知内部事件开始做初始化准备，启动RoomEvent
      this.ylinkRoom.start();
    },
    data: {
      devicePosition: 'front',
      handup: false,
      muted: false,
      camera: true,
      hideSmallView: false
    },
    // 非常重要，基本业务处理都是基于此事件的通知进行处理。详细事件请参见API概览
    onRoomEvent(ms) {
      console.log('### onRoomEvent ###', ms);
      const {event, body} = ms.detail;
      if (event === 'xxx') {
        // handle
      } else if (event === 'xxx') {
        // handle
      }
    }
   })

API概览

SDK提供了以下2个功能模块： 1. lib.js 入会前的对接配置等 2. <ylink-room/>组件，用于视频会议的控制

以下内容主体围绕这两部分进行说明

lib.js

在使用<ylink-room />标签前需要先调用lib.js的一些方法，才可完成入会。

import ylink from '@ylink-sdk/wechat-miniprogram/lib.js';

API总览

API详述

setBaseURL

修改请求服务地址，需要在join之前进行设置（非必须），默认是线上环境（https://meetings.ylyun.com/wechat-app）。

ylink.setBaseURL(url: string): void;

join

加入会议，调用结果将在callback进行回调，入会成功时将返回{bizCode: 900200, user: {xxx}}，异常时将返回{bizCode: 90xxxx, message: xxx}，开发者可基于bizCode进行相关的提示和业务处理，具体的bizCode说明可查看的后面业务码表。

ylink.join(params: ParamsJoin, callback: (result: { bizCode: number; message?: string; user?: Record<string, any> }) => void): void;

• ParamsJoin参数说明

• 示例

ylink.join({
  appId: 'xxx',
  signature: 'xxx',
  timestamp: 'xxx',
  meetingNum: 'xxx',
  pwd: 'xxx',
  displayName: 'xxx'
}, (result) => {
  if (result.bizCode === 900200) {
    wx.navigateTo({url: '/pages/meeting/index'});
  } else {
    wx.showToast({
      title: result.bizCode,
      icon: 'none',
      duration: 2000,
    });
  }
});

<ylink-room />

<ylink-room />标签是基于<live-pusher />和<live-player />实现的用于视频会议的微信小程序自定义组件。

• 组件属性

• 事件通知

<ylink-room />标签通过onRoomEvent返回内部事件，用于外部的业务自定义处理，如角色变更提示，请求开启视频的弹窗，字幕显示等，使用方式如下：

<!-- wxml文件引用组件 -->
<ylink-room ... bindonRoomEvent="onRoomEvent" />

// 在js中定义接收函数
onRoomEvent(ms: IEventMS) {
  const { event, body } = ms.detail;
  if (event === 'xxx') {
    // handle
  }
}

// 主要接收ms.detail用于业务处理
interface IEventMS {
  ...
  detail: {
    // 事件类型
    event: string;
    // 事件内容
    body: {
      // 新值
      newVal: any;
      // 旧值
      oldVal: any;
      // 异常错误码
      bizCode?: number;
    }
  }
}

事件列表：

• 组件方法

获取组件实例

通过小程序提供的this.selectComponent()方法获取组件实例，通过组件实例可以调用组件内部的方法详细方法可见下方方法总览；

const ylinkRoom = this.selectComponent('#ylink-room');
ylinkRoom.start();

组件方法总览

组件方法详述

start

初始化组件及内部事件，必需

ylinkRoom.start(): void;

setAVCred

设置请求打开音频或视频的认证cred

ylinkRoom.setAVCred(cred: string): void;

setDebug

设置日志输出，参数isConsole：输出sdk内部日志到调试台，默认true；isLog：输出sdk内部日志到小程序微信公众平台系统，默认false

ylinkRoom.setDebug(isConsole: boolean; isLog: boolean): void;

getMeeting

获取当前会议相关信息

ylinkRoom.getMeeting(): Meeting;

Meeting返回信息说明：

me信息说明

• 组件slot

组件提供了一个插槽，用于用户自定义视频等待界面的UI。如无特殊需求，可不用设置，组件内部有默认的UI

使用方式如下：

<!-- wxml文件引用组件 -->
<ylink-room ...>
  <!-- 插槽，开发者可自定义显示UI -->
  <view slot="wait">
    <view class="icon-wait" />
    <view>请等待</view>
  </view>
</ylink-room>

• 特殊-等候室

当入会用户在等候室时。组件的页面UI将展示为空，开发者可基于此自定义等候室的UI界面

业务码（bizCode）