微信小程序语音通话，基于即构语音SDK开发实现

本文将介绍如何基于即构实时语音SDK，在微信小程序内快速实现一个简单的实时语音通话，使用 JavaScript 语言开发。

实现微信小程序语音通话前提条件

在实现基本的实时音频功能之前，请确保：

已在项目中集成 ZEGO Express SDK，详情请参考快速开始 – 集成。
已在 ZEGO 控制台创建项目，申请有效的 AppID 和 ServerSecret，详情请参考控制台 – 项目管理中的“项目信息”。

微信小程序语音通话实现流程

用户通过 ZEGO Express SDK 进行视频通话的基本流程为：

用户 A、B 加入房间，用户 B 预览并将音频流推送到 ZEGO 云服务（推流），用户 A 收到用户 B 推送音频流的通知之后，在通知中播放用户 B 的音频流（拉流）。

/Pics/Common/ZegoExpressEngine/common_usage.png

配置微信小程序后台

在初始化 SDK 前，需要在微信公众平台中进行如下配置：

服务器域名配置：在“小程序后台 > 开发管理 > 开发设置 > 服务器域名”中，按照协议分类，将即构 Server 地址、LogUrl、以及用户业务需要用到的地址填到指定的“socket合法域名”或“request合法域名”中，详情请参考控制台 – 项目信息。

相关功能开启：在“小程序后台 > 开发管理 > 接口设置 > 接口权限”中，打开 实时播放音视频流 和 实时录制音视频流 功能开关。

初始化

1. 创建界面

根据场景需要，为您的项目创建视频通话的用户界面。我们推荐您在项目中添加如下元素：

本地预览窗口
远端视频窗口
结束按钮

/Pics/QuickStart/express_quickstart_video_call.png

2. 创建引擎

创建 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数 “appID”，将获取到的 Server 地址传入参数 “server”。

// 初始化实例
zg = new ZegoExpressEngine(appID, server);

如果需要注册回调，开发者可根据实际需要，实现 ZegoEvent 中的某些方法，创建引擎后可通过调用 on 接口设置回调。

zg.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
    if (state == 'DISCONNECTED') {
        // 与房间断开了连接
    // ...
    }

    if (state == 'CONNECTING') {
        // 与房间尝试连接中
    // ...
    }

    if (state == 'CONNECTED') {
        // 与房间连接成功
    // ...
    }
})

登录房间

1. 获取登录 Token

登录房间需要用于验证身份的 Token，获取方式请参考用户权限控制。如需快速调试，建议使用控制台生成的临时 Token，生成临时 Token 的具体操作请参考控制台 – 开发辅助。

2. 登录房间

您可以调用 SDK 的 loginRoom 接口，传入房间 ID 参数 “roomID”、“token” 和用户参数 “user”，登录房间。如果房间不存在，调用该接口时会创建并登录此房间。

您可通过监听 roomStateUpdate 回调实时监控自己在本房间内的连接状态，具体请参考 4.1 常见通知回调中的“4.1.1 我在房间内的连接状态变化通知”。

roomID 和 user 的参数由您本地生成，但是需要满足以下条件：

同一个 AppID 内，需保证 “roomID” 全局唯一。
同一个 AppID 内，需保证 “userID” 全局唯一，建议开发者将 “userID” 与自己业务的账号系统进行关联。

// 登录房间，成功则返回 true
const result = await zg.loginRoom(roomID, token, {userID, userName});

将自己的音频流推送到 ZEGO 音视频云

1 初始化小程序组件实例

为了您更好的进行推拉流状态管理，需要调用 initContext 接口初始化小程序组件。

小程序组件中用于存储推流属性 pusher 和拉流属性列表 playerList 两个字段需要传给 SDK，SDK 后续将通过传入的两个字段对相应的推拉流作状态及视图更新处理。

pusher 字段中的属性值请参考 ZegoWxPusherAttributes。
playerlist 字段中的属性值请参考 ZegoWxPlayerAttributes。

zg.initContext({
     wxContext: context,
     pushAtr: "pusher", //对象名，对象属性与 live-pusher 中的属性为映射关系
     playAtr: "playerList" //对象名，对象属性与 live-player 中的属性为映射关系

2 创建对应业务场景的 WXML

此处我们提供了两种方案供开发者选择：
小程序组件化版（推荐）：指的是在示例代码的层面，将微信小程序 <live-pusher> 和 <live-player> 组件封装成 ZEGO 自定义组件 <zego-pusher> 和 <zego-player> 进行推拉流。
小程序原生版：指的是直接使用微信小程序组件 <live-pusher> 和 <live-player> 进行推拉流。

两者均能实现一样的功能，但是推荐开发者参考组件化的示例代码进行开发。因为将小程序组件化后，使得代码更加简洁，且能减少开发者对微信小程序组件使用方法上的理解成本。

小程序组件化版（推荐）

在示例代码的层面，将小程序推拉流组件封装成 ZEGO 自定义组件 <zego-pusher> 和 <zego-player>，该方式封装了部分 SDK 的 API 调用逻辑。

<zego-pusher> 组件封装了微信小程序的 <live-pusher> 组件以及对应的事件绑定和推流相关逻辑。
<zego-player> 组件封装了微信小程序的 <live-player> 组件以及对应的事件绑定和拉流相关逻辑。

如下介绍关键的组件引入操作，详细示例代码请参考基础推拉流_组件。

组件接入说明

将示例代码 components 文件夹下的 zego-player 和 zego-pusher 两个文件夹，复制到您的业务代码 components 文件夹中。

在对应的 JSON 文件中引入组件

根据您的项目结构，在对应的 JSON 文件中引入 <zego-pusher> 和 <zego-player> 组件。

// 在 JSON 文件中引入组件
{
  "usingComponents": {
    "zego-pusher": "../../components/zego-pusher/zego-pusher", 
    "zego-player": "../../components/zego-player/zego-player"
  }
}

在对应的 WXML 文件中引入组件

根据您的项目结构，在对应的 WXML 文件中引入 <zego-pusher> 和 <zego-player> 组件。

// 在 WXML 文件中引入组件
  <zego-pusher id="zegoPusher" pusher="{{pusher}}" />
  <zego-player wx:for="{{zegoPlayerList}}" wx:key="id" id="{{item.componentID}}" playerId="{{item.playerId}}" playerList="{{playerList}}" />

pusher 是小程序原生推流组件的属性，具体包含的属性值可参考 ZegoWxPusherAttributes，在执行 initContext 后创建，用于管理原生推流组件的属性。

playerList 是小程序原生拉流组件的属性，具体包含的属性值可参考 ZegoWxPlayerAttributes，在执行 initContext 后创建，用于管理原生拉流组件列表的属性。

3 推送音频流到 ZEGO 音视频云

必须完成初始化小程序组件实例和创建业务场景的 WXML 之后，才能调用 SDK 接口创建推流和拉流实例。

用户调用 SDK 的 createPusher 接口创建推流实例，并通过调用实例对象上的 start 接口，传入流 ID 参数 “streamID”。您可通过监听 publisherStateUpdate 回调知晓推流是否成功。

“streamID” 由您本地生成，但是需要保证：

同一个 AppID 下，“streamID” 全局唯一。如果同一个 AppID 下，不同用户各推了一条 “streamID” 相同的流，后推流的用户推流失败。
“streamID” 长度不超过 256 字节的字符串。仅支持数字、英文字符和 “-“、”_”。

// 推流方登录房间成功后触发推流
 const pusher = zg.createPusher();
 pusher.start("streamID_xxx");

// 不推送视频流
 zg.createPusher({
      enableCamera: false
});

拉取其他用户的音频

进行视频通话时，我们需要拉取到其他用户的音频。

用户先调用 getPlayerInstance 接口，根据传入的流 ID 参数 “streamID”，获取 streamID 对应的拉流实例，然后通过调用拉流实例对象的 play 接口开始拉流。您可通过监听 playerStateUpdate 回调知晓是否成功拉取音频。

远端用户推送的 “streamID” 可以从 roomStreamUpdate 回调中获得。

// 在 SDK 的回调 roomStreamUpdate 中获取拉流 streamID
// 当用户加入或离开房间时，该事件被触发
zg.on("roomStreamUpdate", (roomID, updateType, streamList) => {
    console.log("roomStreamUpdate", roomID, updateType, streamList);
    if (updateType === "ADD") {
        streamList.forEach(i => {
              zg.getPlayerInstance(i.streamID).play();
        })
    } else {
       streamList.forEach(i => {
              zg.getPlayerInstance(i.streamID).stop();
       })
    }
});

注意事项

如果用户在音频通话的过程中，遇到相关错误，可查询错误码。

常用功能

常见通知回调

1. 我在房间内的连接状态变化通知

roomStateUpdate：本地调用 loginRoom 加入房间时，您可通过监听该回调实时监控自己在本房间内的连接状态。

用户可以在回调中根据不同状态处理业务逻辑。

zg.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
    if (state == 'DISCONNECTED') {
        // 与房间断开了连接
    // ...
    }

    if (state == 'CONNECTING') {
        // 与房间尝试连接中
    // ...
    }

    if (state == 'CONNECTED') {
        // 与房间连接成功
    // ...
    }
})

状态	含义
DISCONNECTED	未连接状态，在登录房间前/退出房间后进入该状态。如果登录房间的过程中出现稳态异常，比如 AppID 不正确，或者有相同用户名在其他地方登录导致本端被 KickOut，都会进入该状态。
CONNECTING	正在请求连接状态，登录房间动作执行成功后会进入该状态。通常情况下，可通过该状态进行 UI 界面的展示。如果是因为网络质量不佳产生的中断，SDK 内部会进行重试，也会进入正在请求连接状态。
CONNECTED	连接成功状态，成功登录房间后进入该状态。此时，用户可以正常收到房间内的用户和流信息增删变化的回调通知。

2 其他用户进出房间的通知

roomUserUpdate：同一房间内的其他用户进出房间时，您可通过此回调收到通知。登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调通知。

只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且 “isUserStatusNotify” 参数取值为 “true” 时，用户才能收到 roomUserUpdate 回调。

// 用户状态更新回调
zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

3 房间内流状态变更的通知

roomStreamUpdate：流状态更新回调。登录房间后，当房间内有用户新推送或删除音频流时，SDK 会通过该回调通知。

// 流状态更新回调
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // 流新增，开始拉流
    } else if (updateType == 'DELETE') {
        // 流删除，停止拉流
    }
});

4 用户推送音频流的状态通知

推流状态事件

微信小程序会在 <live-pusher> 的 bindstatechange 绑定的方法中通知出推流状态事件，开发者需要：

a. 在 bindstatechange 绑定的回调函数中，调用 SDK 的 updatePlayerState 接口将推流状态事件透传给 SDK。

b. 在 SDK 的 publisherStateUpdate 回调中处理推流的开始、失败状态。

// live-pusher 绑定推流事件
onPushStateChange(e) {
    // 透传推流事件给 SDK
    zg.updatePlayerState(this.data.publishStreamID, e);
},

// 推流后，服务器主动推过来的，流状态更新
// NO_PUBLISH：未推流状态，PUBLISH_REQUESTING：正在请求推流状态，PUBLISHING：正在推流状态
// state: "PUBLISHING" | "NO_PUBLISH" | "PUBLISH_REQUESTING";
zg.on("publisherStateUpdate", (result) => {
    console.log("publishStateUpdate", result.state);
});

推流网络事件

微信小程序会在 <live-pusher> 的 bindnetstatus 绑定的方法中通知出推流网络事件，开发者需要在对应的小程序回调中，调用 SDK 的 updatePlayerNetStatus 接口将推流网络事件透传给 SDK。

// live-pusher 绑定网络状态事件
onPushNetStateChange(e) {
    //透传网络状态事件给 SDK
    zg.updatePlayerNetStatus(this.data.publishStreamID, e);
},


// SDK 推流网络质量回调
zg.on("publishQualityUpdate", (streamID, publishStats) => {
    console.log("publishQualityUpdate", streamID, publishStats);
});

5 用户拉取音频流的状态通知

拉流状态事件

微信小程序会在 <live-player> 的 bindstatechange 绑定的方法中通知出拉流状态事件，开发者需要：

a. 在 bindstatechange 绑定的回调函数中，调用 SDK 的 updatePlayerState 接口将拉流状态事件透传给 SDK。

b. 在 SDK 提供的 playerStateUpdate 回调中处理拉流的开始或失败状态。

// live-player 绑定的拉流事件
onPlayStateChange(e) {
    // 透传拉流事件给 SDK
    zg.updatePlayerState(e.currentTarget.id, e);
},

// 服务器主动推过来的流的播放状态
// 视频播放状态通知；state: "NO_PLAY" | "PLAY_REQUESTING" | "PLAYING";
zg.on("playerStateUpdate", (result) => {
    console.log("playStateUpdate", result.state);
});

拉流网络事件

微信小程序会在 <live-player> 的 bindnetstatus 绑定的方法中通知出拉流网络事件，开发者需要在对应的小程序回调中，调用 SDK 的 updatePlayerNetStatus 接口将推流网络事件透传给 SDK。

// live-player 绑定网络状态事件
onPlayNetStateChange(e) {
    // 透传网络状态事件给 SDK
    zg.updatePlayerNetStatus(playStreamID, e);
},

// SDK 拉流网络质量回调
zg.on("playQualityUpdate", (playStreamID, playStats) => {
    console.log("playQualityUpdate", playStreamID, playStats);
});

停止语音通话

停止推送/拉取音频流

1. 停止推流

调用 SDK 的 getPusherInstance 接口获取推流实例，并调用推流实例的 stop 方法停止推流。

// 停止推流
zg.getPusherInstance().stop();

2. 停止拉流

调用 SDK 的 getPlayerInstance 接口获取拉流实例，并调用推流实例的 stop 方法停止拉流。

// 停止拉流
zg.getPlayerInstance(streamID).stop();

退出房间

调用 SDK 的 logoutRoom 接口退出房间。

zg.logoutRoom(roomID);

语音通话 API 调用时序

整个推拉流过程的 API 调用时序可参考下图：

后记

通过即构语音SDK实现微信小程序语音通话，端到端平均时延低至 200 ms ，可支持 50 路实时语音互动，音频采样率：16 kHz ～ 48 kHz，支持单、双声道等功能，可到即构官网免费试用。

本文为原创稿件，版权归作者所有，如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/7080.html

微信小程序语音通话，基于即构语音SDK开发实现

相关概念解释

实现微信小程序语音通话前提条件

微信小程序语音通话实现流程

配置微信小程序后台

初始化

登录房间

将自己的音频流推送到 ZEGO 音视频云

拉取其他用户的音频

注意事项

常用功能

常见通知回调

停止语音通话

语音通话 API 调用时序

发表回复

微信小程序语音通话，基于即构语音SDK开发实现

相关概念解释

实现微信小程序语音通话前提条件

微信小程序语音通话实现流程

配置微信小程序后台

初始化

登录房间

将自己的音频流推送到 ZEGO 音视频云

拉取其他用户的音频

注意事项

常用功能

常见通知回调

停止语音通话

语音通话 API 调用时序

相关推荐

支付宝小程序如何实现音视频通话

java如何实现语音对讲通话 | 基于即构语音SDK开发

Android语音通话开发，基于即构语音SDK快速实现音频通话

游戏语音SDK接入实践：如何实现范围语音

语音sdk是什么意思?即构语音SDK有哪些优势

微信小程序语音视频通话功能 | 基于微信原生组件实现通话

发表回复