يتيح لك OpenReplay Assist دعم مستخدميك من خلال رؤية شاشتهم المباشرة والانضمام فوراً إلى مكالمة (WebRTC) معهم دون الحاجة إلى أي برنامج مشاركة شاشة تابع لجهة خارجية.

npm i @openreplay/tracker-assist

إذا كان متتبّع 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>

قم بتهيئة المتتبّع ثم حمّل الإضافة @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();

اتّبع المثال أدناه إذا كان تطبيقك يستخدم 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 لحاويات المجموعات.

فيما يلي قائمة بجميع دوال الاستدعاء:

• 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 الخاص بنا أو الاطلاع على المنتدى والحصول على المساعدة من مجتمعنا.