如何为在线医疗问诊小程序实现音视频通话功能？

在线医疗——技术赋能下的高速发展

近日，浙大邵逸夫医院医生在法国远程操控使用机器人，成功为身处浙江的患者实施肝脏手术，整个过程仅仅用时50分钟，让我们不禁感慨，在线医疗正面临行业重塑。据中研普华产业研究院数据预测，2025年中国互联网医疗行业市场规模将突破1.8万亿元，截至今年六月，在线医疗用户规模已达3.93亿人，该行业发展前景可谓是十分可观。

在线手术或许需要精湛、极致的技术支持，准入门槛较高；而在线问诊，仅提供诊断、药用等方面的建议，难度不大且市场需求旺盛，因此，开发一款在线问诊小程序，为进入在线医疗行业提供了新思路。

ZEGO 实时音视频 SDK 为在线问诊小程序带来的功能创意，突破了传统医疗服务的时空壁垒。在问诊场景中，医生通过观察清晰的组织、器官等细节后提供诊疗方案；此外，视频急救、心理咨询、医疗培训等场景也能通过音视频通话功能得以实现。ZEGO 为您带来超清的画质、超低延迟的音视频传输、沉浸式的音频体验、更多的功能拓展。

因此，今天我们就来讲讲如何借助ZEGO的实时音视频SDK，为在线问诊小程序实现音视频通话功能。

开始搭建（以微信小程序为例）

微信小程序

一、准备开发环境

首先，在开始集成前，先准备好开发环境满足后续开发的需要

（1）安装微信开发者工具

（2）使用微信小程序基础库1.7.0或以上版本

（3）通过微信小程序实时音视频播放相关类目审核获取对应的小程序 AppID，开通 live-player、live-pusher 组件权限。

（4）在 ZEGO 控制台中创建您的项目，并申请有效的 AppID 和 Server 地址，详情请参考👉控制台-项目信息。

二、集成SDK

（1）参考微信开放文档创建您的在线问诊小程序

（2）通过以下任意方式，导入我们的SDK

import { ZegoExpressEngine }from'../libs/ZegoExpressMiniProgram-x.x.x';

import { ZegoExpressEngine } from "zego-express-engine-miniprogram"; // 以 npm 的方式引用

三、实现视频通话

3.1 配置微信小程序后台

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

3.1.1 服务器域名配置

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

3.1.2 开启相关功能

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

3.1.3 参考微信官方文档【配置小程序用户隐私保护指引】 补充相应用户隐私保护指引。

3.2 初始化

3.2.1 创建界面

建议增加本地预览窗口、远端视频窗口和结束按钮这三个基本元素，以下是常规布局：

3.2.2 创建引擎

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

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

3.2.3 设置回调

创建完引擎后，根据您的实际需要，通过引擎实例的 on 方法设置回调。

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

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

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

3.3 登录房间

3.3.1 获取登录Token

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

3.3.2 登录房间

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

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

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

同一个 AppID 内，需保证 “roomID” 全局唯一。

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

“userID” 必须与生成 token 时传入的 userID 保持一致，否则登录失败。

代码如下：

// 登录房间，成功则返回 true
const result = await zg.loginRoom(roomID, token, {
    userID: "user1", // userID，需用户自己定义，保证全局唯一，建议设置为业务系统中的用户唯一标识
    userName: "user1_name" // userName 用户名
}, {
    userUpdate: true // 是否接收用户进出房间的回调，设置为 true 才能接收到房间内其他用户进出房间的回调
});

3.4 将您的音视频流推送到 ZEGO 音视频云

3.4.1 初始化小程序组件实例

调用 initContext 接口初始化小程序组件：

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

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

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

zg.initContext({
     wxContext: this,
     pushAtr: "pusher", // pushAtr 的值必须与下文 <zego-pusher> 中的 pusher 属性值一致
     playAtr: "playerList" // playAtr 的值必须与下文 <zego-player> 中的 playerList 属性值一致
})

3.4.2 创建对应业务场景的 WXML

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

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

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

3、在 WXML 文件中引入 <zego-pusher> 和 <zego-player> 组件。

// 在 WXML 文件中引入组件
// zego-pusher 的 pusher 属性值必须与 initContext 中传入的 pushAtr 参数值一致
  <zego-pusher id="zegoPusher" pusher="{{pusher}}" />
// zego-player 的 playerList 的属性值必须与 initContext 中传入的 playAtr 参数值一致。 zegoPlayerList 见 3.5 拉取其他用户的音视频
  <zego-player wx:for="{{zegoPlayerList}}" wx:key="id" id="{{item.componentID}}" playerId="{{item.playerId}}" playerList="{{playerList}}" />

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

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

2、用户调用 SDK 的 createPusher 接口创建推流实例，并通过调用实例对象上的 start 接口，传入流 ID 参数 “streamID”。您可通过监听 publisherStateUpdate 回调知晓推流是否成功，具体请参考 常见通知回调 中的“用户推送音视频流的状态通知”。

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

• 同一个 AppID 下，“streamID” 全局唯一。如果同一个 AppID 下，不同用户各推了一条 “streamID” 相同的流，后推流的用户推流失败。

• “streamID” 长度不超过 256 字节的字符串。仅支持数字、英文字符和 "-"、"_"。

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

3.5 拉取其他用户的音视频

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

2、用户先调用 getPlayerInstance 接口，根据传入的流 ID 参数 “streamID”，获取 streamID 对应的拉流实例，然后通过调用拉流实例对象的 play 接口开始拉流。您可通过监听 playerStateUpdate 回调知晓是否成功拉取音视频，具体请参考【常见通知回调】中的“用户拉取音视频流的状态通知”。

3、远端用户推送的 “streamID” 可以从 roomStreamUpdate 回调中获得，具体回调设置请参考【常见通知回调】中的“房间内流状态变更的通知”。

3.6 在线测试推拉流功能

在上述步骤完成之后，先进行测试，查验您的搭建过程是否准确无误

1、在真机中运行项目，运行成功后，可以看到本端视频画面。

2、为方便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入不同的 UserID、以及对应的 Token，即可加入同一房间与真机设备互通。当成功开始音视频通话时，可以听到远端的音频，看到远端的视频画面。

3.7 停止音视频通话

3.7.1 停止推送和拉取音视频流

1、停止推流

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

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

2、停止拉流

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

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

3.7.2 退出房间

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

zg.logoutRoom(roomID);

3.8 销毁引擎

如果用户彻底不使用音视频功能时，可调用 destroyEngine 接口销毁引擎，释放麦克风、摄像头、内存、CPU 等资源。

zg.destroyEngine();
zg = null;

支付宝小程序

关于支付宝小程序的开发过程，进一步了解👉实时音视频-支付宝小程序

进阶效果

通话质量检测

在线医疗问诊中，稳定的音视频通信是精准诊断的前提。ZEGO Express SDK的通话质量监测功能，通过实时追踪网络状态、音视频传输细节等，从而解决在线医疗问诊的核心诉求——“信息传递无偏差”。

下面是推拉流端的质量统计：

推、拉流质量统计均包含视频码率、音频码率、视频帧率等

①推流质量统计

返回推流质量的回调： 调用 updatePlayerNetStatus 后会触发 SDK 的回调 publishQualityUpdate。

②拉流质量统计

返回拉流质量回调： 调用 updatePlayerNetStatus 后会触发 SDK 的回调 playQualityUpdate。

• videoBitrate：视频码率，单位 Kbps

• audioBitrate：音频码率，单位 Kbps

• videoFPS：视频编码帧率，单位 f/s

• videoWidth：视频画面的宽度

• videoHeight：视频画面的高度

上述通话质量检测仅适用于微信小程序，关于支付宝小程序等其他端，请访问👉 通话质量检测

摄像头变焦

ZEGO 提供摄像头变焦功能，通过 SDK 设置摄像头变焦倍数，实现拍摄时放大物体的效果。在线问诊中，医生普遍需要通过查看患者的身体局部细节，伤口等辅助决策，通过摄像头变焦，精确地观察患者体征，最终给出更加准确的诊断建议。

关于调节摄像头焦距，👉变焦功能

结语

ZEGO 实时音视频 SDK 不仅为在线医疗问诊小程序实现微信小程序视频通话，其基于WebRTC的核心能力，更可延伸至实时音视频通信与RTC 通话系统开发的广阔场景：语聊房、秀场直播、在线KTV、互动播客、在线教育视频会议等。无论哪种场景 ZEGO 均为音视频技术的跨场景落地提供了高效解决方案。

关于更多的场景适配，我们将在下期继续介绍，敬请期待！