WebCodecs VideoFrame Plane: צלילה עמוקה לגישה לנתוני פריים וידאו

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

הבנת אובייקט ה-VideoFrame

לפני שנצלול ל-planes, נסכם את אובייקט ה-VideoFrame עצמו. VideoFrame מייצג פריים בודד של וידאו. הוא מכיל את נתוני הווידאו המפוענחים (או המקודדים), יחד עם מטא-דאטה נלווה כמו חותמת זמן, משך ומידע על פורמט. ה-API של VideoFrame מציע מתודות עבור:

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

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

מהם VideoFrame Planes?

נתוני הפיקסלים של VideoFrame מאורגנים לעתים קרובות במספר planes, במיוחד בפורמטים כמו YUV. כל plane מייצג רכיב שונה של התמונה. לדוגמה, בפורמט YUV420, ישנם שלושה planes:

• Y (Luma): מייצג את הבהירות (luminance) של התמונה. plane זה מכיל את מידע גווני האפור.
• U (Cb): מייצג את רכיב הכרומה של הפרש-כחול.
• V (Cr): מייצג את רכיב הכרומה של הפרש-אדום.

פורמטי RGB, על אף שנראים פשוטים יותר, עשויים גם להשתמש במספר planes במקרים מסוימים. מספר ה-planes ומשמעותם תלויים לחלוטין ב-VideoPixelFormat של ה-VideoFrame.

היתרון בשימוש ב-planes הוא שהוא מאפשר גישה ומניפולציה יעילה של רכיבי צבע ספציפיים. לדוגמה, ייתכן שתרצו להתאים רק את הבהירות (plane Y) מבלי להשפיע על הצבע (planes U ו-V).

גישה ל-VideoFrame Planes: ה-API

ה-API של VideoFrame מספק את המתודות הבאות לגישה לנתוני ה-plane:

• copyTo(destination, options): מעתיקה את התוכן של ה-VideoFrame ליעד, שיכול להיות VideoFrame אחר, CanvasImageBitmap, או ArrayBufferView. אובייקט ה-options שולט אילו planes יועתקו וכיצד. זהו המנגנון העיקרי לגישה ל-plane.

אובייקט ה-options במתודה copyTo מאפשר לכם לציין את הפריסה והיעד עבור נתוני פריים הווידאו. מאפיינים מרכזיים כוללים:

• format: פורמט הפיקסלים הרצוי של הנתונים המועתקים. זה יכול להיות זהה ל-VideoFrame המקורי או פורמט שונה (לדוגמה, המרה מ-YUV ל-RGB).
• codedWidth ו-codedHeight: הרוחב והגובה של פריים הווידאו בפיקסלים.
• layout: מערך של אובייקטים המתארים את הפריסה של כל plane בזיכרון. כל אובייקט במערך מציין:
• offset: ההיסט (offset), בבתים, מתחילת מאגר הנתונים לתחילת הנתונים של ה-plane.
• stride: מספר הבתים בין תחילת כל שורה ב-plane. זה חיוני לטיפול בריפוד (padding).

בואו נסתכל על דוגמה להעתקת VideoFrame בפורמט YUV420 למאגר נתונים גולמי:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 has 3 planes: Y, U, and V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Important to release resources
}

הסבר:

• אנו מחשבים את הגודל של כל plane בהתבסס על ה-width וה-height. Y הוא ברזולוציה מלאה, בעוד U ו-V עוברים דגימת-משנה (subsampled) (4:2:0).
• מערך ה-layout מגדיר את פריסת הזיכרון. ה-offset מציין היכן כל plane מתחיל במאגר, וה-stride מציין את מספר הבתים שיש לדלג כדי להגיע לשורה הבאה באותו plane.
• אפשרות ה-format מוגדרת ל-'I420', שהוא פורמט YUV420 נפוץ.
• באופן קריטי, לאחר ההעתקה, מתבצעת קריאה ל-videoFrame.close() כדי לשחרר משאבים.

פורמטי פיקסלים: עולם שלם של אפשרויות

הבנת פורמטי פיקסלים חיונית לעבודה עם VideoFrame planes. ה-VideoPixelFormat מגדיר כיצד מידע הצבע מקודד בתוך פריים הווידאו. הנה כמה פורמטי פיקסלים נפוצים שאתם עשויים להיתקל בהם:

• I420 (YUV420p): פורמט YUV פלנארי (planar) שבו רכיבי Y, U ו-V מאוחסנים ב-planes נפרדים. U ו-V עוברים דגימת-משנה בפקטור של 2 הן בממד האופקי והן בממד האנכי. זהו פורמט נפוץ ויעיל מאוד.
• NV12 (YUV420sp): פורמט YUV חצי-פלנארי (semi-planar) שבו Y מאוחסן ב-plane אחד, ורכיבי U ו-V משולבים (interleaved) ב-plane שני.
• RGBA: רכיבי אדום, ירוק, כחול ואלפא מאוחסנים ב-plane יחיד, בדרך כלל עם 8 סיביות לרכיב (32 סיביות לפיקסל). סדר הרכיבים יכול להשתנות (למשל, BGRA).
• RGB565: רכיבי אדום, ירוק וכחול מאוחסנים ב-plane יחיד עם 5 סיביות לאדום, 6 סיביות לירוק ו-5 סיביות לכחול (16 סיביות לפיקסל).
• GRAYSCALE: מייצג תמונות בגווני אפור עם ערך luma (בהירות) יחיד לכל פיקסל.

המאפיין VideoFrame.format יגיד לכם מהו פורמט הפיקסלים של פריים נתון. הקפידו לבדוק מאפיין זה לפני ניסיון לגשת ל-planes. ניתן לעיין במפרט של WebCodecs לרשימה מלאה של פורמטים נתמכים.

מקרי שימוש מעשיים

גישה ל-VideoFrame planes פותחת מגוון רחב של אפשרויות לעיבוד וידאו מתקדם בדפדפן. הנה כמה דוגמאות:

1. אפקטים של וידאו בזמן אמת

ניתן להחיל אפקטים של וידאו בזמן אמת על ידי מניפולציה של נתוני הפיקסלים ב-VideoFrame. לדוגמה, תוכלו ליישם פילטר גווני אפור על ידי מיצוע רכיבי ה-R, G ו-B של כל פיקסל בפריים RGBA ולאחר מכן הגדרת כל שלושת הרכיבים לאותו ערך ממוצע. תוכלו גם ליצור אפקט גוון ספיה או להתאים בהירות וניגודיות.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. יישומי ראייה ממוחשבת

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

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

3. עריכת וידאו וקומפוזיציה

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

לדוגמה, תוכלו לחתוך VideoFrame על ידי העתקת חלק בלבד מנתוני הפיקסלים ל-VideoFrame חדש. יהיה עליכם להתאים את ה-offsets וה-strides של ה-layout בהתאם.

4. קודקים מותאמים אישית וטרנסקודינג

בעוד ש-WebCodecs מספק תמיכה מובנית בקודקים נפוצים כמו AV1, VP9 ו-H.264, ניתן גם להשתמש בו כדי ליישם קודקים מותאמים אישית או צינורות טרנסקודינג. תצטרכו לטפל בתהליך הקידוד והפענוח בעצמכם, אך VideoFrame planes מאפשרים לכם לגשת ולבצע מניפולציות על נתוני הפיקסלים הגולמיים. זה יכול להיות שימושי עבור פורמטי וידאו נישתיים או דרישות קידוד מיוחדות.

5. אנליטיקה מתקדמת

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

עבודה עם Canvas ו-WebGL

אף על פי שניתן לבצע מניפולציה ישירה על נתוני הפיקסלים ב-VideoFrame planes, לעתים קרובות יש צורך לרנדר את התוצאה למסך. הממשק CanvasImageBitmap מספק גשר בין VideoFrame לאלמנט <canvas>. ניתן ליצור CanvasImageBitmap מ-VideoFrame ולאחר מכן לצייר אותו על הקנבס באמצעות המתודה drawImage().

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

לרינדור מתקדם יותר, ניתן להשתמש ב-WebGL. ניתן להעלות את נתוני הפיקסלים מ-VideoFrame planes לטקסטורות WebGL ולאחר מכן להשתמש ב-shaders כדי להחיל אפקטים וטרנספורמציות. זה מאפשר לכם למנף את ה-GPU לעיבוד וידאו בביצועים גבוהים.

שיקולי ביצועים

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

• מזעור העתקות: הימנעו מהעתקה מיותרת של נתוני פיקסלים. נסו לבצע פעולות במקום (in-place) ככל האפשר.
• שימוש ב-WebAssembly: עבור קטעי קוד קריטיים לביצועים, שקלו להשתמש ב-WebAssembly. WebAssembly יכול לספק ביצועים קרובים ל-native עבור משימות אינטנסיביות מבחינה חישובית.
• אופטימיזציה של פריסת זיכרון: בחרו את פורמט הפיקסלים ופריסת הזיכרון הנכונים ליישום שלכם. שקלו להשתמש בפורמטים ארוזים (למשל, RGBA) אם אינכם צריכים לגשת לרכיבי צבע בודדים בתדירות גבוהה.
• שימוש ב-OffscreenCanvas: לעיבוד ברקע, השתמשו ב-OffscreenCanvas כדי להימנע מחסימת התהליכון הראשי.
• פרופיל של הקוד: השתמשו בכלי המפתחים של הדפדפן כדי לבצע פרופיילינג לקוד שלכם ולזהות צווארי בקבוק בביצועים.

תאימות דפדפנים

WebCodecs וה-API של VideoFrame נתמכים ברוב הדפדפנים המודרניים, כולל כרום, פיירפוקס וספארי. עם זאת, רמת התמיכה עשויה להשתנות בהתאם לגרסת הדפדפן ומערכת ההפעלה. בדקו את טבלאות תאימות הדפדפנים העדכניות באתרים כמו MDN Web Docs כדי להבטיח שהתכונות שבהן אתם משתמשים נתמכות בדפדפני היעד שלכם. לתאימות בין דפדפנים, מומלץ להשתמש בזיהוי תכונות (feature detection).

מכשולים נפוצים ופתרון בעיות

הנה כמה מכשולים נפוצים שכדאי להימנע מהם בעבודה עם VideoFrame planes:

• פריסה שגויה: ודאו שמערך ה-layout מתאר במדויק את פריסת הזיכרון של נתוני הפיקסלים. offsets או strides שגויים יכולים להוביל לתמונות פגומות.
• פורמטי פיקסלים לא תואמים: ודאו שפורמט הפיקסלים שאתם מציינים במתודה copyTo תואם לפורמט האמיתי של ה-VideoFrame.
• דליפות זיכרון: תמיד סגרו אובייקטי VideoFrame ו-CanvasImageBitmap לאחר שסיימתם להשתמש בהם כדי לשחרר את המשאבים הבסיסיים. אי ביצוע פעולה זו עלול להוביל לדליפות זיכרון.
• פעולות אסינכרוניות: זכרו ש-copyTo היא פעולה אסינכרונית. השתמשו ב-await כדי להבטיח שפעולת ההעתקה תושלם לפני שאתם ניגשים לנתוני הפיקסלים.
• הגבלות אבטחה: היו מודעים להגבלות אבטחה שעשויות לחול בעת גישה לנתוני פיקסלים מסרטונים ממקור צולב (cross-origin).

דוגמה: המרת YUV ל-RGB

בואו נשקול דוגמה מורכבת יותר: המרת VideoFrame בפורמט YUV420 ל-VideoFrame בפורמט RGB. זה כרוך בקריאת ה-planes של Y, U ו-V, המרתם לערכי RGB, ולאחר מכן יצירת VideoFrame חדש בפורמט RGB.

ניתן ליישם המרה זו באמצעות הנוסחה הבאה:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

הנה הקוד:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

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

סיכום

ה-API של VideoFrame plane ב-WebCodecs פותח רמה חדשה של שליטה על עיבוד וידאו בדפדפן. על ידי הבנה כיצד לגשת ולבצע מניפולציות ישירות על נתוני פיקסלים, ניתן ליצור יישומים מתקדמים לאפקטים של וידאו בזמן אמת, ראייה ממוחשבת, עריכת וידאו ועוד. בעוד שעבודה עם VideoFrame planes יכולה להיות מאתגרת, התגמול הפוטנציאלי הוא משמעותי. ככל ש-WebCodecs ימשיך להתפתח, הוא ללא ספק יהפוך לכלי חיוני עבור מפתחי אינטרנט העובדים עם מדיה.

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

למידה נוספת

• MDN Web Docs on WebCodecs
• WebCodecs Specification
• מאגרי קוד דוגמה של WebCodecs ב-GitHub.