اصول جریان رسانه

Derek Herman

Jaroslav Polakovič

در این مقاله، شما قصد دارید با مفهوم پیشرفته تر جریان رسانه آشنا شوید و در پایان باید درک خوبی از موارد مختلف استفاده از جریان، پروتکل ها و برنامه های افزودنی داشته باشید. بیایید با توضیحی در مورد اینکه استریمینگ واقعا چیست شروع کنیم.

پخش جریانی رسانه راهی برای ارائه و پخش تکه تکه محتوای رسانه ای است. پخش‌کننده به جای بارگیری یک فایل، که اگر برای شبکه بهینه‌سازی نشود، کند می‌شود، یک فایل مانیفست را می‌خواند که توضیح می‌دهد چگونه رسانه هدف به تکه‌هایی از داده‌ها تقسیم می‌شود. تکه‌های رسانه بعداً در زمان اجرا به صورت پویا به هم متصل می‌شوند—احتمالاً با نرخ‌های بیت متفاوت که بعداً در مورد آن‌ها خواهید آموخت.

به خاطر داشته باشید که برای ارائه جریان در وب سایت شما، سرور باید از هدر درخواست Range HTTP پشتیبانی کند. در مقاله برچسب‌های <video> و <source> درباره سرصفحه Accept-Ranges بیشتر بیاموزید.

موارد استفاده از جریان

تولید تکه‌های رسانه و مانیفست‌های لازم برای توصیف جریان دقیقاً ساده نیست، اما استریم موارد استفاده جالبی را باز می‌کند که تنها با اشاره یک عنصر <video> به مجموعه‌ای از فایل‌های منبع استاتیک امکان‌پذیر نیست. در بخش بعدی درباره نحوه افزودن رسانه به یک صفحه وب بیشتر خواهید آموخت. اگر می‌خواهید از بارگذاری چند فایل در عنصر <video> فراتر بروید، ابتدا باید در مورد چند مورد استفاده برای پخش چندرسانه‌ای بدانید.

• جریان تطبیقی ​​جایی است که تکه‌های رسانه در چند نرخ بیت کدگذاری می‌شوند و قطعه رسانه با بالاترین کیفیت متناسب با پهنای باند موجود در حال حاضر مشتری به پخش کننده رسانه بازگردانده می‌شود.
• پخش زنده جایی است که تکه های رسانه کدگذاری می شوند و در زمان واقعی در دسترس قرار می گیرند.
• رسانه تزریقی جایی است که رسانه های دیگر مانند تبلیغات بدون نیاز به تغییر منبع رسانه به یک جریان تزریق می شوند.

پروتکل های جریان

دو پروتکل رایج استریم مورد استفاده در وب عبارتند از: جریان تطبیقی ​​پویا از طریق HTTP ( DASH ) و HTTP Live Streaming ( HLS ). پخش‌کننده‌هایی که از این پروتکل‌ها پشتیبانی می‌کنند، فایل مانیفست تولید شده را واکشی می‌کنند، متوجه می‌شوند کدام تکه‌های رسانه را باید درخواست کنند و سپس آنها را در تجربه رسانه نهایی ترکیب می‌کنند.

استفاده از <video> برای پخش جریانی

بسیاری از مرورگرها قرار نیست جریان شما را به صورت بومی پخش کنند. در حالی که برخی از پشتیبانی های بومی برای پخش HLS وجود دارد، مرورگرها معمولاً از پخش جریانی بومی DASH پشتیبانی نمی کنند . این بدان معناست که اغلب کافی نیست که <source> در عنصر <video> را به یک فایل مانیفست هدایت کنید.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

احتیاط: این HTML معتبر است، اما در واقع کار نمی کند. مرورگرها به طور بومی از پخش مانیفست DASH اضافه شده به ویژگی src پشتیبانی نمی کنند.

آنچه ممکن است به عنوان یک کسری به نظر برسد در واقع یک قدرت پنهان است. استریم ها قدرتمند هستند و برنامه هایی که جریان ها را مصرف می کنند نیازهای متفاوتی دارند.

فایل های مانیفست معمولاً انواع مختلفی از رسانه های واحد را توصیف می کنند. به نرخ بیت های مختلف، چندین تراک صوتی و حتی رسانه های مشابه که در فرمت های مختلف کدگذاری شده اند فکر کنید.

برخی از برنامه‌ها ممکن است بخواهند مقدار بیشتری از ویدیو را در بافر نگه دارند، برخی دیگر ممکن است بخواهند چند ثانیه اول ویدیو را از قسمت آینده واکشی کنند، و برخی می‌خواهند منطق خود را برای پخش جریانی تطبیقی ​​پیاده‌سازی کنند. اینجاست که می‌خواهید نوعی ویژگی داخلی مرورگر برای تولید جریان‌های رسانه برای پخش داشته باشید، و اتفاقاً یکی وجود دارد.

پسوندهای منبع رسانه

خوشبختانه W3C چیزی به نام Media Source Extensions (MSE) تعریف کرد که به جاوا اسکریپت اجازه می‌دهد جریان‌های رسانه‌ای ما را تولید کند. به طور خلاصه، MSE به توسعه دهندگان این امکان را می دهد که یک شی MediaSource را به یک عنصر <video> متصل کنند و از آن بخواهند هر داده رسانه ای را که به بافرهای متصل به نمونه MediaSource پمپ می شود، پخش کند.

مثال اساسی

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

مثال ساده بالا چند چیز را نشان می دهد:

• تا جایی که <video> مربوط می شود، داده های رسانه را از یک URL دریافت می کند.
• URL تولید شده فقط یک اشاره گر به یک نمونه MediaSource است.
• نمونه MediaSource یک یا چند نمونه SourceBuffer ایجاد می کند.
• سپس فقط داده های رسانه باینری را به بافر اضافه می کنیم، به عنوان مثال با استفاده از fetch .

در حالی که این مفاهیم اولیه ساده هستند و مطمئناً می توان از ابتدا یک پخش کننده ویدیویی سازگار با DASH و HLS نوشت، اکثر مردم معمولاً یکی از راه حل های منبع باز بالغی را انتخاب می کنند که از قبل وجود دارد، مانند Shaka Player ، JW Player ، یا Video. js به نام چند.

با این حال، ما یک Media PWA نمایشی به نام Kino ایجاد کرده‌ایم که نشان می‌دهد چگونه می‌توانید وب‌سایت رسانه استریم اولیه خود را توسعه دهید که پخش رسانه آفلاین را تنها با استفاده از عنصر <video> ساده ارائه می‌دهد. در نقشه راه ما برنامه‌هایی برای پشتیبانی از چارچوب‌ها و مدیریت حقوق دیجیتال، از جمله ویژگی‌های دیگر وجود دارد. بنابراین هر از چند گاهی برای به‌روزرسانی‌ها بررسی کنید یا یک ویژگی را درخواست کنید. بیشتر در مورد آن در مقاله PWA با جریان آفلاین بخوانید.

قالب تکه های رسانه

برای مدت طولانی، DASH و HLS نیاز داشتند که تکه‌های رسانه در قالب‌های مختلف کدگذاری شوند. با این حال، در سال 2016، پشتیبانی از فایل‌های استاندارد تکه تکه شده MP4 (fMP4) به HLS اضافه شد، فرمتی که DASH نیز از آن پشتیبانی می‌کند.

تکه های ویدیویی با استفاده از ظرف fMP4 و کدک H.264 توسط هر دو پروتکل پشتیبانی می شوند و توسط اکثریت قریب به اتفاق بازیکنان قابل پخش هستند. این به تولیدکنندگان محتوا اجازه می‌دهد تا ویدیوهای خود را فقط یک بار رمزگذاری کنند، که به نوبه خود باعث صرفه‌جویی در زمان و فضای دیسک می‌شود .

برای دستیابی به کیفیت بهتر و اندازه فایل‌های پایین‌تر، ممکن است بخواهید چندین مجموعه از تکه‌های رسانه را با استفاده از فرمت‌های کارآمدتر مانند VP9 رمزگذاری کنید، اگرچه قبل از اینکه به جلو برویم، ابتدا باید نحوه آماده‌سازی فایل‌های رسانه برای وب را بیاموزید. و این مورد بعدی است.