Android এর জন্য Chrome-এ অডিও এবং ভিডিওর জন্য পরিষেবা কর্মী ক্যাশিং, প্লেব্যাকরেট এবং ব্লব ইউআরএল

কখনও কখনও ভাল জিনিস বিরক্তিকর নাম আছে.

কেস ইন পয়েন্ট: ইউনিফাইড মিডিয়া পাইপলাইন, সংক্ষেপে UMP

এটি একটি ভয়ঙ্কর সোভিয়েত যুগের নির্দেশের মতো শোনাতে পারে, কিন্তু প্রকৃতপক্ষে এটি ধারাবাহিক ক্রস-প্ল্যাটফর্ম অডিও এবং ভিডিও সরবরাহের দিকে একটি গুরুত্বপূর্ণ পদক্ষেপ। অ্যান্ড্রয়েডে Chrome এখন অন্তর্নিহিত প্ল্যাটফর্ম বাস্তবায়নের উপর নির্ভর না করে ডেস্কটপ ক্রোমের মতো একই মিডিয়া স্ট্যাক ব্যবহার করবে।

UMP আপনাকে অনেক কিছু করতে সক্ষম করে:

  • পরিষেবা কর্মীদের সাথে অডিও এবং ভিডিও ক্যাশে করুন, যেহেতু মিডিয়া ডেলিভারি এখন Android মিডিয়া স্ট্যাকে পাঠানোর পরিবর্তে সরাসরি Chrome এর মধ্যে প্রয়োগ করা হয়৷
  • অডিও এবং ভিডিও উপাদানের জন্য ব্লব ইউআরএল ব্যবহার করুন।
  • অডিও এবং ভিডিওর জন্য playbackRate সেট করুন।
  • ওয়েব অডিও এবং মিডিয়া রেকর্ডারের মধ্যে মিডিয়াস্ট্রিমগুলি পাস করুন।
  • ডিভাইস জুড়ে আরও সহজে মিডিয়া অ্যাপ্লিকেশানগুলি বিকাশ এবং বজায় রাখুন — মিডিয়া ডেস্কটপ এবং অ্যান্ড্রয়েডে একই কাজ করে৷

ইউএমপি বাস্তবায়নের জন্য কিছু কঠোর প্রকৌশল কাজ নিয়েছে:

  • উন্নত পাওয়ার পারফরম্যান্সের জন্য একটি নতুন ক্যাশিং স্তর।
  • Chrome এর GPU প্রক্রিয়ায় হোস্ট করা একটি নতুন MediaCodec ভিত্তিক ভিডিও ডিকোডার আপডেট করা হচ্ছে।
  • বিভিন্ন ডিভাইসে প্রচুর পরীক্ষা এবং পুনরাবৃত্তি।

এখানে একজন পরিষেবা কর্মীর সাথে ভিডিও ক্যাশে করার একটি ডেমো রয়েছে:

ভিডিও প্লেব্যাকের স্ক্রিনশট।

ভিডিও ফাইল এবং ভিডিও পোস্টার ইমেজ ক্যাশ করা প্রিফেচ করার জন্য URL-এর তালিকায় তাদের পাথ যোগ করার মতোই সহজ:

<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',
];

অ্যান্ড্রয়েডে playbackRate পরিবর্তন করতে অক্ষমতা একটি দীর্ঘস্থায়ী বাগ । UMP এটি ঠিক করে। simpl.info/video/playbackrate এ ডেমোর জন্য, playbackRate 2 এ সেট করা হয়েছে। এটি ব্যবহার করে দেখুন!

প্লেব্যাকরেট সহ ভিডিও প্লেব্যাকের স্ক্রিনশট 2 এ সেট করা হয়েছে।

UMP মিডিয়া উপাদানগুলির জন্য ব্লব URL গুলি সক্ষম করে — যার অর্থ হল, উদাহরণস্বরূপ, আপনি এখন 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 এ ডেমোর জন্য, ফাইল এপিআই ব্যবহার করে ভিডিও সংরক্ষণ করা হয়, তারপর একটি ব্লব URL ব্যবহার করে চালানো হয়:

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

ইউনিফাইড মিডিয়া পাইপলাইন মিডিয়া সোর্স এক্সটেনশন (MSE) এবং এনক্রিপ্টেড মিডিয়া এক্সটেনশন (EME) এর জন্যও সক্ষম করা হয়েছে।

এটি মোবাইল এবং ডেস্কটপ ক্রোমকে একীভূত করার দিকে আরেকটি পদক্ষেপ। আপনার কোড পরিবর্তন করার দরকার নেই, তবে ডেস্কটপ এবং মোবাইল জুড়ে একটি সামঞ্জস্যপূর্ণ মিডিয়া অভিজ্ঞতা তৈরি করা এখন সহজ হওয়া উচিত, যেহেতু মিডিয়া স্ট্যাক প্ল্যাটফর্ম জুড়ে একই। Chrome DevTools দিয়ে ডিবাগ করছেন? মোবাইল এমুলেশন এখন 'আসল' অডিও এবং ভিডিও স্ট্যাক ব্যবহার করে।

ইউনিফাইড মিডিয়া পাইপলাইনের ফলে আপনি যদি সমস্যার সম্মুখীন হন, তাহলে অনুগ্রহ করে ইমপ্লিমেন্টেশন বাগ বা new.crbug.com এর মাধ্যমে সমস্যা ফাইল করুন।

ডেমো

প্রাসঙ্গিক বাগ

<video> , পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API-কে প্রভাবিত করে এমন কয়েকটি বাগ রয়েছে:

ব্রাউজার সমর্থন

  • Chrome 52 এবং তার উপরে ডিফল্টরূপে সক্ষম।