快速搭建Plugin

插件概述

该插件是为小程序设计的视频客服访客插件，支持点对点呼叫和业务号呼叫，支持发送在线消息。

Plugin 文件夹中包含样式文件和多个组件，style 文件夹、tools.wxs 文件、talk-view 组件、local-stream 组件、remote-stream 组件和 JRTCSDK-Wechat.js 库是必需的，视频客服访客插件还需要集成 guest 组件，将它们一起放入项目 components 文件夹下即可。

引入组件

在项目的 WXML 文件中和 JSON 文件中按以下方式引入即可，引入组件时，可以将部分登录参数通过以下方式传给组件，通过该方法传递过后，登录时则无需传递已传递的登录参数。还需要传递回调函数给组件。注：引入绑定时，需全部小写，不能使用驼峰命名。

<guest 
  id="guest"
  signal-server="http://192.168.4.171:19993"
  room-server="http://192.168.4.171:9000"
  app-key="05c97ce0d0a84d2592334093"
  app-name="视频客服访客"
  display-name=""
  token=""
  token-type="jrtc_access"
  token-extra-param=""
  bindonlogin="onLogin"
  bindonlogout="onLogout"
  ...>
</guest>
{
  "usingComponents": {
    "guest": "/components/guest/guest"
  }
}

​ 回调函数按需传递，没有使用的无需传递。

插件通用属性

属性	类型	参数/属性值	必填	说明
signal-server	String		否	signal环境
room-server	String		否	room环境
app-key	String		否	appKey
app-name	String		否	app名称
display-name	String		否	昵称
token	String		否	token
token-type	String		否	token类型
token-extra-param	String		否	token校验拓展参数
subscribeWidth	Number	1920	否	订阅视频清晰度-宽度
subscribeHeight	Number	1080	否	订阅视频清晰度-高度
closeCameraBackgroundColor	String	#1C1C1E	否	关闭摄像头后背景颜色
videoHoldLastFrame	Boolean	false	否	保留最后一帧画面
closeCameraIconSrc	String		否	关闭摄像头图标样式
newMessageToast	String	您收到了一条消息，点击消息查看	否	收到新消息的提示语
toastColor	String	#FFFFFF	否	消息提示文字颜色
toastBackgroundColor	String	#252525cc	否	消息提示遮罩背景色
bindonlogin	Function	result, reason	否	登录的回调 (opens new window)
bindonlogout	Function	reason	否	登出的回调 (opens new window)
bindonclientstatechanged	Function	state, oldState	否	登录状态的回调 (opens new window)
bindononlinemessagereceived	Function	message, userId	否	收到在线消息的回调 (opens new window)
bindononlinemessagesendresult	Function	result, operatorId	否	发送在线消息的回调 (opens new window)
bindongetallgroups	Function	result, groups (opens new window)	否	查询所有业务组的回调 (opens new window)
bindoncallstatechange	Function	type (opens new window), inviter (opens new window), reason (opens new window)	否	通话状态改变的回调 (opens new window)
bindonmemberjoin	Function	participant (opens new window)	否	成员加入的回调 (opens new window)
bindonmemberleave	Function	participant (opens new window)	否	成员离开的回调 (opens new window)
bindonmemberupdate	Function	participant (opens new window)，changeParam (opens new window)	否	成员属性更新的回调 (opens new window)
bindonurgentresult	Function	agree	否	加急申请的回调 (opens new window)
bindonholdstatechange	Function	hold	否	通话保持的回调 (opens new window)
bindoncalltypechange	Function	callType (opens new window)	否	通话类型改变的回调 (opens new window)
bindonerror	Function	event (opens new window)	否	错误事件的回调 (opens new window)

登录

在登录时需要设置几个参数，如下表。

参数名	参数含义	是否必填
signalServer	signal环境	是
roomServer	room环境	是
appKey	appkey	是
userId	账号	是
displayName	昵称	否
token	token	否
tokenType	token类型	否
tokenExtraParam	token校验拓展参数	否

设置好参数后，即可调用 login (opens new window) 方法进行登录。调用时需要把这些参数作为一个对象传给 login (opens new window) 方法，引入时已传递的参数则可以不用再传递。下面是一个简单的示例。

const guestComponent = this.selectComponent('#guest');
const clientEnv = {
  signalServer: 'http://192.168.4.171:19993',
  roomServer: 'http://192.168.4.171:9000',
  appKey: '05c97ce0d0a84d2592334093',
  userId: '',
  displayName: '',
  token: '',
  tokenType: 'jrtc_access',
  tokenExtraParam: '',
};
guestComponent.login(clientEnv);

登出

登出无需设置参数，只需调用 logout (opens new window) 方法即可，下面是一个简单的示例。

const guestComponent = this.selectComponent('#guest');
guestComponent.logout();

获取登录状态

可以使用登录状态的回调获取当前登录状态，它可以获取两个参数 state (opens new window)、oldState，state 表示当前的登录状态，oldState 表示之前的状态。下面是一个示例。

/**
 * 登录状态变化通知
 *
 * @param state    当前状态值
 * @param oldState 之前状态值
 * 	  state = 1 未登录
 *    state = 2 登录中
 *    state = 3 已登录
 *    state = 4 登出中
 */
onClientStateChanged(e){
  const { state, oldState } = e.detail;
  console.log('onClientStateChanged oldState: ', oldState, 'state: ', state);
},

查询业务组

登录成功之后即可调用 queryGroup (opens new window) 方法后，可在 onGetAllGroups (opens new window) 回调中获取所有业务号信息，获取之后即可通过业务号进行呼叫。

const guestComponent = this.selectComponent('#guest');
guestComponent.queryGroup();