Chrome 63/64 में मीडिया अपडेट

François Beaufort
François Beaufort
GitHub

मीडिया की सुविधाएं - Decoding Info API

फ़िलहाल, वेब डेवलपर isTypeSupported() या canPlayType() पर भरोसा करके यह तय करते हैं कि किसी मीडिया को डिकोड किया जा सकता है या नहीं. असल में सवाल यह होना चाहिए कि: "इस डिवाइस पर इसकी परफ़ॉर्मेंस कैसी होगी?"

मीडिया की सुविधाओं के प्रस्ताव में, इस समस्या को हल करने के लिए एक एपीआई का सुझाव दिया गया है. यह एपीआई, ब्राउज़र से डिवाइस के डिकोड करने की क्षमताओं के बारे में क्वेरी करेगा. यह जानकारी, कोडेक, प्रोफ़ाइल, रिज़ॉल्यूशन, बिटरेट वगैरह जैसी जानकारी के आधार पर ली जाएगी. इससे यह जानकारी मिल पाएगी कि ब्राउज़र से रिकॉर्ड किए गए पिछले वीडियो चलाने के आंकड़ों के आधार पर, वीडियो को आसानी से चलाया जा सकता है या नहीं और क्या वीडियो चलाने के लिए ज़्यादा बैटरी खर्च होगी.

खास जानकारी के तौर पर, फ़िलहाल Decoding Info 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 को फ़िलहाल लागू करने के लिए, पहले से रिकॉर्ड की गई प्लेबैक की जानकारी का इस्तेमाल किया जाता है. जब ड्रॉप किए गए फ़्रेम का प्रतिशत 10% से कम होता है, तो यह smooth को 'सही' के तौर पर तय करता है. वहीं, जब हार्डवेयर 50% से ज़्यादा फ़्रेम को डिकोड करता है, तो powerEfficient को 'सही' के तौर पर तय किया जाता है. छोटे फ़्रेम को हमेशा कम बैटरी खर्च करने वाले फ़्रेम माना जाता है.

हमारा सुझाव है कि उपलब्धता का पता लगाने के लिए, नीचे दिए गए स्निपेट से मिलते-जुलते स्निपेट का इस्तेमाल करें. साथ ही, इस एपीआई के साथ काम न करने वाले ब्राउज़र के लिए, अपने मौजूदा तरीके को लागू करें.

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;
  });
}

ऑरिजिन ट्रायल के लिए उपलब्ध

फ़ील्ड में डिकोडिंग जानकारी एपीआई (मीडिया क्षमताओं का हिस्सा) का इस्तेमाल करने वाले डेवलपर से ज़्यादा से ज़्यादा सुझाव पाने के लिए, हमने पहले इस सुविधा को Chrome 64 में ऑरिजिन ट्रायल के तौर पर जोड़ा है.

यह ट्रायल अप्रैल 2018 में खत्म हो गया.

प्रयोग करने का इंटेंट | शिप करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग

Windows 10 पर एचडीआर वीडियो चलाना

हाई डाइनैमिक रेंज (एचडीआर) वीडियो में ज़्यादा कंट्रास्ट होता है. इससे, पहले से ज़्यादा साफ़ तौर पर, सटीक और बारीकी से दिखाई गई परछाई और शानदार हाइलाइट दिखती हैं. इसके अलावा, वाइड कलर गैमट के साथ काम करने का मतलब है कि रंग ज़्यादा चमकीले दिखते हैं.

एचडीआर और एसडीआर के बीच तुलना (असल एचडीआर देखने के लिए, एचडीआर डिसप्ले की ज़रूरत होती है)
एचडीआर और एसडीआर की तुलना (असल एचडीआर देखने के लिए, एचडीआर डिसप्ले की ज़रूरत होती है)

Chrome में अब Windows 10 के Fall Creator Update के लिए, VP9 प्रोफ़ाइल 2 10-बिट प्लेबैक की सुविधा काम करती है. साथ ही, Windows 10 के एचडीआर मोड में, Chrome में एचडीआर वीडियो चलाने की सुविधा भी काम करती है. तकनीकी जानकारी के तौर पर, Chrome 64 अब scRGB कलर प्रोफ़ाइल के साथ काम करता है. इसकी मदद से, मीडिया को एचडीआर में चलाया जा सकता है.

YouTube पर The World in HDR in 4K (ULTRA HD) देखकर, इस सुविधा को आज़माया जा सकता है. साथ ही, YouTube प्लेयर की क्वालिटी सेटिंग देखकर यह भी पता लगाया जा सकता है कि यह एचडीआर में चल रहा है या नहीं.

YouTube प्लेयर की क्वालिटी सेटिंग, जिसमें एचडीआर की सुविधा है
एचडीआर वाला YouTube प्लेयर क्वालिटी सेटिंग

फ़िलहाल, आपको बस Windows 10 Fall Creator अपडेट, एचडीआर के साथ काम करने वाला ग्राफ़िक कार्ड और डिसप्ले (जैसे कि NVIDIA 10-सीरीज़ कार्ड, LG HDR TV या मॉनिटर) चाहिए. साथ ही, Windows डिसप्ले की सेटिंग में जाकर एचडीआर मोड चालू करना होगा.

वेब डेवलपर, हाल ही की color-gaम्यूट मीडिया क्वेरी और स्क्रीन पर रंग दिखाने के लिए इस्तेमाल किए गए बिट की संख्या की मदद से, आउटपुट डिवाइस के साथ काम करने वाले अनुमानित कलर गैमट का पता लगा सकते हैं. इसके लिए, उन्हें screen.colorDepth पर जाना जाता है. उदाहरण के लिए, VP9 एचडीआर की सुविधा काम करती है या नहीं, यह पता लगाने के लिए इन एट्रिब्यूट का इस्तेमाल करने का एक तरीका यहां दिया गया है:

// 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"'))
}

ऊपर दिए गए उदाहरण में, प्रोफ़ाइल 2 वाली VP9 कोडेक स्ट्रिंग को isTypeSupported() को पास किया गया है. इसे आपकी वीडियो एन्कोडिंग प्रॉपर्टी के हिसाब से अपडेट करना ज़रूरी है.

ध्यान दें कि फ़िलहाल, सीएसएस, कैनवस, इमेज, और सुरक्षित कॉन्टेंट में एचडीआर कलर तय नहीं किए जा सकते. Chrome की टीम इस पर काम कर रही है. हमारे साथ बने रहें!

Windows और Mac के लिए स्थायी लाइसेंस

एन्क्रिप्टेड मीडिया एक्सटेंशन (ईएमई) में स्थायी लाइसेंस का मतलब है कि लाइसेंस को डिवाइस पर भी सेव रखा जा सकता है. इससे ऐप्लिकेशन, सर्वर को दूसरा लाइसेंस अनुरोध भेजे बिना, लाइसेंस को मेमोरी में लोड कर सकते हैं. EME में ऑफ़लाइन प्लेबैक की सुविधा इस तरह काम करती है.

अब तक, ChromeOS और Android ही ऐसे प्लैटफ़ॉर्म थे जिन पर हमेशा के लिए लाइसेंस सेट किए जा सकते थे. अब ऐसा नहीं है. डिवाइस के ऑफ़लाइन होने पर EME के ज़रिए सुरक्षित कॉन्टेंट चलाया जा सकता है. अब Windows और Mac पर, Chrome 64 में भी सुरक्षित कॉन्टेंट चलाया जा सकता है.

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" पर सेट करता है, ताकि बैंडविड्थ और संसाधन के इस्तेमाल को कम किया जा सके. Chrome 64 से, यह नया तरीका सिर्फ़ उन मामलों पर लागू होता है जहां प्रीलोड की कोई वैल्यू सेट नहीं होती. ध्यान दें कि जब मीडिया एलिमेंट में MediaSource अटैच किया जाता है, तो प्रीलोड एट्रिब्यूट के संकेत को खारिज कर दिया जाता है. ऐसा इसलिए होता है, क्योंकि वेबसाइट अपने प्रीलोड को मैनेज करती है.

दूसरे शब्दों में, <video> प्रीलोड वैल्यू अब "metadata" है, जबकि <video preload="auto"> प्रीलोड वैल्यू "auto" बनी हुई है. आधिकारिक सैंपल आज़माएं.

शिप करने की इच्छा | Chromestatus ट्रैकर | Chromium गड़बड़ी

विज्ञापन न दिखाने की वजह से, वीडियो चलाने की दर में अपवाद जोड़ा जा सकता है

एचटीएमएल स्पेसिफ़िकेशन में बदलाव के बाद, जब मीडिया एलिमेंट का playbackRate ऐसी वैल्यू पर सेट किया जाता है जो Chrome के साथ काम नहीं करती (जैसे, नेगेटिव वैल्यू), तो Chrome 63 में "NotSupportedError" DOMException दिखता है.

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 से ज़्यादा हो. इसे आज़माने के लिए, आधिकारिक सैंपल को आज़माएँ.

शिप करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग

बैकग्राउंड वीडियो ट्रैक को ऑप्टिमाइज़ करना

Chrome टीम हमेशा बैटरी लाइफ़ को बेहतर बनाने के नए तरीके खोजने की कोशिश करती रहती है और Chrome 63 कोई अपवाद नहीं था.

अगर वीडियो में कोई ऑडियो ट्रैक नहीं है, तो Windows, Mac, Linux, और ChromeOS के बैकग्राउंड में (जैसे, न दिखने वाले टैब में) वीडियो को अपने-आप रोक दिया जाएगा. यह बदलाव, Chrome 62 में एमएसई वीडियो पर लागू किए गए मिलते-जुलते बदलाव के बाद किया गया है.

Chromium बग

ज़्यादा प्लेबैक रेट के लिए, म्यूट करने की सुविधा हटाना

Chrome 64 से पहले, playbackRate के 0.5 से कम या 4 से ज़्यादा होने पर आवाज़ को म्यूट कर दिया जाता था, क्योंकि क्वालिटी काफ़ी खराब हो जाती थी. Chrome ने क्वालिटी डिग्रेड करने के लिए वेवफ़ॉर्म-समानता-ओवरलैप-ऐड (WSOLA) का इस्तेमाल किया है, इसलिए आवाज़ को अब म्यूट करने की ज़रूरत नहीं है. इसका मतलब है कि आप आवाज़ को बहुत धीरे और बहुत तेज़ चला सकते हैं.

Chromium में गड़बड़ी