أحداث بث يمكن إدراجها في 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. تمت مراجعة هذه المقالة من قِبل هارلاند ألفيستراند وجو ميديل بن واغنر وهويب كلاينهوت و فرانسوا بافوي. الصورة الرئيسية من إنشاء Chris Montgomery على Unsplash.