أحداث بث يمكن إدراجها في 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، الذي يستخدِم مصدر عنصر MediaStreamTrack وينشئ بثًا لإطارات الوسائط، وتحديدًا VideoFrame أو AudioFrame) يمكنك اعتبار هذا العنصر كمصدر مسار قادر على عرض اللقطات غير المشفَّرة من المسار على هيئة ReadableStream.
• MediaStreamTrackGenerator، الذي يستخدِم بثًا لإطارات الوسائط ويعرِض واجهة MediaStreamTrack ويمكن تقديمه لأي مصدر بيانات، تمامًا مثل مقطع صوتي من getUserMedia(). ويتم أخذ إطارات الوسائط كمدخلات.

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 وإعلامنا بمكان استخدامها وكيفية استخدامها.

روابط مفيدة

• مسودة المواصفات
• الشرح
• ChromeStatus
• خطأ في Chromium
• مراجعة TAG
• مستودع GitHub

شكر وتقدير

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