محرك معالجة إطارات الفيديو WebCodecs: تحسين معالجة الإطارات

تُحدث واجهة برمجة تطبيقات WebCodecs ثورة في معالجة الفيديو المستندة إلى الويب، مما يمكّن المطورين من الوصول إلى برامج الترميز الصوتية والمرئية منخفضة المستوى مباشرةً داخل المتصفح. تفتح هذه القدرة إمكانيات مثيرة لتحرير الفيديو في الوقت الفعلي والبث والتطبيقات الإعلامية المتقدمة. ومع ذلك، فإن تحقيق الأداء الأمثل مع WebCodecs يتطلب فهمًا عميقًا لبنيته والاهتمام الدقيق بتقنيات تحسين معالجة الإطارات.

فهم واجهة برمجة تطبيقات WebCodecs وكائن VideoFrame

قبل الغوص في استراتيجيات التحسين، دعنا نراجع بإيجاز المكونات الأساسية لواجهة برمجة تطبيقات WebCodecs، وخاصةً كائن VideoFrame.

• VideoDecoder: يفك تشفير تدفقات الفيديو المشفرة إلى كائنات VideoFrame.
• VideoEncoder: يشفر كائنات VideoFrame إلى تدفقات الفيديو المشفرة.
• VideoFrame: يمثل إطار فيديو واحدًا، ويوفر الوصول إلى بيانات البكسل الأولية. هذا هو المكان الذي تحدث فيه المعجزة للمعالجة.

يحتوي كائن VideoFrame على معلومات أساسية حول الإطار، بما في ذلك أبعاده وتنسيقه والطابع الزمني وبيانات البكسل. يعد الوصول إلى بيانات البكسل هذه ومعالجتها بكفاءة أمرًا بالغ الأهمية لتحقيق الأداء الأمثل.

استراتيجيات التحسين الرئيسية

يتضمن تحسين معالجة إطارات الفيديو باستخدام WebCodecs العديد من الاستراتيجيات الرئيسية. سنستكشف كل منها بالتفصيل.

1. تقليل نسخ البيانات

تعد نسخ البيانات بمثابة عنق الزجاجة في الأداء في معالجة الفيديو. في كل مرة تنسخ فيها بيانات البكسل، فإنك تقدم حملًا إضافيًا. لذلك، فإن تقليل النسخ غير الضرورية أمر بالغ الأهمية.

الوصول المباشر باستخدام VideoFrame.copyTo()

تتيح لك طريقة VideoFrame.copyTo() نسخ بيانات الإطار بكفاءة إلى BufferSource (على سبيل المثال، ArrayBuffer، TypedArray). ومع ذلك، تتضمن هذه الطريقة أيضًا نسخة. ضع في اعتبارك الأساليب التالية لتقليل النسخ:

• المعالجة الموضعية: كلما أمكن، قم بإجراء المعالجة مباشرة على البيانات داخل BufferSource الوجهة. تجنب إنشاء نسخ وسيطة.
• إنشاء العرض: بدلاً من نسخ المخزن المؤقت بأكمله، قم بإنشاء طرق عرض مصفوفة مكتوبة (على سبيل المثال، Uint8Array، Float32Array) التي تشير إلى مناطق معينة من المخزن المؤقت الأساسي. يتيح لك هذا العمل بالبيانات دون إجراء نسخة كاملة.

مثال: ضع في اعتبارك تطبيق تعديل السطوع على VideoFrame.

            
async function adjustBrightness(frame, brightness) {
  const width = frame.codedWidth;
  const height = frame.codedHeight;
  const format = frame.format; // e.g., 'RGBA'
  const data = new Uint8Array(width * height * 4); // Assuming RGBA format
  frame.copyTo(data);

  for (let i = 0; i < data.length; i += 4) {
    data[i] = Math.min(255, data[i] + brightness);   // Red
    data[i + 1] = Math.min(255, data[i + 1] + brightness); // Green
    data[i + 2] = Math.min(255, data[i + 2] + brightness); // Blue
  }

  // Create a new VideoFrame from the modified data
  const newFrame = new VideoFrame(data, {
    codedWidth: width,
    codedHeight: height,
    format: format,
    timestamp: frame.timestamp,
  });

  frame.close(); // Release the original frame
  return newFrame;
}

            

              
                Copy
              
            
          

يتضمن هذا المثال، على الرغم من أنه عملي، نسخة كاملة من بيانات البكسل. بالنسبة للإطارات الكبيرة، يمكن أن يكون هذا بطيئًا. استكشف استخدام WebAssembly أو المعالجة المستندة إلى GPU (الموضحة لاحقًا) لتجنب هذه النسخة.

2. الاستفادة من WebAssembly للعمليات الحرجة للأداء

يمكن أن يكون JavaScript، على الرغم من تعدد استخداماته، بطيئًا للمهام كثيفة الحساب. يوفر WebAssembly (Wasm) بديلاً قريبًا من الأداء الأصلي. من خلال كتابة منطق معالجة الإطارات الخاص بك بلغات مثل C++ أو Rust وتجميعه في Wasm، يمكنك تحقيق تسريعات كبيرة.

دمج Wasm مع WebCodecs

يمكنك تمرير بيانات البكسل الأولية من VideoFrame إلى وحدة Wasm للمعالجة ثم إنشاء VideoFrame جديد من البيانات المعالجة. يتيح لك هذا إيقاف تشغيل المهام كثيفة الحساب إلى Wasm مع الاستمرار في الاستفادة من راحة واجهة برمجة تطبيقات WebCodecs.

مثال: يعد الالتواء في الصور (الضبابية، الشحذ، اكتشاف الحواف) مرشحًا رئيسيًا لـ Wasm. إليك مخطط تفصيلي مفاهيمي:

1. قم بإنشاء وحدة Wasm تقوم بإجراء عملية الالتواء. ستقبل هذه الوحدة مؤشرًا إلى بيانات البكسل والعرض والارتفاع ونواة الالتواء كمدخلات.
2. في JavaScript، احصل على بيانات البكسل من VideoFrame باستخدام copyTo().
3. قم بتخصيص الذاكرة في ذاكرة Wasm الخطية للاحتفاظ ببيانات البكسل.
4. انسخ بيانات البكسل من JavaScript إلى ذاكرة وحدة Wasm.
5. استدعِ دالة Wasm لإجراء الالتواء.
6. انسخ بيانات البكسل المعالجة من ذاكرة وحدة Wasm مرة أخرى إلى JavaScript.
7. قم بإنشاء VideoFrame جديد من البيانات المعالجة.

تحذيرات: يتضمن التفاعل مع Wasm بعض الحمل الزائد لتخصيص الذاكرة ونقل البيانات. من الضروري تحديد ملف تعريف التعليمات البرمجية الخاصة بك للتأكد من أن مكاسب الأداء من Wasm تفوق هذا الحمل الزائد. يمكن لأدوات مثل Emscripten تبسيط عملية تجميع كود C++ في Wasm.

3. تسخير قوة SIMD (تعليمات مفردة، بيانات متعددة)

SIMD هو نوع من المعالجة المتوازية التي تسمح لتعليمات واحدة بالعمل على نقاط بيانات متعددة في وقت واحد. تحتوي وحدات المعالجة المركزية الحديثة على تعليمات SIMD التي يمكنها تسريع المهام التي تتضمن عمليات متكررة على مصفوفات البيانات بشكل كبير، مثل معالجة الصور. يدعم WebAssembly SIMD من خلال اقتراح Wasm SIMD.

SIMD لعمليات مستوى البكسل

يعتبر SIMD مناسبًا بشكل خاص للعمليات على مستوى البكسل، مثل تحويل الألوان والترشيح والدمج. من خلال إعادة كتابة منطق معالجة الإطارات الخاص بك لاستخدام تعليمات SIMD، يمكنك تحقيق تحسينات كبيرة في الأداء.

مثال: تحويل صورة من RGB إلى تدرج الرمادي.

قد يقوم تطبيق JavaScript الساذج بالتكرار خلال كل بكسل وحساب قيمة التدرج الرمادي باستخدام صيغة مثل gray = 0.299 * red + 0.587 * green + 0.114 * blue.

ستقوم مجموعة SIMD بمعالجة وحدات بكسل متعددة في وقت واحد، مما يقلل بشكل كبير من عدد التعليمات المطلوبة. توفر مكتبات مثل SIMD.js (على الرغم من أنها غير مدعومة عالميًا بشكل أصلي وتم استبدالها إلى حد كبير بواسطة Wasm SIMD) تجريدات للعمل مع تعليمات SIMD في JavaScript، أو يمكنك استخدام intrinsics Wasm SIMD مباشرةً. ومع ذلك، يتضمن استخدام intrinsics Wasm SIMD مباشرةً عادةً كتابة منطق المعالجة بلغة مثل C++ أو Rust وتجميعه في Wasm.

4. استخدام وحدة معالجة الرسومات (GPU) للمعالجة المتوازية

وحدة معالجة الرسومات (GPU) هي معالج متوازٍ للغاية ومحسّن للرسومات ومعالجة الصور. يمكن أن يؤدي إيقاف تشغيل مهام معالجة الإطارات إلى وحدة معالجة الرسومات إلى تحقيق مكاسب كبيرة في الأداء، خاصةً للعمليات المعقدة.

WebGPU وتكامل VideoFrame

WebGPU هي واجهة برمجة تطبيقات رسومات حديثة توفر الوصول إلى وحدة معالجة الرسومات من متصفحات الويب. بينما لا يزال التكامل المباشر مع كائنات VideoFrame WebCodecs قيد التطوير، فمن الممكن نقل بيانات البكسل من VideoFrame إلى نسيج WebGPU وإجراء المعالجة باستخدام الظلال.

سير العمل المفاهيمي:

1. قم بإنشاء نسيج WebGPU بنفس أبعاد وتنسيق VideoFrame.
2. انسخ بيانات البكسل من VideoFrame إلى نسيج WebGPU. يتضمن هذا عادةً استخدام أمر نسخ.
3. اكتب برنامج تظليل WebGPU لإجراء عمليات معالجة الإطارات المطلوبة.
4. قم بتنفيذ برنامج الظل على وحدة معالجة الرسومات، باستخدام النسيج كمدخل.
5. اقرأ البيانات المعالجة من نسيج الإخراج.
6. قم بإنشاء VideoFrame جديد من البيانات المعالجة.

المزايا:

• التوازي الهائل: يمكن لوحدات معالجة الرسومات معالجة آلاف وحدات البكسل في وقت واحد.
• تسريع الأجهزة: يتم تسريع العديد من عمليات معالجة الصور على وحدة معالجة الرسومات.

العيوب:

• التعقيد: WebGPU هي واجهة برمجة تطبيقات معقدة نسبيًا.
• الحمل الزائد لنقل البيانات: يمكن أن يكون نقل البيانات بين وحدة المعالجة المركزية ووحدة معالجة الرسومات عنق الزجاجة.

واجهة برمجة تطبيقات Canvas 2D

على الرغم من أنها ليست قوية مثل WebGPU، يمكن استخدام واجهة برمجة تطبيقات Canvas 2D لمهام معالجة الإطارات الأبسط. يمكنك رسم VideoFrame على Canvas ثم الوصول إلى بيانات البكسل باستخدام getImageData(). ومع ذلك، غالبًا ما يتضمن هذا الأسلوب نسخًا ضمنية للبيانات وقد لا يكون الخيار الأكثر أداءً للتطبيقات المتطلبة.

5. تحسين إدارة الذاكرة

تعتبر إدارة الذاكرة بكفاءة أمرًا بالغ الأهمية لمنع تسرب الذاكرة وتقليل الحمل الزائد لجمع البيانات المهملة. يعد تحرير كائنات VideoFrame والموارد الأخرى بشكل صحيح أمرًا ضروريًا للحفاظ على أداء سلس.

تحرير كائنات VideoFrame

تستهلك كائنات VideoFrame الذاكرة. عند الانتهاء من استخدام VideoFrame، من المهم تحرير موارده عن طريق استدعاء طريقة close().

مثال:

            
// Process the frame
const processedFrame = await processFrame(frame);

// Release the original frame
frame.close();

// Use the processed frame
// ...

// Release the processed frame when done
processedFrame.close();

            

              
                Copy
              
            
          

قد يؤدي الفشل في تحرير كائنات VideoFrame إلى تسرب الذاكرة وتدهور الأداء بمرور الوقت.

تجميع الكائنات

بالنسبة للتطبيقات التي تنشئ كائنات VideoFrame وتدمرها بشكل متكرر، يمكن أن يكون تجميع الكائنات تقنية تحسين قيمة. بدلاً من إنشاء كائنات VideoFrame جديدة من البداية في كل مرة، يمكنك الاحتفاظ بمجموعة من الكائنات المخصصة مسبقًا وإعادة استخدامها. يمكن أن يؤدي هذا إلى تقليل الحمل الزائد المرتبط بإنشاء الكائنات وجمع البيانات المهملة.

6. اختيار تنسيق الفيديو وبرنامج الترميز المناسبين

يمكن أن يؤثر اختيار تنسيق الفيديو وبرنامج الترميز بشكل كبير على الأداء. بعض برامج الترميز أكثر تكلفة من الناحية الحسابية لفك التشفير والترميز من غيرها. ضع في اعتبارك العوامل التالية:

• تعقيد برنامج الترميز: تتطلب برامج الترميز الأبسط (على سبيل المثال، VP8) عمومًا طاقة معالجة أقل من برامج الترميز الأكثر تعقيدًا (على سبيل المثال، AV1).
• تسريع الأجهزة: يتم تسريع بعض برامج الترميز بواسطة الأجهزة على أجهزة معينة، مما قد يؤدي إلى تحسينات كبيرة في الأداء.
• التوافق: تأكد من أن برنامج الترميز المختار مدعوم على نطاق واسع من قبل المتصفحات والأجهزة المستهدفة.
• أخذ عينات فرعية من الألوان: تتطلب التنسيقات التي تحتوي على أخذ عينات فرعية من الألوان (على سبيل المثال، YUV420) ذاكرة ونطاق ترددي أقل من التنسيقات التي لا تحتوي على أخذ عينات فرعية (على سبيل المثال، YUV444). تؤثر هذه المفاضلة على جودة الصورة وهي غالبًا عامل مهم عند العمل في سيناريوهات ذات نطاق ترددي محدود.

7. تحسين معلمات الترميز وفك التشفير

يمكن ضبط عمليات الترميز وفك التشفير بدقة عن طريق ضبط معلمات مختلفة. ضع في اعتبارك ما يلي:

• الدقة: تتطلب الدقة الأقل طاقة معالجة أقل. ضع في اعتبارك تصغير حجم الفيديو قبل المعالجة إذا لم تكن الدقة العالية ضرورية.
• معدل الإطارات: تقلل معدلات الإطارات المنخفضة من عدد الإطارات التي يجب معالجتها في الثانية.
• معدل البت: يؤدي انخفاض معدلات البت إلى أحجام ملفات أصغر ولكن يمكن أن يؤدي أيضًا إلى تقليل جودة الصورة.
• الفاصل الزمني للإطار الرئيسي: يمكن أن يؤثر ضبط الفاصل الزمني للإطار الرئيسي على كل من أداء الترميز وقدرات البحث.

جرّب إعدادات معلمات مختلفة للعثور على التوازن الأمثل بين الأداء والجودة لتطبيقك المحدد.

8. العمليات غير المتزامنة و سلاسل العامل

يمكن أن تكون معالجة الإطارات كثيفة الحساب وتعوق سلسلة التعليمات الرئيسية، مما يؤدي إلى تجربة مستخدم بطيئة. لتجنب ذلك، قم بإجراء عمليات معالجة الإطارات بشكل غير متزامن باستخدام async/await أو سلاسل العامل (Web Workers).

Web Workers للمعالجة في الخلفية

تسمح لك Web Workers بتشغيل كود JavaScript في سلسلة تعليمات منفصلة، مما يمنعه من حظر سلسلة التعليمات الرئيسية. يمكنك إيقاف تشغيل مهام معالجة الإطارات إلى Web Worker وإعادة النتائج إلى سلسلة التعليمات الرئيسية باستخدام تمرير الرسائل.

مثال:

1. قم بإنشاء برنامج نصي Web Worker يقوم بإجراء معالجة الإطارات.
2. في سلسلة التعليمات الرئيسية، قم بإنشاء مثيل Web Worker جديد.
3. مرر بيانات VideoFrame إلى Web Worker باستخدام postMessage().
4. في Web Worker، قم بمعالجة بيانات الإطار وانشر النتائج مرة أخرى إلى سلسلة التعليمات الرئيسية.
5. في سلسلة التعليمات الرئيسية، قم بمعالجة النتائج وتحديث واجهة المستخدم.

اعتبارات: يمكن أن يؤدي نقل البيانات بين سلسلة التعليمات الرئيسية و Web Workers إلى زيادة العبء. يمكن أن يؤدي استخدام الكائنات القابلة للتحويل (على سبيل المثال، ArrayBuffer) إلى تقليل هذا الحمل الزائد عن طريق تجنب نسخ البيانات. تقوم الكائنات القابلة للتحويل بـ "نقل" ملكية البيانات الأساسية، لذا لم يعد للسياق الأصلي حق الوصول إليها.

9. إنشاء ملفات تعريف ومراقبة الأداء

يعد إنشاء ملف تعريف التعليمات البرمجية الخاصة بك أمرًا ضروريًا لتحديد اختناقات الأداء وقياس فعالية جهود التحسين. استخدم أدوات مطور المتصفح (على سبيل المثال، أدوات Chrome DevTools، وأدوات Firefox Developer Tools) لإنشاء ملف تعريف التعليمات البرمجية JavaScript ووحدات WebAssembly الخاصة بك. انتبه إلى:

• استخدام وحدة المعالجة المركزية: حدد الوظائف التي تستهلك قدرًا كبيرًا من وقت وحدة المعالجة المركزية.
• تخصيص الذاكرة: تتبع أنماط تخصيص الذاكرة وإلغاء تخصيصها لتحديد تسرب الذاكرة المحتمل.
• وقت عرض الإطارات: قم بقياس الوقت المستغرق لمعالجة كل إطار وعرضه.

راقب أداء تطبيقك بانتظام وكرر استراتيجيات التحسين الخاصة بك بناءً على نتائج إنشاء الملفات.

أمثلة وحالات استخدام واقعية

تنطبق واجهة برمجة تطبيقات WebCodecs وتقنيات تحسين معالجة الإطارات على مجموعة واسعة من حالات الاستخدام:

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

مثال: نظام أساسي عالمي لمؤتمرات الفيديو

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

الخلاصة

توفر واجهة برمجة تطبيقات WebCodecs إمكانات قوية لمعالجة الفيديو المستندة إلى الويب. من خلال فهم البنية الأساسية وتطبيق استراتيجيات التحسين التي تمت مناقشتها في هذا الدليل، يمكنك فتح إمكاناتها الكاملة وإنشاء تطبيقات وسائط في الوقت الفعلي عالية الأداء. تذكر أن تقوم بإنشاء ملف تعريف التعليمات البرمجية الخاصة بك وتجربة تقنيات مختلفة وتكرر باستمرار لتحقيق النتائج المثلى. مستقبل الفيديو المستند إلى الويب هنا، وهو مدعوم من WebCodecs.

مزيد من التعلم

• MDN WebCodecs API Documentation
• Web.dev WebCodecs Overview
• Vimeo Blog: New JavaScript APIs for Low-Latency Video with WebCodecs