Android के लिए Chrome पर ऑडियो और वीडियो के लिए सर्विस वर्कर कैशिंग, प्लेबैकरेट और ब्लॉब यूआरएल

कभी-कभी अच्छी चीज़ों के नाम काफ़ी उबाऊ होते हैं.

उदाहरण के लिए: Unified Media Pipeline, संक्षेप में UMP.

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

UMP की मदद से बहुत से काम किए जा सकते हैं:

  • ऑडियो और वीडियो को सर्विस वर्कर के साथ कैश मेमोरी में सेव करें. इसकी वजह यह है कि मीडिया डिलीवरी को Android मीडिया स्टैक में भेजे जाने के बजाय, अब सीधे Chrome में लागू किया जाता है.
  • ऑडियो और वीडियो एलिमेंट के लिए ब्लॉब यूआरएल इस्तेमाल करें.
  • ऑडियो और वीडियो के लिए playbackRate सेट करें.
  • Web Audio और MediaRecorder के बीच MediaStreams करें.
  • सभी डिवाइसों पर आसानी से मीडिया ऐप्लिकेशन डेवलप करें और उनका रखरखाव करें. मीडिया, डेस्कटॉप और Android, दोनों पर एक ही तरह से काम करता है.

UMP को इन्हें लागू करने के लिए, इंजीनियरिंग से जुड़े कुछ कड़ी मेहनत करनी पड़ी:

  • बेहतर पावर प्रदर्शन के लिए नई कैशिंग लेयर.
  • Chrome की जीपीयू प्रोसेस में होस्ट किए गए, MediaCodec पर आधारित नए वीडियो डिकोडर को अपडेट किया जा रहा है.
  • इस टूल को अलग-अलग डिवाइसों पर कई तरह से टेस्ट किया जाता है और बार-बार किया जाता है.

यहां सर्विस वर्कर के साथ वीडियो कैश मेमोरी का डेमो दिया गया है:

वीडियो चलाने का स्क्रीनशॉट.

वीडियो फ़ाइल और पोस्टर इमेज को कैश मेमोरी में सेव करना, उतना ही आसान है जितना कि प्रीफ़ेच करने के लिए यूआरएल की सूची में उनके पाथ जोड़ना:

<video controls  poster="static/poster.jpg">
    <source src="static/video.webm" type="video/webm" />
    <p>This browser does not support the video element.</p>
</video>
var urlsToPrefetch = [
    'static/video.webm', 'static/poster.jpg',
];

Android पर playbackRate को न बदल पाना लंबे समय से एक बग रहा है. UMP यह ठीक करता है. simpl.info/video/playbackrate पर डेमो के लिए, playbackRate 2 पर सेट है. इसे आज़माकर देखें!

वीडियो चलाने की दर के साथ, वीडियो चलाने का स्क्रीनशॉट 2 पर सेट किया गया है.

UMP, मीडिया एलिमेंट के लिए ब्लॉब यूआरएल की सुविधा को चालू करता है — इसका मतलब है कि अब आपके पास Android डिवाइस पर, किसी वीडियो एलिमेंट में MediaRecorder API का इस्तेमाल करके रिकॉर्ड किए गए वीडियो को चलाने का विकल्प होता है:

Android पर Chrome में, MediaRecorder API का इस्तेमाल करके रिकॉर्ड किए गए वीडियो का स्क्रीनशॉट

यहां काम का कोड दिया गया है:

var recordedBlobs = [];

mediaRecorder.ondataavailable = function(event) {
    if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
    }
};

function play() {
    var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
}

डेमो के लिए simpl.info/video/ऑफ़लाइन पर, वीडियो को File API का इस्तेमाल करके सेव किया जाता है. इसके बाद, Blob की मदद से वीडियो को चलाने के लिए यह तरीका अपनाया जाता है:

ALT_TEXT_HERE
function writeToFile(fileEntry, blob) {
    fileEntry.createWriter(function(fileWriter) {
    fileWriter.onwriteend = function() {
        readFromFile(fileEntry.fullPath);
    };
    fileWriter.onerror = function(e) {
        log('Write failed: ' + e.toString());
    };
    fileWriter.write(blob);
    }, handleError);
}

function readFromFile(fullPath) {
    window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {
        video.src = URL.createObjectURL(new Blob([this.result]));
        };
        reader.readAsArrayBuffer(file);
    }, handleError);
    }, handleError);
}

Unified Media Pipeline को मीडिया सोर्स एक्सटेंशन (MSE) और एन्क्रिप्ट (सुरक्षित) किए गए मीडिया एक्सटेंशन (EME) के लिए भी चालू कर दिया गया है.

यह मोबाइल और डेस्कटॉप Chrome को एक ही जगह पर लाने की दिशा में एक और कदम है. अब आपको अपना कोड बदलने की ज़रूरत नहीं है, लेकिन डेस्कटॉप और मोबाइल पर एक जैसा मीडिया अनुभव बनाना अब आसान हो जाएगा, क्योंकि सभी प्लैटफ़ॉर्म पर मीडिया स्टैक एक जैसा ही होता है. क्या आपको Chrome DevTools की मदद से डीबग करना है? मोबाइल एम्युलेशन अब 'असल' ऑडियो और वीडियो स्टैक का इस्तेमाल करता है.

अगर आपको Unified Media Pipeline की वजह से समस्याएं आ रही हैं, तो कृपया लागू करने से जुड़ी गड़बड़ी का इस्तेमाल करके या new.crbug.com के ज़रिए समस्याओं की शिकायत करें.

डेमो

प्रासंगिक गड़बड़ियां

कुछ गड़बड़ियां ऐसी हैं जो <video>, सर्विस वर्कर, और कैश मेमोरी एपीआई को प्रभावित कर रही हैं:

ब्राउज़र समर्थन

  • Chrome 52 और उसके बाद के वर्शन में, डिफ़ॉल्ट रूप से चालू रहती है.