עדכוני מדיה ב-Chrome בגרסה 63/64

François Beaufort
François Beaufort
GitHub

Media Capabilities - Decoding Info API

כיום, מפתחי אתרים מסתמכים על isTypeSupported() או על canPlayType() כדי לדעת באופן כללי אם אפשר לפענח אמצעי מדיה מסוימים. השאלה האמיתית שצריך לשאול היא: 'מה רמת הביצועים של המכשיר הזה?'

זה בדיוק אחד הדברים שרוצים לפתור באמצעות Media Capabilities המוצע: API לשליחת שאילתה לדפדפן לגבי יכולות הפענוח של המכשיר על סמך מידע כמו קודקים, פרופיל, רזולוציה, קצבי העברת נתונים וכו'. הוא יחשוף מידע כמו האם ההפעלה צריכה להיות חלקה וחסכונית בצריכת החשמל על סמך נתונים סטטיסטיים קודמים של הפעלה שנרשמו על ידי הדפדפן.

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

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

אפשר לנסות הגדרות שונות של מדיה עד שמוצאים את ההגדרה הכי טובה (smooth ו-powerEfficient) ולהשתמש בה כדי להפעיל את סטרימינג המדיה המתאים. אגב, ההטמעה הנוכחית של Chrome מבוססת על מידע השמעה שנרשם בעבר. היא מגדירה את smooth כ-true אם אחוז הפריימים שהושמטו נמוך מ-10%, ואת powerEfficient כ-true אם יותר מ-50% מהפריימים מפוענחים על ידי החומרה. מסגרות קטנות נחשבות תמיד ליעילות בצריכת החשמל.

מומלץ להשתמש בקטע קוד שדומה לזה שבהמשך כדי לזהות את הזמינות ולחזור להטמעה הנוכחית בדפדפנים שלא תומכים ב-API הזה.

‫
function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}
‫

זמין לגרסאות מקור לניסיון

כדי לקבל כמה שיותר משוב ממפתחים שמשתמשים ב-Decoding Info API (חלק מ-Media Capabilities) בשטח, הוספנו בעבר את התכונה הזו ב-Chrome 64 כגרסת מקור לניסיון.

תקופת הניסיון הסתיימה בהצלחה באפריל 2018.

Intent to Experiment | Intent to Ship | Chromestatus Tracker | Chromium Bug

הפעלה של סרטוני HDR ב-Windows 10

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

השוואה בין SDR מדומה ל-HDR (כדי לראות HDR אמיתי צריך מסך HDR)
השוואה בין SDR מדומה לבין HDR (כדי לראות HDR אמיתי צריך מסך HDR)

החל מגרסת Windows 10 Fall Creator Update, יש תמיכה בהפעלה של VP9 Profile 2 10-bit ב-Chrome ל-Windows. בנוסף, Chrome תומך בהפעלה של סרטוני HDR כש-Windows 10 במצב HDR. הערה טכנית: Chrome 64 תומך עכשיו בפרופיל הצבעים scRGB, שמאפשר הפעלה של מדיה ב-HDR.

כדי לנסות, אפשר לצפות בסרטון The World in HDR in 4K (ULTRA HD) ב-YouTube ולבדוק אם הוא מוצג ב-HDR בהגדרת האיכות בנגן YouTube.

הגדרת האיכות בנגן YouTube עם HDR
הגדרת האיכות בנגן YouTube עם HDR

כל מה שצריך בשלב הזה הוא Windows 10 Fall Creator Update, כרטיס מסך ומסך שתואמים ל-HDR (למשל כרטיס מסדרה NVIDIA 10, טלוויזיה או מסך LG HDR), ולהפעיל את מצב ה-HDR בהגדרות התצוגה של Windows.

מפתחי אתרים יכולים לזהות את טווח הצבעים המשוער שנתמך על ידי מכשיר הפלט באמצעות שאילתת המדיה color-gamut העדכנית, ואת מספר הביטים שמשמשים להצגת צבע במסך באמצעות screen.colorDepth. לדוגמה, כך אפשר להשתמש בהם כדי לזהות אם יש תמיכה ב-VP9 HDR:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

צריך לעדכן את מחרוזת ה-Codec של VP9 עם Profile 2 שמועברת אל isTypeSupported() בדוגמה שלמעלה, בהתאם למאפייני קידוד הווידאו.

שימו לב שעדיין אי אפשר להגדיר צבעים ב-HDR ב-CSS, ב-canvas, בתמונות ובתוכן מוגן. צוות Chrome עובד על זה. עדכונים נוספים בקרוב!

רישיונות קבועים ל-Windows ול-Mac

רישיון קבוע ב-Encrypted Media Extensions (EME) (תוספים להצפנת מדיה) אומר שאפשר לשמור את הרישיון במכשיר כדי שאפליקציות יוכלו לטעון את הרישיון לזיכרון בלי לשלוח בקשת רישיון נוספת לשרת. כך נתמכת הפעלה אופליין ב-EME.

עד עכשיו, ChromeOS ו-Android היו הפלטפורמות היחידות שתמכו ברישיונות קבועים. זה כבר לא נכון. אפשר עכשיו להפעיל תוכן מוגן דרך EME גם ב-Chrome 64 ב-Windows וב-Mac, כשהמכשיר במצב אופליין.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

אתם יכולים לנסות בעצמכם רישיונות קבועים. לשם כך, אתם יכולים לעיין בדוגמה של PWA למדיה ולבצע את השלבים הבאים:

  1. עוברים לכתובת https://biograf-155113.appspot.com/ttt/episode-2/
  2. לוחצים על 'התאמה לעבודה במצב אופליין' וממתינים להורדת הסרטון.
  3. מנתקים את החיבור לאינטרנט.
  4. לוחצים על לחצן ההפעלה ונהנים מהסרטון.

ברירת המחדל לטעינה מראש של מדיה היא 'מטא-נתונים'

בהתאם להטמעות בדפדפנים אחרים, Chrome למחשב מגדיר עכשיו את ערך הטעינה מראש שמוגדר כברירת מחדל לרכיבי <video> ו-<audio> ל-"metadata" כדי לצמצם את רוחב הפס ואת השימוש במשאבים. החל מגרסה 64 של Chrome, ההתנהגות החדשה הזו חלה רק על מקרים שבהם לא מוגדר ערך לטעינה מראש. שימו לב שהרמז של מאפיין הטעינה מראש מושמד כש-MediaSource מצורף לרכיב המדיה, כי האתר מטפל בעצמו בטעינה מראש.

במילים אחרות, הערך של טעינה מראש של <video> הוא עכשיו "metadata", והערך של טעינה מראש של <video preload="auto"> נשאר "auto". כדאי לנסות את הדוגמה הרשמית.

Intent to Ship | Chromestatus Tracker | Chromium Bug

הערך playbackRate לא נתמך וגורם להעלאת חריגה

בעקבות שינוי במפרט HTML, כשערך המאפיין playbackRate של רכיבי מדיה מוגדר לערך שלא נתמך ב-Chrome (למשל ערך שלילי), מוצגת השגיאה "NotSupportedError" DOMException ב-Chrome 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

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

Intent to Ship | Chromestatus Tracker | Chromium Bug

אופטימיזציות של טראק וידאו ברקע

צוות Chrome תמיד מנסה למצוא דרכים חדשות להאריך את חיי הסוללה, וגרסה Chrome 63 לא הייתה יוצאת דופן.

אם הסרטון לא מכיל רצועות אודיו, הוא יושהה אוטומטית כשהוא יופעל ברקע (למשל, בכרטיסייה לא גלויה) ב-Chrome למחשב (Windows,‏ Mac,‏ Linux ו-ChromeOS). העדכון הזה הוא המשך של שינוי דומה שחל רק על סרטוני MSE ב-Chrome 62.

Chromium Bug

הסרת ההשתקה לשיעורי הפעלה קיצוניים

בגרסאות ישנות יותר מ-Chrome 64, הצליל הושתק אם הערך של playbackRate היה מתחת ל-0.5 או מעל 4, כי האיכות ירדה באופן משמעותי. מאחר ש-Chrome עבר לגישה של Waveform-Similarity-Overlap-Add ‏ (WSOLA) כדי להפחית את איכות השמע, אין יותר צורך להשתיק את הצליל. מעכשיו אפשר להפעיל את הצליל במהירות איטית מאוד או מהירה מאוד.

Chromium Bug