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

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

Thomas Steiner

الخلفية

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

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

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

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

المتصفحات المتوافقة

تتوفّر أحداث البث القابلة للإدراج في "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;

الخصائص الديموغرافية

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

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

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

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

إضافة ملاحظات

يرغب فريق Chromium في التعرّف على تجاربك في استخدام مجموعات البث القابلة لإدراجها في MediaStreamTrack.

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

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

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

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

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

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

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

شكر وتقدير

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