OpenReplay Assist te permite dar soporte a tus usuarios viendo su pantalla en vivo y entrando al instante en una llamada (WebRTC) con ellos sin necesidad de ningún software de compartición de pantalla de terceros.

npm i @openreplay/tracker-assist

Si tu tracker de OpenReplay está configurado mediante el fragmento de JS, simplemente reemplaza la aparición de .../openreplay.js por .../openreplay-assist.js. A continuación se muestra un ejemplo de cómo debería verse el script después del cambio:

<!-- 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>

Inicializa el tracker y luego carga el plugin @openreplay/tracker-assist.

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();

Sigue el siguiente ejemplo si tu aplicación es SSR. Asegúrate de que tracker.start() se llame una vez que la aplicación esté en el entorno del navegador (es decir, mediante useEffect o 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();
  }, [])
//...
}

El plugin de assist admite las siguientes opciones:

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
})

Tanto el control remoto como los widgets de llamada, los que ve el usuario final, se pueden personalizar por completo.

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'})
}

Es posible personalizar todos los aspectos de este widget mediante el siguiente conjunto de ids y classes. Los Ids sirven como anclas para botones/elementos individuales, mientras que las classes pueden usarse para contenedores de grupo.

Aquí está la lista de todos los callbacks:

• callConfirm: Personaliza el texto y/o el diseño del popup de solicitud de llamada.
• controlConfirm: Personaliza el texto y/o el diseño del popup de solicitud de control remoto.
• config: Contiene la configuración personalizada del servidor ICE/TURN. Por defecto es { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }], 'sdpSemantics': 'unified-plan' }.
• onAgentConnect: () => (()=>void | void): Esta función de callback se dispara en cuanto comienza una sesión en vivo y devuelve los detalles del agente (email, nombre y query). También puede devolver onAgentDisconnect, que se llamará cuando la sesión se desconecte. En caso de una conexión inestable, esto puede llamarse varias veces. A continuación se muestra un ejemplo:

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

• onCallStart: ({ email, name, query }) => (()=>void | void): Esta función de callback se dispara en cuanto comienza una llamada (webRTC) y devuelve los detalles del agente (email, nombre y query). También puede devolver onCallEnd, que se llamará cuando la llamada termine. En caso de una conexión inestable, esto puede llamarse varias veces. A continuación se muestra un ejemplo:

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

• onRemoteControlStart: ({ email, name, query }) => (()=>void | void): Esta función de callback se dispara en cuanto comienza una sesión de control remoto y devuelve los detalles del agente (email, nombre y query). También puede devolver onRemoteControlEnd, que se llamará cuando se revoquen los permisos de control remoto. A continuación se muestra un ejemplo:

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

• onCallDeny?: () => any;: Esta función de callback se dispara cuando el usuario deniega la llamada durante la fase de solicitud.

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

• onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;: Esta función de callback se dispara cuando el usuario deniega la sesión de control remoto durante la fase de solicitud y devuelve los detalles del agente (email, nombre y query).

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

• onRecordingDeny?: (agentInfo: Record<string, any>) => any;: Esta función de callback se dispara cuando el usuario deniega la sesión de grabación durante la fase de solicitud y devuelve los detalles del agente (email, nombre y query).

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

• onDragCamera?: (dx: number, dy: number) => any;: Esta función espera un handler que defina el comportamiento de un botón del ratón mantenido pulsado dentro de un canvas de Three.js para control remoto. El handler recibe dx y dy, que indican los deltas de movimiento del ratón.

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

¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.