שידורים חיים שניתן להוסיף ל-MediaStreamTrack

התוכן של MediaStreamTrack מוצג כזרם שאפשר לבצע בו מניפולציה או להשתמש בו כדי ליצור תוכן חדש

Thomas Steiner

רקע

בהקשר של Media Capture and Streams API, הממשק MediaStreamTrack מייצג טראק מדיה יחיד בסטרימינג. בדרך כלל מדובר בטראקים של אודיו או וידאו, אבל יכולים להיות גם סוגי טראקים אחרים. אובייקטים מסוג MediaStream מורכבים מאובייקטים מסוג MediaStreamTrack, שמייצגים טראקים שונים של אודיו או וידאו. לכל MediaStreamTrack יכול להיות ערוץ אחד או יותר. הערוץ מייצג את היחידה הקטנה ביותר של שידור מדיה, כמו אות אודיו שמשויך לרמקול נתון, למשל רמקול שמאל או רמקול ימין בטראק אודיו סטריאופוני.

מהם שידורים שניתן להוסיף לMediaStreamTrack?

הרעיון המרכזי מאחורי הזרמים שניתן להוסיף ל-MediaStreamTrack הוא לחשוף את התוכן של MediaStreamTrack כקבוצה של זרמים (כפי שהוגדר על ידי Streams API של WHATWG). אפשר לשנות את הזרמים האלה כדי להוסיף רכיבים חדשים.

מתן גישה ישירה של המפתחים לסטרימינג של הסרטון (או האודיו) מאפשר להם לבצע שינויים ישירות בסטרימינג. לעומת זאת, כדי לבצע את אותה משימה של מניפולציה בסרטון בשיטות מסורתיות, המפתחים צריכים להשתמש ברכיבים מקשרים כמו רכיבי <canvas>. (פרטים על תהליך כזה מופיעים, למשל, במאמר סרטון + קנבס = קסם).

תמיכה בדפדפנים

תמיכה בשידורים שניתן להוסיף ל-MediaStreamTrack קיימת החל מגרסה 94 של Chrome.

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

תרחישים לדוגמה לשימוש בזרמים שניתן להוסיף ל-MediaStreamTrack כוללים, בין היתר:

  • גאדג'טים לשיחות ועידה בווידאו, כמו 'כובעים מצחיקים' או רקעים וירטואליים.
  • עיבוד קול, כמו vocoders בתוכנה.

איך משתמשים בסטרימינג שניתן להטמעה ב-MediaStreamTrack

זיהוי תכונות

כדי לזהות תכונות של שידורים שניתן להוסיף לתמיכה ב-MediaStreamTrack, אפשר לבצע את הפעולות הבאות.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

מושגי ליבה

שידורים שניתן להוסיף ל-MediaStreamTrack מבוססים על מושגים שהוצעו בעבר על ידי WebCodecs, ומבחינה מושגית מחלקים את ה-MediaStreamTrack לשני רכיבים:

  • MediaStreamTrackProcessor, שמשתמש במקור של אובייקט MediaStreamTrack ויוצר מקור של פריימים של מדיה, במיוחד אובייקטים מסוג VideoFrame או AudioFrame. אפשר לחשוב עליו כעל sink של טראק שיכול לחשוף את הפריימים הלא מקודדים מהטראק כ-ReadableStream.
  • ה-MediaStreamTrackGenerator, שמשתמש בזרם של פריימים של מדיה ומציג ממשק MediaStreamTrack. אפשר לספק אותו לכל sink, בדיוק כמו טראק מ-getUserMedia(). הוא מקבל מסגרות מדיה כקלט.

MediaStreamTrackProcessor

אובייקט MediaStreamTrackProcessor חושף מאפיין אחד, readable. הוא מאפשר לקרוא את המסגרות מ-MediaStreamTrack. אם הטראק הוא טראק וידאו, הקטעים שיקראו מ-readable יהיו אובייקטים מסוג VideoFrame. אם הטראק הוא טראק אודיו, קטעים שיקראו מ-readable יהיו אובייקטים מסוג AudioFrame.

MediaStreamTrackGenerator

באופן דומה, אובייקט MediaStreamTrackGenerator חושף מאפיין אחד, writable, שהוא WritableStream שמאפשר לכתוב מסגרות מדיה ל-MediaStreamTrackGenerator, שהוא עצמו MediaStreamTrack. אם הערך של המאפיין kind הוא "audio", הסטרימינג מקבל אובייקטים מסוג AudioFrame נכשל עם כל סוג אחר. אם הערך של kind הוא "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;

הדגמה (דמו)

אתם יכולים לראות את הדגמה של סורק קודי 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 לתת עדיפות לתכונות, ומראה לספקי דפדפנים אחרים כמה חשובה התמיכה בהן.

אתם יכולים לשלוח ציוץ אל @ChromiumDev באמצעות ההאשטאג #InsertableStreams ולספר לנו איפה ואיך אתם משתמשים בו.

תודות

Harald Alvestrand ו-Guido Urdaneta כתבו את הזרמים שניתן להוסיף למפרט MediaStreamTrack. הבדיקה של המאמר בוצעה על ידי Harald Alvestrand‏, Joe Medley‏, Ben Wagner‏, Huib Kleinhout ו-François Beaufort. התמונה הראשית (Hero) של Chris Montgomery ב-Unsplash.