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

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

फ़ील्ड में Decoding Info API (मीडिया की क्षमताओं का हिस्सा) का इस्तेमाल करने वाले डेवलपर से ज़्यादा से ज़्यादा सुझाव या राय पाने के लिए, हमने पहले ही 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 Update, एचडीआर के साथ काम करने वाला ग्राफ़िक्स कार्ड, और डिसप्ले (जैसे, NVIDIA 10-सीरीज़ कार्ड, LG HDR टीवी या मॉनिटर) की ज़रूरत होगी. साथ ही, आपको 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() को पास की गई Profile 2 वाली VP9 कोडेक स्ट्रिंग को, वीडियो कोडिंग प्रॉपर्टी के आधार पर अपडेट करना ज़रूरी है.

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

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

एन्क्रिप्टेड मीडिया एक्सटेंशन (ईएमई) में लाइसेंस को हमेशा के लिए सेव करने का मतलब है कि लाइसेंस को डिवाइस पर सेव किया जा सकता है, ताकि ऐप्लिकेशन, लाइसेंस का अनुरोध करने के लिए सर्वर को फिर से अनुरोध भेजे बिना, लाइसेंस को मेमोरी में लोड कर सकें. 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. "चलाएं" बटन पर क्लिक करें और वीडियो का आनंद लें!

मीडिया प्रीलोड की सेटिंग डिफ़ॉल्ट रूप से "मेटाडेटा" पर सेट होती है

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

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

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

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

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

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

Chrome की टीम हमेशा बैटरी लाइफ़ को बेहतर बनाने के नए तरीके ढूंढती रहती है. Chrome 63 में भी ऐसा ही किया गया है.

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

Chromium में गड़बड़ी

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

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

Chromium में गड़बड़ी