# 实现视频客服

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

# 发起视频呼叫

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

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

call (opens new window) 方法会返回一个 Prmoise 对象。呼叫成功后 Prmoise 会变为 resolve 状态。

流程图如下所示:

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

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

TIP

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

  • 点对点呼叫

点对点呼叫可直接指定坐席的用户名进行呼叫。

/**
 * 发起点对点呼叫
 * @param number - 坐席用户名
 * @param callParam - 呼叫参数
 */
oneToOneCall(agentUri: string, callParam?: GuestCallParam): Promise<any>;

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

# 通话状态改变通知

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

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

# 创建本地视频画面

通过调用 startCameraVideo (opens new window) 渲染本地摄像头画面,接口将返回 Promise 对象。当 Promise 变为 resolve 状态时,会通过 then返回一个表示本地媒体流的 RTCStream 对象。

RTCStream.start(domId) (opens new window) 该方法会将本地/远端画面渲染到传入的 id 对应的 DOM 元素中。

因浏览器的自动播放策略限制 RTCStream 默认只会播放视频,需要手动将静音取消。

1.自动播放策略说明 (opens new window)

2.自动播放处理方法 (opens new window)

<div id="local-video"></div>
const {RenderType} = JuphoonRTCGuestSDK;

client.startCameraVideo(RenderType.CONTAIN)
  .then(stream => {
    stream.start('local-video');
  })
  .catch(err => {
    console.error(err);
  });

# 创建远端视频画面

通过调用 startVideo (opens new window) 渲染远端画面,接口将返回 Promise 对象。当 Promise 变为 resolve 状态时,表示 WebRTC 协商成功并获取到对端的音视频流并通过 then 返回一个表示远端媒体流的 RTCStream 对象。

<div id="remote-video"></div>
const {RenderType} = JuphoonRTCGuestSDK;

client.startVideo(RenderType.CONTAIN)
  .then(stream => {
    stream.start('remote-video')
    // 手动将muted设置为false
    .then(dom => dom.muted = false);
  })

通过在startCameraVideo (opens new window) / startVideo (opens new window)方法中传入 RenderType 可以指定画面的渲染方式。

常量 描述
RenderType.CONTAIN 画面保持宽高比, 并填充整个内容框, 如画面无法填满内容框将被添加黑边
RenderType.COVER 画面保持宽高比,并填充整个内容框, 如画面有溢出部分将被裁剪

# 挂断

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

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

client.term()
  .then(() => {
  })
  .catch(reason => {
    alert(reason);
  });
client.addEventListener(GuestEventType.CALL_STATE_CHANGE, (ev) => {
  switch (ev.message.state) {
    case 'termed':
      // ...todo
      break;
  }
};
client.addEventListener(GuestEventType.CONFERENCE_LEAVE, (ev) => {
  //    挂断原因
  const reasonCode = ev.message.reasonCode;
  //    是否成功挂断
  const result = ev.message.result;
}

# 销毁本地和远端视频画面

挂断成功后会自动销毁本地/远端的视频画面。