Assist

OpenReplay Assist 让你能够通过查看用户的实时屏幕来为他们提供支持，并可即时与他们发起通话（WebRTC），无需任何第三方屏幕共享软件。

安装

npm i @openreplay/tracker-assist

用法

使用 JavaScript 代码片段

如果你的 OpenReplay tracker 是通过 JS 代码片段设置的，那么只需将其中的 .../openreplay.js 替换为 .../openreplay-assist.js。下面是修改后脚本应该呈现的示例：

<!-- OpenReplay Tracking Code -->
<script>
var initOpts = { projectKey: "GxPpaDARdn2345fgt321" };
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ...
})("//static.openreplay.com/latest/openreplay-assist.js", 1, 0, initOpts, startOpts);
</script>

使用 NPM

先初始化 tracker，然后加载 @openreplay/tracker-assist 插件。

如果你的网站是单页应用（SPA）

import Tracker from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
});
tracker.use(trackerAssist(options)); // check the list of available options below

tracker.start();

如果你的 Web 应用是服务端渲染（SSR）

如果你的应用是 SSR，请参照下面的示例。确保在应用启动后调用 tracker.start()（在 useEffect 或 componentDidMount 中）。

import OpenReplay from '@openreplay/tracker/cjs';
import trackerFetch from '@openreplay/tracker-assist/cjs';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.use(trackerAssist(options)); // check the list of available options below

//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, [])
//...
}

选项

assist 插件支持以下选项：

trackerAssist({
  callConfirm?: string|ConfirmOptions;
  controlConfirm?: string|ConfirmOptions;
  config?: object;
  onAgentConnect?: () => (()=>void | void);
  onCallStart?: () => (()=>void | void);
  onRemoteControlStart?: () => (()=>void | void);
	onCallDeny?: () => any;
	onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;
  onRecordingDeny?: (agentInfo: Record<string, any>) => any;
	callUITemplate?: string
})

组件自定义

终端用户所看到的远程控制组件以及通话组件都可以完全自定义。

远程控制组件

type ConfirmOptions = {
  text?:string,
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
  confirmBtn?: ButtonOptions, 
  declineBtn?: ButtonOptions
}

type ButtonOptions = HTMLButtonElement | string | {
  innerHTML?: string, // to pass an svg string or text
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
}

通话组件

可以通过下面这组 ids 和 classes 自定义此组件的各个方面。Ids 用作单个按钮/元素的锚点，而 classes 可用于分组容器。

HTML 类型	名称	描述
id	`or-assist`	组件容器
class	`card`、`border-dark`、`shadow` 和 `drag-area`	卡片边框和阴影的样式
id	`controls`	组件内部通话部分的容器
class	`card-header`	通话组件卡片头部的样式（即在计时器旁边显示坐席名称的那部分）
id	`agent-name`	坐席名称的容器
id	`duration`	计时器的容器
id	`video-container`	用户自己的视频画面容器
id	`remote-stream`	坐席的视频画面
class	`card-footer`	静音、视频、结束通话等按钮的容器
id	`audio-btn`	静音按钮
id	`video-btn`	视频按钮
id	`end-call-btn`	结束通话按钮
id	`remote-control-row`	远程控制的行
id	`end-control-btn`	结束控制按钮的 Id

回调

以下是所有回调的列表：

callConfirm：自定义通话请求弹窗的文本和/或布局。
controlConfirm：自定义远程控制请求弹窗的文本和/或布局。
config：包含自定义的 ICE/TURN 服务器配置。默认为 { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }], 'sdpSemantics': 'unified-plan' }。
onAgentConnect: () => (()=>void | void)：此回调函数会在实时会话开始时立即触发，并返回坐席的详细信息（email、name 和 query）。它还可以返回 onAgentDisconnect，该函数会在会话断开时被调用。如果连接不稳定，此回调可能会被多次调用。下面是一个示例：

onAgentConnect = ({ email, name, query }) => {
  console.log("Live session started")
  const onAgentDisconnect =  () => console.log("Live session stopped")
  return onAgentDisconnect
}

onCallStart: ({ email, name, query }) => (()=>void | void)：此回调函数会在通话（webRTC）开始时立即触发，并返回坐席的详细信息（email、name 和 query）。它还可以返回 onCallEnd，该函数会在通话结束时被调用。如果连接不稳定，此回调可能会被多次调用。下面是一个示例：

onCallStart: () => {
  console.log("Call started")
  const onCallEnd = () => console.log("Call ended")
  return onCallEnd
}

onRemoteControlStart: ({ email, name, query }) => (()=>void | void)：此回调函数会在远程控制会话开始时立即触发，并返回坐席的详细信息（email、name 和 query）。它还可以返回 onRemoteControlEnd，该函数会在远程控制权限被撤销时被调用。下面是一个示例：

onRemoteControlStart: () => {
  console.log("Remote control started")
  const onControlEnd = () => console.log("Remote control ended")
  return onControlEnd
}

onCallDeny?: () => any;：此回调函数会在用户于请求阶段拒绝通话时触发。

onCallDeny: () => {
  console.log("Call denied")
}

onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;：此回调函数会在用户于请求阶段拒绝远程控制会话时触发，并返回坐席的详细信息（email、name 和 query）。

onRemoteControlDeny: ({ email, name, query }) => {
  console.log("Remote control request denied for", email)
}

onRecordingDeny?: (agentInfo: Record<string, any>) => any;：此回调函数会在用户于请求阶段拒绝录制会话时触发，并返回坐席的详细信息（email、name 和 query）。

onRecordingDeny: ({ email, name, query }) => {
  console.log("Recording session denied")
 
}

有疑问？

在设置此插件时遇到了麻烦？请加入我们的 Slack 或访问我们的论坛，从我们的社区获取帮助。