本文介绍互联网问诊的客户端实现方法，包括实现图文消息、实现音视频通话等。

前提条件

在开始运行示例项目之前，请确保您已完成以下操作：

• 已创建应用并获取 App Key。
• 已开通相关能力。
• 已开通统一登录功能，具体请联系网易云信商务经理。

开发环境要求

在开始运行示例项目之前，请确保开发环境满足以下要求：

环境要求	说明
微信 App	iOS ：8.0.0及以上版本 Android：8.0.0 及以上版本
微信小程序基础库	2.10.0 及以上版本
开发工具	已下载并安装微信开发者工具
运行环境	已安装微信 App 的 Android 或 iOS 真机。 由于微信开发者工具不支持原生组件（即 < live-pusher > 和 < live-player > 标签），需要在真机上进行运行体验。

准备小程序开发环境

步骤1 开通小程序类目与推拉流标签权限

微信小程序使用实时音视频功能之前，需要添加推拉流标签权限（即 live-pusher 和 live-player 标签），但是出于政策和合规等原因，仅企业类小程序和指定类目的小程序可以开通推拉流标签权限。

1. 请为您的小程序添加企业认证，并确保其符合 类目要求。

   根据微信平台要求，提供就医服务或互联网诊疗服务需申请的类目如下表所示。

   

   服务内容	申请的类目	参考文档
   医疗机构主体开设的预约挂号、在线问诊等服务	医疗服务-医疗机构	【医疗服务-医疗机构】类目修改指引说明
   非医疗机构主体开设的预约挂号、在线查报告、在线缴费等服务	医疗服务-就医服务	【医疗服务-就医服务】类目修改指引说明
   互联网医院主体/与医院合作的医疗服务平台开设的互联网问诊服务	医疗服务-互联网医院	【医疗服务-互联网医院】类目修改指引说明官方

2. 在 微信公众平台 的 开发 > 接口设置中，开启实时播放音视频流和实时录制音视频流权限。

   

步骤2 添加小程序组件

在微信小程序中使用实时音视频功能，需要使用微信的 live-pusher 和 live-player 组件。

• live-player 组件：

  用于实现微信小程序的实时音视频播放。创建该组件后，您还需要在 js 文件中调用该 API 接口来实现对应的功能。示例代码如下：

  <live-player
      class="player"
      id="player"
      muted="{{false}}"
      src="{{rtmp 播放地址}}"
      object-fit="fillCrop"
      mode="RTC"
      auto-pause-if-navigate="{{false}}"
      auto-pause-if-open-native="{{false}}"
      bindstatechange="_playerStateChange"
      autoplay="{{true}}" />
  

  属性	类型	说明	默认值
  id	string	组件唯一 ID，用于生成拉流上下文信息	player
  object-fit	string	填充模式。 fillCrop：图像铺满屏幕，超出显示区域的部分将被截掉 contain：图像长边填满屏幕，短边区域会被填充⿊⾊	fillCrop
  muted	boolean	是否静音	false
  mode	string	模式	RTC
  src	string	音视频地址。目前仅支持 flv、rtmp 格式
  auto-pause-if-navigate	boolean	当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放	false
  auto-pause-if-open-native	boolean	当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放	false
  autoplay	boolean	自动播放	true
  bindstatechange	eventhandle	播放状态变化事件，detail = {code}	参考 _playerStateChange 方法实现

• live-pusher组件：

  用于实现微信小程序实时音视频录制。创建该组件后，您还需要在 js 文件中调用该 API 接口来实现对应的功能。示例代码如下：

  <live-pusher
      class="pusher"
      url="{{rtmp 的推流地址}}"
      mode="RTC"
      waiting-image="{{pusher.waitingImage}}"
      autopush="{{pusher.autopush}}"
      enable-camera="{{callType === '1' ? false : pusher.enableCamera}}"
      enable-mic="{{pusher.enableMic}}"
      binderror="_pusherErrorHandler" />
  
  

  属性	类型	说明	默认值
  mode	string	模式	RTC
  url	string	推流地址。目前仅支持 rtmp 格式
  enable-camera	boolean	开启摄像头	true
  enable-mic	boolean	开启或关闭麦克风	true
  autopush	boolean	自动推流	true
  waitingImage	string	进入后台时，推流的等待画面	https://yx-web-nosdn.netease.im/quickhtml%2Fassets%2Fyunxin%2Fdefault%2Fgroupcall%2FLark20210401-161321.jpeg
  binderror	eventhandle	渲染错误事件，detail = {errMsg, errCode}	参考 _playerStateChange 方法实现

步骤3 配置服务器域名

如果您的网络环境部署了防火墙，请在 微信公众平台 的 开发 > 开发管理 > 开发设置 > 服务器域名中，设置 request合法域名和 socket合法域名。

• request 合法域名：

  request 合法域名是以 https 开头的域名。

  https://statistic.live.126.net
  https://lbs.netease.im
  https://nrtc.netease.im
  https://wlnimsc0.netease.im
  https://wlnimsc1.netease.im
  https://roomkit.netease.im
  

• socket 合法域名：

  socket 合法域名区域是以 wss 开头的域名。

  wss://webrtcgwcn.netease.im
  wss://webrtcgwhz.netease.im    
  

步骤4 创建小程序项目

1. 克隆互联网问诊示例项目源码仓库至您本地工程。

2. 打开微信开发者工具，扫码登录后，单击 + 按钮，创建新的小程序项目。

3. 在创建小程序页面，填入相关参数。单击新建。

   • 项目名称：自定义的项目名称。
   • 目录：选择项目的保存目录。
   • AppID： 填写您微信小程序的 AppID。

   

实现图文消息

互联网问诊场景方案的图文消息基于 NIM 实现，更多详细功能请参见消息收发和 最近会话。

图文消息的界面效果如下图所示。

流程概览

实现单聊消息收发的流程，可分为下图所示的 3 大步骤。

如果图片无法正常展示，可能是因为网络原因导致，一般刷新页面后即可正常展示。

步骤 1：集成 NIM SDK

在官网下载 NIM SDK 文件，并在代码中引入。

// 建议在全局页面app.js初始化 NIM
import NIM from './sdk/NIM_Web_NIM_miniapp_v9.x.x.js'

步骤 2：初始化 NIM SDK

将 NIM SDK 集成到客户端后，需要先完成 NIM SDK 的初始化才能使用其他功能。

在初始化中同时完成消息收发的监听，以及账号的登录。

示例代码如下：

// 建议将 NIM 实例挂在全局nim对象上，方便各个页面调用
this.globalData.nim = NIM.getInstance({
    appKey: '', // 产品的 appKey
    token: '', // IM 账号中的 token
    account: '', // IM 账号中的 accid
    promise: true,
    transports: ['websocket'],
    syncSessionUnread: true, // 同步未读数
    onconnect: () => {
        console.log('连接成功');
    },
    onerror: (error, obj) => {
       console.log('发生错误', error, obj);
    },
    onwillreconnect: (data) => {
        logger.reportLog(data, 'app onwillreconnect')
    },
    ondisconnect: (err) => {
        // 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
        console.log('连接断开', error);
    },
    onmsg: (msg) => {
        console.log('收到消息', msg.scene, msg.type, msg);
    },
    // 会话
    onsessions: (sessions) => {
        console.log('收到会话列表', sessions)
    },
    /**
    * 会话更新：收到消息、发送消息、设置当前会话、重置会话未读数 触发
    * {id:'p2p-zys2',lastMsg:{},scene,to,unread,updateTime}
    * {id:'team-1389946935',lastMsg:{attach:{accounts,team},type,users},scene,to,from,type,unread,updateTime}
    */
    onupdatesession: (session) => {
        console.log('会话更新了: ', session)
    },
    /**
    * 是否要忽略某消息，默认false
    * @returns true - 那么 SDK 将忽略此条消息（不计未读数，不当lastMsg，不存数据库，不触发onmsg通知）
    */
    shouldIgnoreMsg: (data) => {
        console.log('shouldIgnoreMsg', data)
    },
    /**
    * 漫游消息：会多次收到，每次只会收到指定人的漫游消息
    */
    onroamingmsgs: (data) => {
        console.log('漫游消息', data)
    },
    onofflinemsgs: (msg) => {
        console.log('离线消息', obj)
    },
    /**
    * 操作主体为对方
    * 收到系统通知，例如 被对方删除好友、被对方添加好友、被对方撤回消息
    * {type,to,time,deletedMsgTime,deletedMsgFromNick,deletedIdServer,deletedIdClient,status,scene,opeAccount,msg:{flow,from,fromNick,idClient,scene,sessionId,target,time,to,opeAccount},idServer,from}
    * time:为删除消息时间，deletedMsgTime为删除的消息发送时间
    */
    onsysmsg(msg: any) {
        console.log('onSysMsg: ', msg)
    },
}

• account 即 IM 账号中的 accid，token 即 IM 账号中的 token。
• NIM 的初始化参数请参见 getInstance。

步骤 3：实现图文消息收发

本节以用户 A 和用户 B 的消息交互为例，介绍快速实现单聊消息收发的流程。

您可以通过 NIM SDK 收发文本消息、图片消息、语音消息等。

1. 用户 A 向用户 B 发送消息。

关于文件的临时地址 tempFilePath 获取，请查阅 微信录音，微信拍照或者选择图片,视频

  // 文本消息
  var msg = app.globalData.nim.sendText({
      scene: 'p2p',
      to: 'account',
      text: 'hello', // 文本内容
      done: sendMsgDone
  });

  // 语音消息
  var msg = app.globalData.nim.sendFile({
      scene: 'p2p',
      to: 'account',
      type: 'audio',
      wxFilePath: tempFilePath, // 录音文件临时地址
      done: sendMsgDone
  });

  // 图片消息
  var msg = app.globalData.nim.sendFile({
      scene: 'p2p',
      to: 'account',
      type: 'image',
      wxFilePath: tempFilePath, // 图片临时地址
      done: sendMsgDone
  });

  // 视频消息
  var msg = app.globalData.nim.sendFile({
      scene: 'p2p',
      to: 'account',
      type: 'video',
      wxFilePath: tempFilePath, // 图片临时地址
      done: sendMsgDone
  });

  // 自定义消息（表情包）
  var msg = app.globalData.nim.sendFile({
      scene: 'p2p',
      to: 'account',
      content: JSON.stringify(content), // 自定义消息的消息内容, 推荐使用JSON格式构建
      done: sendMsgDone
  });

  console.log('正在发送p2p text消息, id=' + msg.idClient);
  function sendMsgDone(error, msg) {
      console.log(error);
      console.log(msg);
      console.log('发送' + msg.scene + ' ' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient);
  }

2. 用户 B 收到 msg 事件消息。

3. （可选）用户 A 登出/销毁实例。示例代码如下：

// 断开 IM
app.globalData.nim.disconnect();

实现呼叫和音视频通话

音视频通话的界面效果如下图所示。

API 时序图

音视频通话的时序图如下图所示。

如果上图无法正常展示，可能是因为网络原因导致，一般刷新页面后即可正常展示。

步骤1 集成呼叫组件 SDK

互联网问诊场景方案的呼叫能力基于云信呼叫组件实现。

1. 执行如下命令安装呼叫组件 call-kit。

   npm install @xkit-yx/call-kit
   

2. 构建 NPM 包，将呼叫组件 call-kit 集成到项目中。

   在微信开发者工具的顶部菜单栏中选择工具 > 构建npm。构建完成后，NPM 会将 call-kit构建到 miniprogram_npm 文件夹中。

步骤2 初始化呼叫组件

IM 登录成功后，初始化呼叫组件。

// 在IM登录成功之后，初始化呼叫组件，一般在 onconnect 回调里，并将NECall实例也挂在全局变量neCall中，方便
this.globalData.neCall = new NECall({
    nim: this.globalData.nim, // NIM 实例
    currentUserInfo: { accId: imAccid }, // 以对象的形式传入IM 的 imAccid
    appKey: '', // 产品唯一的appKey
    debug: true, // 是否打开调试模式，可查看日志
})

步骤3 实现呼叫功能

呼叫相关代码请参考 Demo 中 src/components/NECallKitUI/call-view文件，以下是核心功能的代码示例。

app.globalData.neCall.call({
    callType: 'video', // 呼叫类型：audio-语音问诊，video-视频问诊
    accId: imAccid, // 被叫登录的imAccid信息
    extraInfo: JSON.stringify(extraData), // 支持额外字段传输，注意是字符串形式
}).then(() => {
    console.log('呼叫成功')
})

步骤4 实现挂断功能

app.globalData.neCall.hangup()

步骤5 实现接听功能

app.globalData.neCall.accept().then(() => {
    console.log('接听成功')
}).catch((err) => {
    console.error('接听失败')
})

步骤6 添加呼叫监听

this.globalData.neCall.on('onReceiveInvited', (data: any) => {
    console.log('收到来电', data)
    // 解析额外字段
    const extraData = data.exraInfo && JSON.parse(data.exraInfo)
    // 跳转至呼叫页面，并将是否开启音视频参数携带过去，默认都关闭
    wx.navigateTo({
        url: `/pages/call/index?enableCamera=${extraData.openVideo}&enableMic=${extraData.openAudio}`,
    })
})

步骤7 移除呼叫监听

this.globalData.neCall.off('onReceiveInvited')

实现实名认证

Demo 中的实名认证页面仅供展示参考，您需要自行实现相关的业务逻辑。

实名认证的实现方法请参见网易易盾的实人认证接口，详细的解决方案介绍请参见身份信息认证解决方案。