منتشر شده: ۴ مه ۲۰۲۱
در زمینهی رابط برنامهنویسی کاربردی (API) ضبط رسانه و جریانها (Media Capture and Streams)، رابط MediaStreamTrack یک مسیر رسانهای واحد را در یک جریان نشان میدهد. معمولاً این مسیرها، مسیر صوتی یا تصویری هستند، اما انواع دیگری از مسیرها نیز ممکن است وجود داشته باشند.
اشیاء MediaStream شامل صفر یا چند شیء MediaStreamTrack هستند که نشان دهنده آهنگهای مختلف صوتی یا تصویری هستند. هر MediaStreamTrack ممکن است یک یا چند کانال داشته باشد. کانال نشان دهنده کوچکترین واحد یک جریان رسانهای است، مانند یک سیگنال صوتی مرتبط با یک بلندگوی مشخص، مانند چپ یا راست در یک آهنگ صوتی استریو.
جریانهای قابل درج برای MediaStreamTrack چیست؟
ایده اصلی پشت استریمهای قابل درج برای MediaStreamTrack ، نمایش محتوای MediaStreamTrack به عنوان مجموعهای از استریمها (مطابق تعریف API WHATWG Streams ) است. این استریمها را میتوان برای معرفی اجزای جدید دستکاری کرد.
اعطای دسترسی مستقیم به جریان ویدئو (یا صدا) به توسعهدهندگان، به آنها اجازه میدهد تا تغییرات را مستقیماً در جریان اعمال کنند. در مقابل، انجام همان کار دستکاری ویدئو با روشهای سنتی، مستلزم استفاده توسعهدهندگان از واسطههایی مانند عناصر <canvas> است. (برای جزئیات این نوع فرآیند، به عنوان مثال، video + canvas = magic را ببینید.)
پشتیبانی مرورگر
استریمهای قابل درج برای MediaStreamTrack از کروم ۹۴ پشتیبانی میشوند.
موارد استفاده
موارد استفاده برای جریانهای قابل درج برای 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را در معرض نمایش قرار میدهد. این میتواند برای هر sinkی فراهم شود، درست مانند یک track ازgetUserMedia(). این تابع فریمهای رسانهای را به عنوان ورودی دریافت میکند.
پردازنده MediaStreamTrackProcessor
یک شیء MediaStreamTrackProcessor یک ویژگی به readable را در معرض نمایش قرار میدهد. این ویژگی امکان خواندن فریمها از MediaStreamTrack را فراهم میکند. اگر آهنگ یک آهنگ ویدیویی باشد، تکههای خوانده شده از readable اشیاء VideoFrame خواهند بود. اگر آهنگ یک آهنگ صوتی باشد، تکههای خوانده شده از readable اشیاء AudioFrame خواهند بود.
مولد MediaStreamTrackGenerator
یک شیء MediaStreamTrackGenerator نیز یک ویژگی writable در معرض نمایش قرار میدهد که یک WritableStream است و امکان نوشتن فریمهای رسانهای را در MediaStreamTrackGenerator که خود یک MediaStreamTrack است، فراهم میکند. اگر ویژگی kind با "audio" باشد، استریم اشیاء AudioFrame را میپذیرد و با هر نوع دیگری شکست میخورد. اگر kind برابر با "video" باشد، استریم اشیاء VideoFrame را میپذیرد و با هر نوع دیگری شکست میخورد. هنگامی که یک فریم در writable نوشته میشود، متد close() فریم به طور خودکار فراخوانی میشود، به طوری که منابع رسانهای آن دیگر از طریق جاوا اسکریپت قابل دسترسی نیستند.
یک 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;
نسخه آزمایشی
میتوانید نسخه آزمایشی اسکنر کد QR را که در بخش بالا ارائه شد، در مرورگر دسکتاپ یا موبایل مشاهده کنید. یک کد QR را جلوی دوربین نگه دارید تا برنامه آن را تشخیص داده و هایلایت کند. میتوانید کد منبع برنامه را در GitHub مشاهده کنید.
ملاحظات امنیتی و حریم خصوصی
امنیت این API به سازوکارهای موجود در پلتفرم وب متکی است. از آنجایی که دادهها با استفاده از رابطهای VideoFrame و AudioFrame در معرض دید قرار میگیرند، قوانین آن رابطها برای مقابله با دادههای آلوده به مبدأ اعمال میشود. به عنوان مثال، به دلیل محدودیتهای موجود در دسترسی به چنین منابعی، نمیتوان به دادههای منابع مبدا دسترسی پیدا کرد (مثلاً دسترسی به پیکسلهای یک تصویر یا عنصر ویدیویی مبدا متقابل امکانپذیر نیست). علاوه بر این، دسترسی به دادههای رسانهای از دوربینها، میکروفونها یا صفحه نمایشها منوط به مجوز کاربر است. دادههای رسانهای که این API در معرض دید قرار میدهد، از طریق APIهای دیگر در دسترس است.
بازخورد
تیم کرومیوم میخواهد از تجربیات شما در مورد استریمهای قابل درج برای MediaStreamTrack مطلع شود.
در مورد طراحی API به ما بگویید
آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمیکند؟ یا متدها یا ویژگیهایی وجود ندارد که برای پیادهسازی ایده خود به آنها نیاز دارید؟ آیا در مورد مدل امنیتی سؤال یا نظری دارید؟ یک مشکل مشخصات را در مخزن مربوطه GitHub ثبت کنید، یا نظرات خود را به یک مشکل موجود اضافه کنید.
گزارش مشکل در پیادهسازی
آیا در پیادهسازی کرومیوم اشکالی پیدا کردید؟ یا پیادهسازی با مشخصات متفاوت است؟ یک اشکال را در new.crbug.com ثبت کنید. حتماً تا حد امکان جزئیات، دستورالعملهای بازتولید را ذکر کنید و در کادر Components Blink>MediaStream را وارد کنید.
پشتیبانی از API
آیا قصد دارید از استریمهای قابل درج برای MediaStreamTrack استفاده کنید؟ حمایت عمومی شما به تیم Chromium کمک میکند تا ویژگیها را اولویتبندی کند و به سایر فروشندگان مرورگر نشان میدهد که پشتیبانی از آنها چقدر حیاتی است.
با استفاده از هشتگ #InsertableStreams یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده میکنید.
لینکهای مفید
تقدیرنامهها
استریمهای قابل درج برای مشخصات MediaStreamTrack توسط هارالد آلوستراند و گویدو اوردانت نوشته شده است. این استریمها توسط هارالد آلوستراند، جو مدلی ، بن واگنر ، هویب کلاینهاوت و فرانسوا بوفورت بررسی شدهاند.