school_voip v1.0.6

校园 voip-demo

示例代码

提供云后台的小程序示例代码，只涵盖最精简的业务逻辑：

1. 家长侧登录：用户信息+手机号码
2. 关系链：若已有家长-学生类似的关系链，可先跳过这部分 a. 学校通过手机号指定家长为管理员 b. 被录入的家长确认后，绑定成为该学生的管理员 c. 其他家长通过管理员分享链接，绑定成为该学生的联系人 d. 管理员解绑学生，解绑学生-联系人 e. 联系人解绑学生
3. wmpf 侧：联系人列表
4. voip：通话组件： a. wmpf 侧，学生扫脸后获取联系人，指定通话对象，跳转到通话组件 b. 家长微信侧，接收消息推送，跳转到通话组件

前期准备

• 接入 wmpf
• 申请 voip-room 权限

接入

1. 安卓机需要开启 voip-room 的同层渲染

// app.json
  "window": {
    "renderingMode": "mixed",
    "mixedRenderComponents": ["voip-room"]
  },

2. 接入 call 组件：通话页面引入

  yarn add school_voip
  // 工具开启并构建npm

// page.json
  "usingComponents": {
    "Call": "school_voip/components/call/call"
  }

3. 根据业务需要，引入对应页面与文件到自身的小程序，以体验 voip 通话为例子：

• 引入 components/call pages/callPage
• 准备已接入 wmpf 的电话机与手机
• 电话机作为学生，发起语音/视频通话，手机作为家长接听
• callPage 只作为测试页面，业务方自行参照

4. 根据组件的自定义组件，customEvent 维护通话状态

通话组件

封装了统一的通话 ui 及能力，服务商只需将组件引入小程序，属性介绍如下： | 字段名 | 类型 | 必填 | 描述 | | --------------------- | ------- | ---- | ----------------------------------------- | | groupId | String | 是 | voip room 房间的 id，需确保唯一 | | isCaller | Boolean | 是 | 发起者为 true，接听者为 false | | caller | CallMember | 是 | 发起者的信息 | | listener | CallMember | 是 | 接听者的信息 | | roomType | String | 是 | voice, video，默认语音 | | ringFilePath | String | 是 | 铃声文件目录，不支持相对路径 | | customEvent | 事件 | 否 | 自定义事件 |

// CallMember Object
interface IBaseCallMember {
  id: string // oepnId 或者 userId
  name: string
  avatarUrl?: string
}

interface ICallMember extends IBaseCallMember {
  timestamp: number
  nonce: string
  signature: string
}

• signature:
  1. 学生: 支付扫脸验证后，获取 out_user_id 作为 signature 传入, 此时 timestamp、nonce 传空字符串即可
  2. 家长: 根据签名算法计算
• 自定义事件: 用于透传用户行为，配合其他通道，得以完善整个通话信息。示例代码搭配后台相关接口【get/set CallStatus】,实现记录通话信息，通话记录等功能。

// e.detail
interface ICustomEventResp {
  eventName: EventNames
  data?: any
}
// keepTime: 通话时长
// status: 'endByCaller' | 'endByListener'

更细日志

2021-08-04

1. 语音通话：支持免提、静音设置
2. 视频通话

2021-08-09

1. 通话未接通时（即双方同时在通话房间中），一方取消通话等 case 的处理
2. 通话记录的增删查，并在小程序中展示

2021-8-25

1. 家长打开视频通话，但未接听时，新增 camera 进行预览
2. 学生打开视频通话，家长未接听时，之前的 voip-room 预览需 joinVoip + insertVoipView，过程中 voip-room 组件有默认的灰色背景色，体验不佳，现改为 camera 预览
3. voip-room 全屏下存在宽高比例问题，画面被拉伸，通过长边裁剪 fix

2021-8-30

1. call 组件按钮新增 hover 态
2. ios 下 通话页面 禁止下拉弹簧效果，需在对应页面 page.json 配置

"disableScroll": true

3. 联系人、通话页面与 call 组件引入 skyline reset 样式

2021-9-02

1. call 组件作为 npm 包发布，接入方式改变
2. 视频画面比例问题：

• wmpf 侧不再由小程序裁剪
• 手机微信侧仍由小程序裁剪

2021-9-03

1. 新增学生端 wmpf preInitByCaller, 提前进行 joinVoip, 优化时间: 联系人页-通话页跳转时长。在易科士机器上测试优化约 200ms+。调用方式

// 联系人页面-用户点击开始通话，可参考contactList toCallPage
const { preInitByCaller } = require("school_voip/components/call/index.js")

preInitByCaller({
  groupId,
  roomType: roomtype,
  userId: stuInfo!.userId,
})

2021-9-08

1. 视频通话，微信手机端新增切换摄像头。电话机语音通话，暂不支持免提和静音，去掉对应按钮

2. 视频通话，新增：点击 mini 预览窗口，切换拨打者-接听者视频画面

3. 通话 Loading 状态：电话机拨打侧，新增听筒响铃。手机接听侧，震动+扬声器响铃。需传入 ringFilePath 铃声文件路径。(注：不支持相对路径)