ملاحظة: تسجيل Canvas مُفعَّل فقط في عرض Dedicated Cloud الخاص بنا.

يمكن لـ OpenReplay تسجيل محتوى عناصر <canvas> مع دعم WebGL.

ملاحظة: إذا كنت تستخدم سياق WebGL، فتأكد من إضافة { preserveDrawingBuffer: true } إلى خيارات .getContext لمنع ظهور إطارات فارغة، لأن استخراج بيانات الصورة من canvas يعتمد عادةً على طبقة الرسم التي يتم تجاهلها افتراضيًا.

يجب أن يتم ذلك على مستوى الواجهة الخلفية (backend). لتمكين تسجيل canvas، ما عليك سوى تشغيل openreplay -e ثم إضافة الكتلة أدناه لتحديث خدمة http.

http:
  env:
    RECORD_CANVAS: true
    CANVAS_QUALITY: low
    CANVAS_FPS: 1

بمجرد الانتهاء، احفظ وأغلق ملف الإعداد باستخدام :wq حتى يتمكن OpenReplay من تطبيق التغييرات.

يمكنك ضبط الخيارات أدناه بدقة وفقًا لاحتياجاتك. في الواقع، قد تتطلب بعض التطبيقات معدل إطارات أعلى. وعلى الرغم من أن التقاط اللقطات وترميزها يتم في الخلفية (web-worker) ولا يؤثر على أداء تطبيقك، فإن اختيار قيم عالية سيستهلك المزيد من النطاق الترددي على مستوى المستخدم النهائي وسيتطلب المزيد من مساحة التخزين على القرص في نسخة OpenReplay لديك (الواجهة الخلفية). تُرسَل الصور/اللقطات، التي يلتقطها الـ tracker، إلى الواجهة الخلفية ثم تُعالَج لأغراض إعادة تشغيل الجلسات.

• CANVAS_QUALITY: 'low' | 'medium' | 'high': يحدد جودة اللقطات المُسجَّلة. القيمة الافتراضية: low.
• CANVAS_FPS: number: يحدد عدد الإطارات في الثانية التي تُسجَّل بها عناصر canvas. القيمة الافتراضية: 1.

يأتي مجال الأسماء canvas ضمن خيارات JavaScript SDK بالخيارات التالية:

canvas?: {
  disableCanvas?: boolean
  fixedCanvasScaling?: boolean
  useAnimationFrame?: boolean
  fileExt?: 'webp' | 'png' | 'jpeg' | 'avif'
}

• disableCanvas: تعطيل تسجيل canvas للجلسة التي بدأت. القيمة الافتراضية: true.
• fixedCanvasScaling: فرض التقاط canvas بدقة أصلية 600x600 على الشاشات عالية الكثافة (DPI). القيمة الافتراضية: false.
• useAnimationFrame: يُمكِّن التسجيل المتزامن للحصول على عرض أكثر استقرارًا لعناصر webGL. وقد يؤدي ذلك إلى زيادة في الحمل/التأخير، لذا فهو مناسب فقط للتطبيقات ذات معدل الإطارات المنخفض. القيمة الافتراضية: false.
• fileExt: اختر تنسيق (webp|png|jpeg|avif) للصور المُسجَّلة. القيمة الافتراضية: webp (لدعم قناة ألفا في WebGL).

من ناحية الخصوصية، لا يمكن تنقية محتوى عناصر canvas.

بالنسبة للجلسات المباشرة (المعروفة أيضًا باسم Assist)، لا حاجة إلى أي إعدادات خاصة. سيتم تمكين canvas والتقاطه افتراضيًا، وستُنقل البيانات عبر بروتوكول P2P. ولضمان الاستخدام الأمثل للشبكة، لا يتم بث البيانات إلا عندما يشاهد أحد الوكلاء الجلسة المباشرة ويتغير محتوى canvas.

إذا كانت لديك أي أسئلة حول هذه العملية، فلا تتردد في التواصل معنا عبر Slack الخاص بنا أو زيارة المنتدى الخاص بنا.