# 实现视频客服

本文档为您展示通过 SDK 实现视频客服(含排队机)的相关步骤,帮助您在远程银行和视频客服的场景下实现智能排队、屏幕共享、全景录像、访客管理的相关能力。

# 发起呼叫

创建成功后可以通过 client.call (opens new window) 发起呼叫,来呼叫自己要做的业务。

呼叫需指定业务号, 业务号可从下一步骤中获得,在发起呼叫时可根据用户需求决定是否携带额外信息。

call方法会返回一个 Prmoise 对象。呼叫成功后 Prmoise 会变为 resolve 状态,

可以在then中进行呼叫成功后的处理。

/**
 * 发起呼叫
 * @param number - 业务号
 * @param callParam - 呼叫参数
 */
call(number: string, callParam?: GuestCallParam): Promise<any>;

client.call(telNumber, {
  extraParam: '',
  displayName: 'nickname',
  securityType: 0
})
  .then(() => {
  });

TIP

一个 client 对象对应一次呼叫,即再次呼叫时需要销毁上一次的呼叫对象然后重新创建一个 client,并重新登录。

# 通话状态改变通知

当用户成功加入会议、坐席接通通话、用户自身状态改变、会议成员离开会议、通话结束,都会通过 GuestEventType.CALL_STATE_CHANGE (opens new window) 事件进行消息上报。

EventType 字面量 描述
GuestCallStateChangeType.CALLING calling 呼叫中
GuestCallStateChangeType.WAITING waiting 等待坐席接听
GuestCallStateChangeType.TALKING talking 通话中
GuestCallStateChangeType.TERMED termed 通话结束
const {GuestClientState} = JuphoonWeChatGuestSDK;
client.addEventListener(WeChatClientEventType.CALL_STATE_CHANGED, (ev) => {
  switch (ev.message.type) {
    case GuestCallStateChangeType.CALLING:
      break;
    case GuestCallStateChangeType.TERMED:
      break;
    case GuestCallStateChangeType.TALKING:
      break;
    case GuestCallStateChangeType.WAITING:
      break;
  }
});

# 获取业务列表

client 调用 listAllGroups (opens new window) 接口请求业务列表,获取到业务列表后 Promise 处于 resolve 状态,业务列表会通过 then 回调,该接口无需登录即可使用。

业务列表项说明如下:

Name Type Description
telNumber string 业务号
group string 组号
memo string 业务名称
logoUrl string 业务logo地址
client.listAllGroups()
  .then(businessList => {
    businessList.forEach((value, index) => {
    });
  })
  .catch(reason => {
    alert(reason);
  })

# 等待坐席接听

坐席接通后会触发 WeChatClientEventType.AGENT_ANSWERED 事件,可以监听该事件跳转到通话界面。

//  添加 `WeChatClientEventType.AGENT_ANSWERED` 事件
client.addEventListener(WeChatClientEventType.AGENT_ANSWERED, (ev) => {
});

# 创建本地视频画面

调用 client.startCameraVideo (opens new window) 会返回一个 WeChatLocalStream (opens new window) 对象, 需要先通过 WeChatLocalStream.start (opens new window) 绑定 <local-stream> 组件。start 方法会在绑定后自动打开摄像头并发送音视频数据。

TIP

注:SDK需要获取到wxml里的 <local-stream> 组件对象,需要小程序页面的 this 对象,SDK中可通过 client.setPageTarget(this) 接口或 WeChatLocalStream.start('id', this) 设置页面的 this

/**
	* 获得视频预览对象,通过此对象能获得本地摄像头画面用于UI显示
	*/
startCameraVideo(): Promise<WeChatLocalStream>;

示例代码:

 <local-stream id="local-stream" style="width: 50%;height: 100%;"></local-stream>
const that = this;
this.client.startCameraVideo()
  .then(stream => {
    stream.start('local-stream', that);
	})

# 创建远端视频画面

调用 client.startVideo (opens new window) 会返回一个 WeChatRemoteStream (opens new window) 对象, 需要先通过 WeChatRemoteStream.start (opens new window) 绑定 <remote-stream> 组件。start 方法会在绑定后自动渲染远端画面。

TIP

注:与<lcoal-stream>组件相同, SDK需要获取到wxml里的 <remote-stream> 组件对象,需要小程序页面的 this 对象,SDK中可通过 client.setPageTarget(this) 接口或 WeChatRemoteStream.start('id', this) 设置页面的 this

/**
	* 获得视频对象,通过此对象能获得远端画面用于UI显示
  */
startVideo(): Promise<Stream>;

示例代码:

<remote-stream id="remote-stream" style="width: 50%;height: 100%;"></remote-stream>
const that = this;
this.client.startVideo()
  .then(stream => {
  	stream.start('remote-stream', that);
	})

# 挂断

访客可以在呼叫等待或者通话中通过调用 term (opens new window) 方法主动挂断,该方法会返回一个 Promise 对象。Promise 状态变为 resolve 时表示挂断成功。

成功挂断后会触发CALL_STATE_CHANGECONFERENCE_LEAVE两个事件,具体的挂断信息会从CONFERENCE_LEAVE事件对象的message.reasonCode返回。

this.client.leave();
this.client.addEventListener(WeChatClientEventType.CONFERENCE_LEAVED, (event) => {
}, { once: true });

# 销毁本地和远端画面

挂断成功后会自动停止本地/远端的视频画面的推/拉流。