מידע בסיסי על סטרימינג של מדיה

Derek Herman

Jaroslav Polakovič

במאמר הזה נלמד על הקונספט המתקדם יותר של מדיה ובסופו של דבר צריך להבין היטב את תרחישים לדוגמה, פרוטוקולים ותוספים. נתחיל עם הסבר על מהו סטרימינג בפועל.

סטרימינג של מדיה הוא דרך להעביר ולהשמיע תוכן מדיה באופן חלק חלק מסוים. במקום לטעון קובץ יחיד, שעלול להיות איטי אם לא מותאם ברשת, הנגן קורא קובץ מניפסט שמתאר איך מחולקים למקטעי נתונים נפרדים. בהמשך, מקטעי מדיה נוצרים באופן דינמי. יחד בזמן ריצה – כנראה בקצבי העברת נתונים שונים, שנלמד מאוחר יותר.

חשוב לזכור שכדי לספק סטרימינג באתר, השרת חייבת לתמוך בכותרת בקשת ה-HTTP Range. מידע נוסף על Accept-Ranges בכותרת <video> ו-<source> תגים.

תרחישים לדוגמה של סטרימינג

אין ליצור מקטעי מדיה ואת המניפסטים הנחוצים שמתארים את השידור פשוט מאוד, אבל סטרימינג מאפשר גישה לכמה תרחישים מעניינים. לא ניתן להשיג רק על ידי הצבעה של רכיב <video> לקבוצה של קובצי מקור סטטיים. כאן ניתן לקבל מידע נוסף להוסיף מדיה לדף אינטרנט בקטע מאוחר יותר. קודם כל, צריך לדעת מעט תרחישים לדוגמה עבור סטרימינג של מולטימדיה, אם רוצים להשקיע יותר מאשר טעינת מספר קבצים ברכיב <video>.

• סטרימינג דינמי הוא המקום שבו מקטעי מדיה מקודדים במספר ומקטע המדיה באיכות הגבוהה ביותר המתאים רוחב הפס שזמין כרגע מוחזר לנגן המדיה.
• שידור חי הוא המקום שבו מקטעי מדיה מקודדים וזמינים בזמן אמת.
• החדרת מדיה היא המקום שאליו מוחדרים מדיה אחרת, כמו מודעות. סטרימינג בלי שהנגן יצטרך לשנות את מקור המדיה.

פרוטוקולים של סטרימינג

שני הפרוטוקולים הנפוצים ביותר לסטרימינג באינטרנט הם דינמית סטרימינג דינמי ב-HTTP (DASH) ו-HTTP Live Streaming (HLS). נגנים שתומכים בפרוטוקולים האלה יאחזרו את קובץ המניפסט שנוצר, להבין אילו מקטעי מדיה לבקש, ולאחר מכן לשלב אותם במדיה החברתית.

שימוש ב-<video> כדי להפעיל שידור

בדפדפנים רבים אין אפשרות להפעיל את הסטרימינג באופן מקורי. אומנם יש גם תמיכה אוטומטית ב-HLS, דפדפנים לא תומכים בדרך כלל ב-DASH מקורי. להפעיל סטרימינג בשידור חי. המשמעות היא שבמקרים רבים לא מספיק פשוט להצביע על <source> ברכיב <video> לקובץ מניפסט.

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

מה שנראה כחסרון הוא למעשה עוצמה במסווה. הצ'אטים הם ולאפליקציות שצורכות סטרימינג יש צרכים שונים.

קובצי מניפסט מתארים בדרך כלל וריאציות רבות של מדיה יחידה. אני רוצה לחשוב אחרת קצב העברת נתונים, מספר טראקים של אודיו ואפילו אותה מדיה המקודדת פורמטים.

יכול להיות שאפליקציות מסוימות ירצו לשמור כמות גדולה יותר של וידאו במאגר הנתונים הזמני אחרים אולי ירצו לאחזר מראש את השניות הראשונות של הסרטון פרק מסוים, וחלק רוצים להטמיע לוגיקה משלהם לסטרימינג דינמי. כאן היית רוצה להשתמש בתכונה כלשהי של הדפדפן כדי ליצור שידורי מדיה להפעלה, ובמקרה כזה יש אחד מהם.

תוספי מקור מדיה

למרבה המזל, ה-W3C הגדיר משהו בשם תוספים של מקור מדיה (MSE) שיאפשר ל-JavaScript ליצור את זרמי המדיה שלנו. בקיצור, 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, בין היתר.

עם זאת, יצרנו PWA של מדיה להדגמה בשם Kino שמדגימה איך עוסק בפיתוח אתר בסיסי משלכם למדיה סטרימינג, הפעלת מדיה במצב אופליין באמצעות אלמנט <video> בלבד. יש תוכניות במפת הדרכים שלנו לתמיכה במסגרות ובניהול זכויות דיגיטליות, בין היתר לבינה מלאכותית גנרטיבית. לכן כדאי לבדוק אם יש עדכונים מדי פעם, או לבקש תכונה. מידע נוסף בנושא זמין במאמר PWA עם סטרימינג אופליין.

פורמט של מקטעי מדיה

במשך זמן רב, נדרשו קידוד של מקטעי מדיה בקידוד DASH וב-HLS פורמטים. עם זאת, בשנת 2016, תמיכה בקובצי MP4 רגילים (fMP4) נוסף ל-HLS, פורמט שנתמך גם ב-DASH.

יש תמיכה במקטעי וידאו באמצעות הקונטיינר fMP4 והקודק H.264 באמצעות פרוטוקולים ורוב השחקנים יכולים לשחק בהם. כך אפשר מפיקי תוכן לקודד את הסרטונים שלהם פעם אחת בלבד, וכתוצאה מכך לחסוך זמן ושטח הדיסק.

כדי להשיג איכות טובה יותר וגודל נמוך יותר של קבצים, כדאי לבחור לקודד כמה קבוצות של מקטעי מדיה באמצעות פורמטים יעילים יותר כמו VP9, אבל לפני שנמשיך, קודם צריך ללמוד מכינים קובצי מדיה לאינטרנט – השלב הבא.