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

François Beaufort
François Beaufort
GitHub

मीडिया क्षमताएं - डिकोडिंग जानकारी एपीआई

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

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

कम शब्दों में कहें, तो फ़िलहाल डिकोडिंग इंफ़ो एपीआई कैसे काम करता है. आधिकारिक सैंपल देखें.

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 को तब 'सही' के तौर पर दिखाता है, जब छूटे हुए फ़्रेम का प्रतिशत 10% से कम होता है. वहीं, 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 Tracker | Chromium की गड़बड़ी

Windows 10 पर एचडीआर वीडियो प्लेबैक

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

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

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

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

एचडीआर वाली, YouTube प्लेयर की क्वालिटी सेटिंग
एचडीआर वाली, YouTube प्लेयर की क्वालिटी सेटिंग

इसके लिए, आपको बस Windows 10 Fall Creator अपडेट, एचडीआर के साथ काम करने वाला एक ग्राफ़िक कार्ड और डिसप्ले (उदाहरण के लिए, 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() को पास की गई प्रोफ़ाइल 2 वाली VP9 कोडेक स्ट्रिंग को आपकी वीडियो एन्कोडिंग प्रॉपर्टी के आधार पर अपडेट करने की ज़रूरत है.

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

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

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

अब तक, सिर्फ़ 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 Tracker | 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 Tracker | Chromium बग

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

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

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

Chromium की गड़बड़ी

वीडियो चलाने की बहुत ज़्यादा दर लेने के लिए म्यूट हटाएं

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

Chromium की गड़बड़ी