Chrome 75 में मीडिया अपडेट

François Beaufort

Chrome की मीडिया क्षमताएं वर्शन 75 में अपडेट की गई हैं. इस लेख में, हम उन नई सुविधाओं के बारे में चर्चा करेंगे जिनमें ये शामिल हैं:

• यह अनुमान लगाता है कि एन्क्रिप्ट (सुरक्षित) किए गए मीडिया के लिए, प्लेबैक आसान और बेहतर होगा या नहीं.
• वीडियो एलिमेंट के playsInline एट्रिब्यूट से मिलने वाले संकेत की सुविधा.

एन्क्रिप्ट (सुरक्षित) की गई मीडिया: डिकोड करने की जानकारी

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

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

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

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  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
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

ईएमई प्लेबैक में खास डिकोडिंग और रेंडरिंग कोड पाथ होते हैं. इसका मतलब है कि साफ़ प्लेबैक की तुलना में कोडेक के साथ काम करने और परफ़ॉर्मेंस अलग होती है. इसलिए, navigator.mediaCapabilities.decodingInfo() में पास किए गए मीडिया कॉन्फ़िगरेशन ऑब्जेक्ट में, एक नई keySystemConfiguration कुंजी सेट की जानी चाहिए. इस कुंजी की वैल्यू एक डिक्शनरी है, जिसमें कई लोकप्रिय ईएमई टाइप मौजूद होते हैं. यह ईएमई के requestMediaKeySystemAccess() को दिए गए इनपुट की एक कॉपी बनाता है. इसमें एक बड़ा अंतर होता है: requestMediaKeySystemAccess() को दिए गए इनपुट के क्रम, सिंगल वैल्यू में बराबर कर दिए जाते हैं, जहां भी requestMediaKeySystemAccess() इसका इस्तेमाल करने वाला सबसेट चुना जाता है.

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

navigator.mediaCapabilities.decodingInfo() ऐसा प्रॉमिस देता है जो तीन बूलियन वाले ऑब्जेक्ट के साथ एसिंक्रोनस रूप से रिज़ॉल्व करता है: supported, smooth, और powerEfficient. हालांकि, जब keySystemConfiguration कुंजी को सेट किया जाता है और supported true पर होता है, तो keySystemAccess नाम का दूसरा MediaKeySystemAccess ऑब्जेक्ट भी दिखता है. इसका उपयोग कुछ मीडिया कुंजियों का अनुरोध करने और एन्क्रिप्ट किए गए मीडिया प्लेबैक सेटअप करने के लिए किया जा सकता है. यहां एक उदाहरण दिया गया है:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

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

इसके अलावा, ध्यान रखें कि यह Android और ChromeOS पर requestMediaKeySystemAccess() की तरह ही उपयोगकर्ता अनुरोध को ट्रिगर कर सकता है. हालांकि, एन्क्रिप्ट (सुरक्षित) किए गए मीडिया प्लेबैक को सेटअप करने के लिए ज़्यादा कॉल की ज़रूरत होती है. हालांकि, यह requestMediaKeySystemAccess() से ज़्यादा प्रॉम्प्ट नहीं दिखाता है.

सुरक्षित कॉन्टेंट का प्रॉम्प्ट

ध्यान दें: वेब डेवलपर से सुझाव, शिकायत या राय पाने के लिए, यह सुविधा Chrome 75 में [ऑरिजिन ट्रायल] के तौर पर उपलब्ध है. आपको [टोकन का अनुरोध] करना होगा, ताकि यह सुविधा सीमित समय के लिए आपके ऑरिजिन के लिए अपने-आप चालू हो जाए.

प्रयोग करने के बारे में जानकारी | Chromestatus Tracker | Chromium की गड़बड़ी

HTMLVideoElement.playsInline

Chrome में अब playsInline बूलियन एट्रिब्यूट के साथ काम करता है. अगर दस्तावेज़ मौजूद है, तो इससे ब्राउज़र को यह संकेत मिलता है कि दस्तावेज़ में वीडियो को डिफ़ॉल्ट रूप से "इनलाइन" दिखाया जाना चाहिए और उसे एलिमेंट के प्लेबैक एरिया तक सीमित होना चाहिए.

इसी तरह Safari की तरह ही, जहां iPhone पर मौजूद वीडियो एलिमेंट, प्लेबैक शुरू होने पर अपने-आप फ़ुल स्क्रीन मोड में नहीं जाते. इस संकेत से, कुछ एम्बेड किए गए डिवाइसों को अपने-आप फ़ुल-स्क्रीन वीडियो चलाने की सुविधा मिलती है. ज़रूरत पड़ने पर, वेब डेवलपर इस अनुभव से ऑप्ट-आउट करने के लिए इसका इस्तेमाल कर सकते हैं.

<video playsinline></video>

Android और डेस्कटॉप पर Chrome, ऑटो-फ़ुलस्क्रीन की सुविधा नहीं देता है. इसलिए, playsInline वीडियो एलिमेंट एट्रिब्यूट हिंट का इस्तेमाल नहीं किया जाता.

शिप करने का इरादा | Chromestatus Tracker | Chromium बग