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

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

Thomas Steiner

רקע

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

מהם שידורים שאפשר להוסיף ל-MediaStreamTrack?

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

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

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

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

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

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

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

איך משתמשים בסטרימינג שניתן להטמעה ב-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, ה-method 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 בעזרת ה-hashtag #InsertableStreams וספרו לנו איפה ואיך אתם משתמשים בו.

תודות

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