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 में इस सुविधा को ऑरिजिन ट्रायल के तौर पर जोड़ा था. डेवलपर, फ़ील्ड में Decoding Info API (Media Capabilities का हिस्सा) का इस्तेमाल करते हैं.

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

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

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

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

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

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

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

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

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

वेब डेवलपर, आउटपुट डिवाइस पर काम करने वाले कलर गैमट का पता लगा सकते हैं. इसके लिए, वे हाल ही में लॉन्च हुई color-gamut मीडिया क्वेरी का इस्तेमाल कर सकते हैं. साथ ही, स्क्रीन पर किसी रंग को दिखाने के लिए इस्तेमाल किए गए बिट की संख्या का पता लगाने के लिए, 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"'))
}

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

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

Windows और Mac के लिए हमेशा बने रहने वाले लाइसेंस

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

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

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. "चलाएं" बटन पर क्लिक करें और वीडियो का आनंद लें!

मीडिया प्रीलोड की डिफ़ॉल्ट वैल्यू "metadata" होती है

अन्य ब्राउज़र की तरह, Chrome डेस्कटॉप अब <video> और <audio> एलिमेंट के लिए, प्रीलोड की डिफ़ॉल्ट वैल्यू को "metadata" पर सेट करता है. इससे बैंडविथ और संसाधन के इस्तेमाल को कम किया जा सकेगा. Chrome 64 से, यह नया तरीका सिर्फ़ उन मामलों में लागू होता है जहां प्रीलोड वैल्यू सेट नहीं की गई है. ध्यान दें कि जब मीडिया एलिमेंट से MediaSource अटैच किया जाता है, तब प्रीलोड एट्रिब्यूट का हिंट खारिज कर दिया जाता है, क्योंकि वेबसाइट अपने प्रीलोड को खुद मैनेज करती है.

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

Intent to Ship | Chromestatus Tracker | Chromium Bug

playbackRate की वैल्यू काम न करने पर, अपवाद की स्थिति पैदा होती है

एचटीएमएल स्पेसिफ़िकेशन में बदलाव के बाद, जब मीडिया एलिमेंट के 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 से ज़्यादा हो. इसे आज़माने के लिए, आधिकारिक सैंपल देखें.

Intent to Ship | Chromestatus Tracker | Chromium Bug

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

Chrome की टीम हमेशा बैटरी लाइफ़ को बेहतर बनाने के नए तरीके ढूंढती रहती है. Chrome 63 भी इसका अपवाद नहीं था.

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

Chromium में मौजूद गड़बड़ी

ज़्यादा तेज़ी से वीडियो चलाने पर आवाज़ बंद करने की सुविधा हटाना

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

Chromium में मौजूद गड़बड़ी