أحداث بث يمكن إدراجها في MediaStreamTrack

يتم عرض محتوى MediaStreamTrack كبث يمكن التلاعب به أو استخدامه لإنشاء محتوى جديد

Thomas Steiner

الخلفية

في سياق Media Capture and Streams API، represent واجهة MediaStreamTrack مسار وسائط واحدًا ضمن بث، وعادةً ما يكون مسارًا صوتيًا أو فيديو، ولكن قد تتوفّر أنواع أخرى من المسارات. تتألف عناصر MediaStream من صفر أو أكثر من عناصر MediaStreamTrack التي تمثّل مقاطع صوتية أو مقاطع فيديو مختلفة. قد تتضمّن كل MediaStreamTrack قناة واحدة أو أكثر. تمثّل القناة أصغر وحدة بث وسائط، مثل إشارة صوتية مرتبطة بمكبّر صوت معيّن، كالسماعة اليسرى أو اليمنى في مسار صوت استيريو.

ما هي أحداث البث القابلة للإدراج في MediaStreamTrack؟

إنّ الفكرة الأساسية وراء أحداث البث القابلة للإدراج في MediaStreamTrack هي عرض محتوى MediaStreamTrack كمجموعة من أحداث البث (على النحو المحدّد في WHATWG Streams API). ويمكن تعديل هذه الخلاصات لإدخال مكونات جديدة.

إنّ منح المطوّرين إمكانية الوصول إلى بث الفيديو (أو الصوت) مباشرةً يسمح لهم بتطبيق التعديلات على البث مباشرةً. في المقابل، فإنّ تنفيذ مهمة التلاعب بالفيديو نفسها باستخدام الطرق التقليدية يتطلّب من المطوّرين استخدام عناصر وسيطة، مثل عناصر <canvas>. (للاطّلاع على تفاصيل عن هذا النوع من العمليات، يمكنك مثلاً الاطّلاع على مقالة الفيديو + اللوحة = سحر).

دعم المتصفح

تتوفّر أحداث البث القابلة للإدراج في MediaStreamTrack من الإصدار 94 من Chrome.

حالات الاستخدام

تشمل حالات استخدام أحداث البث القابلة للإدراج في MediaStreamTrack ما يلي على سبيل المثال لا الحصر:

  • أدوات مؤتمرات الفيديو، مثل "قبعات مضحكة" أو الخلفيات الافتراضية
  • معالجة الصوت، مثل برامج الترميز الصوتي

كيفية استخدام أحداث البث القابلة للإدراج في "MediaStreamTrack"

رصد الميزات

يمكنك رصد أحداث البث القابلة للإدراج من خلال ميزة MediaStreamTrack على النحو التالي:

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

المفاهيم الأساسية

تستند أحداث البث القابلة للإدراج في MediaStreamTrack إلى المفاهيم التي اقترحتها WebCodecs سابقًا، وتقسم MediaStreamTrack من الناحية المفاهيمية إلى مكوّنَين:

فريق MediaStreamTrackProcessor

يعرِض عنصر MediaStreamTrackProcessor سمة واحدة، وهي readable. وتسمح بقراءة الإطارات من MediaStreamTrack. إذا كان المقطع الصوتي عبارة عن مقطع صوتي في فيديو، ستكون الأجزاء المقروءة من readable هي عناصر VideoFrame. إذا كان المقطع صوتيًا، ستكون الأجزاء التي تتم قراءتها من readable عناصر AudioFrame.

فريق MediaStreamTrackGenerator

يعرِض كائن MediaStreamTrackGenerator أيضًا سمة واحدة، وهي writable، وهي WritableStream تسمح بكتابة إطارات الوسائط في MediaStreamTrackGenerator، وهو نفسه MediaStreamTrack. إذا كانت قيمة السمة kind هي "audio"، يقبل البث عناصر AudioFrame ويفشل مع أي نوع آخر. إذا كان النوع هو "video"، يقبل البث عناصر VideoFrame ويتعطّل عند استخدام أي نوع آخر. عند كتابة إطار في writable، يتمّ استدعاء طريقة close() للإطار تلقائيًا، لكي لا يعود بالإمكان الوصول إلى موارد الوسائط من JavaScript.

MediaStreamTrackGenerator هو مقطع صوتي يمكن تنفيذ مصدر مخصّص له من خلال كتابة لقطات وسائط في حقل writable.

الخلاصة

الفكرة الأساسية هي إنشاء سلسلة معالجة على النحو التالي:

مسار المنصة ← المعالج ← التحويل ← المُنشئ ← مسارات الإخراج في المنصة

يوضّح المثال أدناه هذه السلسلة لتطبيق ماسح ضوئي للباركود يُبرز الباركود الذي تم رصده في بث فيديو مباشر.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

عرض توضيحي

يمكنك الاطّلاع على العرض التقديمي لميزة الماسح الضوئي لرمز الاستجابة السريعة من القسم أعلاه، واستخدامه على الكمبيوتر المكتبي أو متصفّح الأجهزة الجوّالة. احمل رمز استجابة سريعة أمام الكاميرا وسيرصده التطبيق ويُبرزه. يمكنك الاطّلاع على رمز مصدر التطبيق في تطبيق Glitch.

تطبيق مسح رمز الاستجابة السريعة يعمل في علامة تبويب متصفّح الكمبيوتر المكتبي ويعرض رمز استجابة سريعة تم رصده وتم تمييزه على الهاتف الذي يحمله المستخدم أمام كاميرا الكمبيوتر المحمول.

اعتبارات الأمان والخصوصية

يعتمد أمان واجهة برمجة التطبيقات هذه على الآليات الحالية في النظام الأساسي للويب. وأثناء عرض البيانات باستخدام واجهتَي VideoFrame وAudioFrame، تسري قواعد هاتين الواجهتَين للتعامل مع البيانات التي يحتوي على مصدرها البيانات. على سبيل المثال، لا يمكن الوصول إلى البيانات من موارد من مصادر مختلفة بسبب القيود الحالية المفروضة على الوصول إلى هذه الموارد (على سبيل المثال، لا يمكن الوصول إلى وحدات البكسل في صورة أو عنصر فيديو من مصدر مختلف). بالإضافة إلى ذلك، يخضع الوصول إلى بيانات الوسائط من الكاميرات أو الميكروفونات أو الشاشات لإذن المستخدم. إنّ بيانات الوسائط التي تعرضها واجهة برمجة التطبيقات هذه متاحة من خلال واجهات برمجة تطبيقات أخرى.

ملاحظات

يرغب فريق Chromium في معرفة رأيك بشأن تجاربك في البث المباشر القابل للإدراج في قناة MediaStreamTrack.

أخبِرنا عن تصميم واجهة برمجة التطبيقات

هل هناك مشكلة في واجهة برمجة التطبيقات لا تعمل على النحو المتوقّع؟ هل هناك طُرق أو سمات مفقودة تحتاجها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق حول نموذج الأمان؟ يمكنك الإبلاغ عن مشكلة في المواصفات في مستودع GitHub المقابل، أو إضافة ملاحظاتك إلى مشكلة حالية.

الإبلاغ عن مشكلة في التنفيذ

هل واجهت مشكلة في التنفيذ في Chromium؟ أم أنّ عملية التنفيذ مختلفة عن المواصفات؟ يُرجى الإبلاغ عن الخطأ على new.crbug.com. واحرص على تضمين أكبر قدر ممكن من التفاصيل، وإرشادات بسيطة لإعادة إنتاج المحتوى، وأدخِل Blink>MediaStream في مربّع المكوّنات. يُعدّ تطبيق Glitch مثاليًا لمشاركة عمليات إعادة الإنتاج بسرعة وسهولة.

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام أحداث بث قابلة للإدراج في قناة "MediaStreamTrack"؟ يساعد دعمك العلني فريق Chromium في تحديد أولويات الميزات ويُظهر لموفّري المتصفّحات الآخرين مدى أهمية إتاحة هذه الميزات.

يمكنك إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف #InsertableStreams وإعلامنا بمكان استخدامها وكيفية استخدامها.

شكر وتقدير

كتب هارلاد ألفيستراند وغيدو أوردانيتا بثّات المحتوى القابلة للإدراج في مواصفات MediaStreamTrack. تمت مراجعة هذه المقالة من قِبل هارلاند ألفيستراند وجو ميديل بن واغنر وهويب كلاينهوت و فرانسوا بافوي. صورة رئيسية من تأليف "كريس مونتغمري" على Un التصميم