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

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

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

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

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

ملاحظة: تسجيل canvas مُفعَّل في جميع عروض SaaS الخاصة بنا. والإعدادات — التي تم ضبطها على قيمها الافتراضية — لا يمكن تغييرها.

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

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

ملاحظة: بسبب قيود برنامج ترميز الفيديو الحالي، قد تكون لإعادة تشغيل تسجيل canvas خلفية سوداء (أو لون آخر صلب) لأنه من المستحيل ترميز قناة ألفا. نحن نتابع هذا الموضوع عن كثب وسنقوم بالتحديث إلى إصدارات أحدث من برنامج الترميز بمجرد توفرها.

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

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

إذا كنت تستخدم canvas فوق طبقة الواجهة الأمامية (بقيمة zIndex أعلى)، فقد تلاحظ شاشة سوداء أثناء إعادة تشغيل الجلسات المُسجَّلة. يحدث ذلك لأن واجهة برمجة تطبيقات الويب لا تتيح لنا بعد التقاط قناة ألفا. إذا كان هذا هو الحال مع تطبيق الويب الخاص بك، فأضف سمة HTML المسماة data-openreplay-hidden إلى عنصر canvas الذي يسبب المشكلة لإخفائه تمامًا من تسجيل الجلسة.

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