ذخیره‌سازی حافظه پنهان، PlaybackRate و Blob Worker برای صدا و تصویر در Chrome for Android

سام داتون

گاهی اوقات چیزهای خوب نام های خسته کننده ای دارند.

نمونه موردی: Unified Media Pipeline، به اختصار UMP .

این ممکن است مانند یک دستورالعمل شوم دوران شوروی به نظر برسد، اما در واقع گام مهمی به سوی ارائه مداوم صوتی و تصویری بین پلتفرمی است. کروم در اندروید اکنون از همان پشته رسانه کروم دسکتاپ استفاده می‌کند، نه اینکه بر پیاده‌سازی پلتفرم زیربنایی تکیه کند.

UMP به شما امکان می دهد کارهای زیادی انجام دهید:

  • صدا و تصویر را با سرویس‌کاران ذخیره کنید، زیرا اکنون تحویل رسانه به‌جای انتقال به پشته رسانه Android، مستقیماً در Chrome پیاده‌سازی می‌شود.
  • از URL های حباب برای عناصر صوتی و تصویری استفاده کنید.
  • playbackRate برای صدا و تصویر تنظیم کنید.
  • MediaStreams را بین Web Audio و MediaRecorder منتقل کنید.
  • برنامه‌های رسانه را راحت‌تر در همه دستگاه‌ها توسعه دهید و نگهداری کنید - رسانه در دسک‌تاپ و اندروید یکسان عمل می‌کند.

UMP چند کار مهندسی سخت برای پیاده سازی انجام داد:

  • یک لایه کش جدید برای بهبود عملکرد قدرت.
  • به‌روزرسانی رمزگشای ویدیویی مبتنی بر MediaCodec که در فرآیند GPU کروم میزبانی شده است.
  • تعداد زیادی تست و تکرار در دستگاه های مختلف.

در اینجا یک نسخه نمایشی از ذخیره ویدئو با یک سرویس دهنده وجود دارد:

اسکرین شات از پخش ویدئو.

ذخیره فایل ویدئویی و تصویر پوستر ویدئو به سادگی اضافه کردن مسیرهای آنها به لیست 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 های blob را برای عناصر رسانه فعال می کند - به این معنی که، برای مثال، اکنون می توانید ویدیوی ضبط شده با استفاده از MediaRecorder API را در یک عنصر ویدیویی در Android پخش کنید :

اسکرین شات پخش در Chrome در Android از ویدیوی ضبط شده با استفاده از 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/offline ، ویدئو با استفاده از File API ذخیره می شود، سپس با استفاده از URL 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);
}

خط لوله یکپارچه رسانه همچنین برای برنامه های افزودنی منبع رسانه (MSE) و برنامه های افزودنی رسانه رمزگذاری شده (EME) فعال شده است.

این یک گام دیگر برای یکسان سازی کروم موبایل و دسکتاپ است. نیازی نیست کد خود را تغییر دهید، اما ایجاد یک تجربه رسانه ای ثابت در سراسر دسکتاپ و تلفن همراه باید آسان تر باشد، زیرا پشته رسانه در همه سیستم عامل ها یکسان است. اشکال زدایی با کروم DevTools؟ شبیه سازی موبایل اکنون از پشته صوتی و تصویری "واقعی" استفاده می کند.

اگر در نتیجه خط لوله یکپارچه رسانه با مشکل مواجه شدید، لطفاً مشکلات مربوط به اشکال پیاده‌سازی یا از طریق new.crbug.com ثبت کنید.

دموها

اشکالات مربوطه

چند اشکال وجود دارد که بر <video> ، سرویس‌دهندگان و API حافظه کش تأثیر می‌گذارد:

پشتیبانی از مرورگر

  • به طور پیش فرض در Chrome 52 و بالاتر فعال است.