يتيح لك 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 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();

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