@ylink-sdk/wechat-miniprogram

v1.0.11

Published

4 months ago

## 简介

Downloads

0High
0Medium
0Low

frontweb

亿联会议微信小程序SDK

简介

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

快速上手

集成SDK

安装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

加入入会功能，在需入会的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,
       });
     }
   });
  }
})

加入会议功能，在需要会议功能的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个功能模块：

lib.js 入会前的对接配置等
<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参数说明

| 参数 | 类型 | 必须 | 说明 | | ----------- | ------ | ---- | ------------------------------------------ | | appId | string | √ | 鉴权key | | signature | string | √ | 鉴权认证信息，生成方式详见提供的DEMO的文档 | | timestamp | string | √ | 鉴权用的13位时间戳 | | meetingNum | string | √ | 亿联会议会议号 | | pwd | string | | 亿联会议会议密码，会议有设置密码，则必需 | | displayName | string | √ | 显示名，必需 |

示例

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 />实现的用于视频会议的微信小程序自定义组件。

组件属性

| 属性值 | 类型 | 可选值 | 默认值 | 说明 | | -------------- | -------- | ---------- | ------ | ------------------------------------------------------------ | | beauty | Number | 0-9 | 6 | 美颜，0 表示关闭，支持动态设置 | | muted | Boolean | true/false | false | 禁音，true代表关闭麦克风，false代表开启麦克风，支持动态设置 | | camera | Boolean | true/false | true | 开/关摄像头，true代表开启摄像头，false代表关闭摄像头，支持动态设置 | | handup | Boolean | true/false | false | 举手，当会议模式为申请发言时或入会者为观众时，此配置才生效，true代表举手状态，false代表手放下状态，支持动态设置 | | devicePosition | String | front/back | front | 使用前置/后置摄像头采集本地视频，front代表前置摄像头，back代表后置摄像头，支持动态设置 | | hideSmallView | Boolean | true/false | false | 是否隐藏小视图画面，支持动态设置 | | onRoomEvent | Function | N/A | | 必要，监听事件通知，详见下方 |

事件通知

<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;
    }
  }
}

事件列表：

| 事件名称 | 说明 | 事件内容（body） | | -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | roleChange | 入会用户角色变更，由远端主持人调整入会用户的身份引起 | body: ROLE; ROLE: coHost(主持人)/attendee(与会者)/audience(观众) | | audioChange | 入会用户音频状态（麦克风）变更，自身操作或远端主持人操作引起 | body: {deviceOn: boolean;sendOn: boolean;opBy:number}deviceOn：设备状态；sendOn：媒体状态；opBy：操作者（1表示远端，可基于此条件进行提示） | | handupChange | 入会用户举手状态变更，自身操作或远端主持人操作引起 | body: boolean; | | setAudio | 远端主持人请求开启音频 | body: {cred: string; sendOn: boolean;operator:{userID:number;}}cred：请求开启的凭证，当用户允许时需通过组件方法setAVCred传递给组件内 | | videoChange | 入会用户视频状态（摄像头）变更，自身操作或远端主持人操作引起 | body: {deviceOn: boolean;sendOn: boolean;}deviceOn：设备状态；sendOn：媒体状态；opBy：操作者（1表示远端，可基于此条件进行提示） | | setVideo | 远端主持人请求开启视频 | body: {cred: string; sendOn: boolean;operator:{userID:number;}}cred：请求开启的凭证，当用户允许时需通过组件方法setAVCred传递给组件内 | | displayNameChange | 入会用户显示名变更，由远端主持人操作引起 | body: string; | | spotlightVideoChange | 设置/取消入会用户为焦点视频变更，由远端主持人操作引起 | body: boolean; | | lobbyChange | 入会用户进入/离开等候室变更，会议配置或远端主持人操作引起 | body: boolean; | | barrageChange | 字幕消息变更，由远端主持人操作引起 | body: {position: string; contentType:string; content:string;}position：显示位置(top/medium/bottom)；contentType：内容格式(text/plain|text/enriched)；content：内容 | | leave | 入会用户离会 | body: {bizCode: number; reasonCode:number; message: string;} | | meetingChange | 会议信息变更通知，主要用于通知入会用户重新获取会议数据 | null |

组件方法

获取组件实例

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

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

组件方法总览

| 方法 | 说明 | | ---------- | ---------------------------------------------------- | | start | 开始执行组件内部初始化操作 | | setAVCred | 设置开启音视频媒体的凭证，当远端主持人请求开启时传递 | | getMeeting | 获取当前会议数据 | | setDebug | 设置日志输出 |

组件方法详述

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返回信息说明：

| 属性 | 说明 | | ---------------- | ------------------------------------------------------------ | | meetingNum | 会议号 | | createType | 会议创建类型，vmr(云会议)，scheduled(预约会议)，meetNow(即时会议) | | meetingType | 会议类型，meeting(云会议室)， webinar(研讨会) | | pwd | 会议密码 | | startTime | 会议实际开启时间(第一个媒体入会的时间)，单位毫秒 | | subject | 会议主题 | | lock | 会议是否锁定 | | speakingMode | 发言模式，free(自由发言)，handUp(举手发言) | | participantCount | 已入会用户数量统计 | | recording.status | 录制状态，stopped：关闭 starting：正在开始 started：已开始 paused：已暂停 | | me | 自身信息 |

me信息说明

| 属性 | 说明 | | ---------------- | ------------------------ | | userID | 用户ID | | audio | 音频状态 | | video | 视频状态 | | displayName | 用户显示名 | | isHandUp | 是否举手 | | isInLobby | 是否在等候室 | | joinTime | 入会时间 | | role | 用户角色 | | handUpTime | 举手时间 | | isSpotlightVideo | 用户是否被设置为焦点视频 | | barrage | 字幕消息 |

组件slot

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

使用方式如下：

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

特殊-等候室

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

业务码（bizCode）

| 业务码 | 说明 | | ------ | ---------------------------------------------------------- | | 900200 | 操作成功 | | 900400 | 请求参数不正确 | | 900403 | 该请求被禁止 | | 900408 | 请求超时，请稍候重试 | | 900500 | 服务器繁忙，请稍候重试 | | 900501 | 不支持该操作 | | 900503 | 服务不可用 | | 900511 | 服务器内部错误 | | 901100 | 您购买的服务已到期 | | 901304 | 会议未开始或已结束 | | 901305 | 会议已锁住 | | 901306 | 用户被从会议中移出 | | 901307 | 会议被结束 | | 901308 | 申请会议号失败 | | 901309 | 会议密码错误 | | 901310 | 会议互动端口上限 | | 901311 | 会议广播端口上限 | | 901314 | 主持人结束会议 | | 901315 | 只有一个与会者在会议中，超时结束会议 | | 901316 | 主持人未入会，会议中止 | | 901317 | 无其他参会者入会，会议中止 | | 901318 | 会议被删除，结束会议 | | 901319 | 服务不可用，移出使用相应服务的用户 | | 901320 | 被主持人移出会议 | | 901322 | 该会议成员不存在 | | 901326 | 媒体版本过于陈旧 | | 901336 | 检查用户名是否包含非法字符 | | 901337 | 限制账号登入 | | 901338 | 管理员删除会议，会议结束 | | 901339 | 主持人正在进行另一场会议，请稍后加入 | | 901341 | 会议尚未开始，请稍后呼入 | | 901344 | 主持人未加入会议，请稍候 | | 901349 | 允许等候室成员入会 | | 901350 | 会议成员移入等候室 | | 901351 | 观众切换为与会者 | | 901352 | 与会者切换为观众 | | 901353 | 会议已开启不允许参会者在主持人之前加入，至少存在一位主持人 | | 901354 | 不允许在主持人之前进入会议 | | 901356 | 会议禁止参会者入会 | | 901357 | 观众允许发言 | | 901358 | 观众禁止发言 | | 901359 | 用户主动离开会议 | | 901362 | 用户主动退出会议 | | 901364 | 会议已开启仅登录身份才能入会 | | 901376 | 已有与会者在会议中，无法重复加入 | | 901407 | 查询不到会议 | | 901403 | 会议室不存在 | | 901435 | 无可用的微信小程序入会服务包，请企业管理员购买 | | 901438 | 会议端口不足，无法加入会议 | | 901451 | 小程序入会服务容量不足，请使用其他方式加入会议 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme