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

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

Thomas Steiner

الخلفية

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

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

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

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

دعم المتصفح

تتوفّر ميزة "مصادر البث القابلة للإدراج" في MediaStreamTrack بدءًا من الإصدار 94 من Chrome.

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

تشمل حالات استخدام "البث المباشر أثناء التشغيل" في MediaStreamTrack ما يلي على سبيل المثال لا الحصر:

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

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

رصد الميزات

يمكنك رصد ميزة "عمليات بث قابلة للإدراج" من أجل توفير الدعم لـ MediaStreamTrack على النحو التالي.

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

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

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

  • تستهلك MediaStreamTrackProcessor مصدر عنصر MediaStreamTrack وتنشئ سلسلة من إطارات الوسائط، وتحديدًا عناصر VideoFrame أو AudioFrame. يمكنك التفكير في هذا على أنّه مصدر لتلقّي البيانات من مسار، وهو قادر على عرض اللقطات غير المشفرة من المسار كـ ReadableStream.
  • MediaStreamTrackGenerator، الذي يستهلك مجموعة من إطارات الوسائط ويعرض واجهة MediaStreamTrack. ويمكن توفيرها لأي مصدر، تمامًا مثل مقطع صوتي من getUserMedia(). تتلقّى هذه الدالة إطارات الوسائط كمدخلات.

فريق MediaStreamTrackProcessor

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

فريق MediaStreamTrackGenerator

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

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

الخلاصة

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

مسار النظام الأساسي → المعالج → التحويل → المولد → مصادر النظام الأساسي

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

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;

عرض توضيحي

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

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

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

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

الملاحظات

يريد فريق Chromium معرفة رأيك في تجربة استخدام ميزة &quot;مصادر البث القابلة للإضافة&quot; في MediaStreamTrack.

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

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

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

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

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

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

أرسِل تغريدة إلى ‎@ChromiumDev باستخدام الهاشتاغ #InsertableStreams وأخبرنا عن مكان استخدامك لهذه الميزة وكيفية استخدامها.

الإقرارات

كتب مواصفات &quot;البث المباشر القابل للإدراج&quot; MediaStreamTrack كل من هارالد ألفستراند وغيدو أوردانيتا. تمت مراجعة هذه المقالة من قِبل &quot;هارالد ألفستراند&quot; وجو ميدلي وبن واغنر وهوييب كلاينهاوت وفرانسوا بوفورت. الصورة الرئيسية من كريس مونتغمري على Unsplash