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

Sam Dutton

कभी-कभी अच्छी चीज़ों के नाम बोरिंग होते हैं.

उदाहरण के लिए: यूनिफ़ाइड मीडिया पाइपलाइन, जिसे UMP कहा जाता है.

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

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

  • सेवा वर्कर की मदद से ऑडियो और वीडियो को कैश मेमोरी में सेव करें. ऐसा इसलिए, क्योंकि मीडिया डिलीवरी अब सीधे Chrome में लागू की जाती है, न कि Android मीडिया स्टैक में.
  • ऑडियो और वीडियो एलिमेंट के लिए, ब्लॉब यूआरएल का इस्तेमाल करें.
  • ऑडियो और वीडियो के लिए 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 को बदलने में लंबे समय से आने वाली गड़बड़ी थी. यूएमपी से यह समस्या ठीक हो जाती है. simpl.info/video/playbackrate पर मौजूद डेमो के लिए, playbackRate को 2 पर सेट किया गया है. इसे आज़माएं!

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

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

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

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

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/offline पर मौजूद डेमो के लिए, वीडियो को फ़ाइल एपीआई का इस्तेमाल करके सेव किया जाता है. इसके बाद, ब्लॉब यूआरएल का इस्तेमाल करके उसे चलाया जाता है:

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

यूनिफ़ाइड मीडिया पाइपलाइन को मीडिया सोर्स एक्सटेंशन (एमएसई) और एन्क्रिप्ट (सुरक्षित) किए गए मीडिया एक्सटेंशन (ईएमई) के लिए भी चालू किया गया है.

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

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

डेमो

काम के बग

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

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

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