أوفرلاي HTML5: كيف يصل جرافيك المتصفح إلى بثّك
تكاد كل أنظمة الجرافيك الحيّ الحديثة ترسم اليوم داخل محرك متصفح. تشرح هذه الصفحة ما هو أوفرلاي HTML5، وكيف تنجو الشفافية حتى تصل إلى مُشفِّرك، وكيف يبقى الجرافيك متزامنًا مع لوحة التحكم، وأين تنتهي حدود هذه الطريقة.
ما هو أوفرلاي HTML5
هو صفحة ويب عادية لا تُرسم خلفيتها أبدًا. كل عنصر جرافيكي — شريط أو زاوية أو شريط زاحف — عنصر DOM موضوع على لوحة 1920×1080. ولأن الصفحة لا ترسم شيئًا خلفها فكل البكسلات الأخرى شفافة.
يفتح مُشفِّرك تلك الصفحة في متصفح مدمج (يستخدم OBS إطار Chromium المدمج CEF) ويدمج الناتج فوق مشهدك مع احترام قناة ألفا. ومن وجهة نظر المُشفِّر هو مجرد مصدر آخر بشفافية، كصورة PNG متحركة.
كيف يتغير الجرافيك وهو على الهواء
تُفتح الصفحة مرة واحدة وتبقى مفتوحة. وحين يضغط المشغّل TAKE يمرّ أمر عبر WebSocket إلى الصفحة فتضيف صنفًا أو تحدّث قيمة، ويحرّك CSS العنصر إلى الشاشة. لا شيء يُعاد تحميله ولا ملف يُكتب.
وهذا ما يجعل البيانات الحيّة ممكنة: يمكن للنتيجة أن ترتفع وللساعة أن تمشي وللاسم أن يتغير والجرافيك ما زال على الهواء، لأن الصفحة تطبيق يعمل لا ملف مُصدَّر.
قواعد الأداء المهمة
- حرّك transform وopacity فقط. يتولاهما كرت الشاشة. أما تحريك width أو height أو top أو left فيفرض إعادة حساب التخطيط كل إطار.
- تجنّب box-shadow وfilter المتحركة. تعيد رسم مساحات كبيرة وهي السبب الأشيع لتقطّع الأوفرلاي.
- أبقِ الـDOM صغيرًا. بضع عشرات من العناصر أمر طبيعي. أما بضعة آلاف فهو بثّ يُسقط إطارات.
- لا تستخدم الاستطلاع الدوري. مؤقّت يعيد الرسم كل 100 مللي ثانية يكلّف الشيء نفسه سواء تغيّر شيء أم لا؛ ادفع التحديثات عبر الاتصال بدلًا من ذلك.
- طابق اللوحة. ابنِ بدقة المُشفِّر كي لا يُعاد تحجيم مصدر المتصفح أبدًا، فالتحجيم يُليّن كل حواف النص.
أين لا يكفي HTML5
يدمج مُشفِّرك مصدر المتصفح، أي أن الجرافيك موجود داخل ذلك المُشفِّر فقط. وإن احتجت تغذية مازج صورة أو مفتاح عتادي أو موقع ثانٍ فأنت بحاجة إلى إشارة فيديو: key وfill عبر SDI أو NDI بقناة ألفا. جرافيك NDI ←
والحد الآخر هو الدقة على مستوى الإطار. المتصفح يرسم حين يرسم؛ وهذا غير مرئي في البث الشبكي، لكن سلسلة تحسب الإطارات ستريد خادم إخراج حقيقيًا.
لماذا نبني بهذه الطريقة
صفحة المخرج في LowerThird Software هي HTML5 مملّ عن قصد: خلفية شفافة وحركات CSS وحالة عبر SignalR. أي أن مُشفِّرك يدمج على عتاد يستخدمه أصلًا، وأن مصمّمًا يعرف CSS يستطيع تغيير المظهر دون إعادة بناء. شاهده يعمل في OBS ←
جرافيك HTML5 جاهز قوالب ولوحة ومخرج شفاف في تثبيت واحد — بلا مشروع قوالب من الصفر.
اطلب الوصول المبكر