يتم عرض محتوى MediaStreamTrack
كبث يمكن التلاعب به أو استخدامه لإنشاء محتوى جديد.
الخلفية
في سياق واجهة برمجة تطبيقات التقاط الوسائط والبث
تمثل الواجهة 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