جریان های قابل درج برای MediaStreamTrack

محتوای یک MediaStreamTrack به عنوان یک جریان نمایش داده می شود که می تواند دستکاری شود یا برای تولید محتوای جدید استفاده شود.

توماس اشتاینر

زمینه

در زمینه Media Capture and Streams API، رابط MediaStreamTrack یک آهنگ رسانه واحد را در یک جریان نشان می دهد. به طور معمول، این آهنگ‌های صوتی یا تصویری هستند، اما انواع دیگری از آهنگ‌ها ممکن است وجود داشته باشند. اشیاء MediaStream از صفر یا چند شی MediaStreamTrack تشکیل شده است که نشان دهنده آهنگ های صوتی یا تصویری مختلف است. هر MediaStreamTrack ممکن است یک یا چند کانال داشته باشد. این کانال کوچکترین واحد جریان رسانه را نشان می دهد، مانند سیگنال صوتی مرتبط با یک بلندگوی معین، مانند چپ یا راست در یک آهنگ صوتی استریو.

جریان های قابل درج برای MediaStreamTrack چیست؟

ایده اصلی پشت جریان های قابل درج برای MediaStreamTrack این است که محتوای MediaStreamTrack را به عنوان مجموعه ای از جریان ها (همانطور که توسط WHATWG Streams API تعریف شده است) در معرض دید قرار دهیم. این جریان ها را می توان برای معرفی اجزای جدید دستکاری کرد.

اعطای دسترسی مستقیم به برنامه‌نویسان به جریان ویدیویی (یا صوتی) به آنها اجازه می‌دهد تا تغییرات را مستقیماً در جریان اعمال کنند. در مقابل، تحقق همان کار دستکاری ویدیو با روش‌های سنتی مستلزم آن است که توسعه‌دهندگان از واسطه‌هایی مانند عناصر <canvas> استفاده کنند. (برای جزئیات این نوع فرآیند، به عنوان مثال، ویدئو + بوم = جادو را ببینید.)

پشتیبانی از مرورگر

جریان‌های قابل درج برای MediaStreamTrack از Chrome 94 پشتیبانی می‌شود.

موارد استفاده کنید

موارد استفاده برای جریان های قابل درج برای 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() فریم به طور خودکار فراخوانی می شود، به طوری که منابع رسانه ای آن دیگر از طریق جاوا اسکریپت قابل دسترسی نیستند.

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 را جلوی دوربین نگه دارید تا برنامه آن را شناسایی و برجسته کند. می‌توانید کد منبع برنامه را در Glitch ببینید.

اسکنر کد QR که در تب مرورگر دسکتاپ اجرا می شود و یک کد QR شناسایی شده و برجسته شده را در تلفنی که کاربر در مقابل دوربین لپ تاپ نگه می دارد نشان می دهد.

ملاحظات امنیتی و حریم خصوصی

امنیت این API بر مکانیزم های موجود در بستر وب متکی است. از آنجایی که داده ها با استفاده از رابط های VideoFrame و AudioFrame در معرض دید قرار می گیرند، قوانین این رابط ها برای مقابله با داده های آلوده به مبدا اعمال می شود. به عنوان مثال، به دلیل محدودیت‌های موجود در دسترسی به چنین منابعی، نمی‌توان به داده‌های منابع متقاطع دسترسی داشت (مثلاً دسترسی به پیکسل‌های یک تصویر یا عنصر ویدیویی با منبع متقاطع امکان‌پذیر نیست). علاوه بر این، دسترسی به داده های رسانه از دوربین، میکروفون یا صفحه نمایش منوط به مجوز کاربر است. داده‌های رسانه‌ای که این API نشان می‌دهد از قبل از طریق سایر APIها در دسترس است.

بازخورد

تیم Chromium می‌خواهد درباره تجربیات شما در مورد جریان‌های قابل درج برای MediaStreamTrack بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ آیا در مورد مدل امنیتی سوال یا نظری دارید؟ یک مشکل مشخصات را در مخزن GitHub مربوطه ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.

گزارش مشکل در اجرا

آیا با اجرای Chromium اشکالی پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟ یک اشکال را در new.crbug.com ثبت کنید. اطمینان حاصل کنید که تا آنجا که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کنید و Blink>MediaStream در کادر Components وارد کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از جریان های قابل درج برای MediaStreamTrack استفاده کنید؟ پشتیبانی عمومی شما به تیم Chromium کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #InsertableStreams یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می کنید.

سپاسگزاریها

جریان های قابل درج برای مشخصات MediaStreamTrack توسط هارالد آلوستراند و گیدو اوردانتا نوشته شده است. این مقاله توسط هارالد آلوستراند، جو مدلی ، بن واگنر ، هویب کلاینهوت و فرانسوا بوفورت بررسی شده است. تصویر قهرمان توسط کریس مونتگومری در Unsplash .