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

Thomas Steiner

تاريخ النشر: 4 مايو 2021

في سياق 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.

جارٍ جمع كل المعلومات

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

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

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

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; وجو ميدلي وبن واغنر وهوييب كلاينهاوت وفرانسوا بوفورت.