Assist

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

安装

npm i @openreplay/tracker-assist

用法

使用 JavaScript 代码片段

如果您的 OpenReplay 跟踪器是使用 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

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

如果您的网站是单页应用程序（SPA）

import trackerAssist from '@openreplay/tracker-assist';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
tracker.use(trackerAssist(options)); // check the list of available options below

tracker.start();

如果您的 Web 应用程序是服务端渲染（SSR）

如果您的应用程序是 SSR，请遵循以下示例。请确保 tracker.start() 在应用程序处于浏览器环境后被调用（即通过 useEffect 或 componentDidMount）。

import trackerAssist from '@openreplay/tracker-assist';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
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;
  onDragCamera?: (dx: number, dy: number) => any;
  callUITemplate?: string
  /** 
   * enables gzip compression for big batches on client side
   * */
  compressionEnabled: boolean;
  /**
   * Minimum amount of MESSAGES in a batch to trigger compression run
   * @default 5000
   * */
   compressionMinBatchSize: number
})

微件自定义

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

远程控制微件

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、名称和 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、名称和 query）。它还可以返回 onCallEnd，该函数将在通话结束时被调用。在连接不稳定的情况下，可能会被多次调用。下面是一个示例：

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

onRemoteControlStart: ({ email, name, query }) => (()=>void | void)：此回调函数在远程控制会话开始时立即触发，并返回坐席的详细信息（email、名称和 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、名称和 query）。

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

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

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

onDragCamera?: (dx: number, dy: number) => any;：此函数需要一个处理程序，用于定义在用于远程控制的 Three.js canvas 内按住鼠标按钮的行为。该处理程序接收 dx 和 dy，表示鼠标移动的增量。

onDragCamera: (dx, dy) => {
  moveCamera(dx, dy)
}

有疑问？

在设置此插件时遇到问题？请加入我们的 Slack 或查看我们的论坛，从我们的社区获得帮助。