שמירה במטמון של Service Worker, קצב הפעלה וכתובות URL של Bluetooth עבור אודיו ווידאו ב-Chrome ל-Android

Sam Dutton

לפעמים לדברים טובים יש שמות משעממים.

דוגמה: צינור המדיה המאוחד, UMP, בקיצור.

זה אולי נשמע כמו הנחיה מרושעת מהתקופה הסובייטית, אבל למעשה זה צעד חשוב לקראת העברה עקבית של אודיו ווידאו בפלטפורמות שונות. Chrome ב-Android ישתמש עכשיו באותה ערימת מדיה כמו Chrome במחשב, במקום להסתמך על ההטמעה הבסיסית של הפלטפורמה.

ב-UMP יש מגוון פעולות שאפשר לבצע:

  • שומרים את האודיו והווידאו במטמון עם Service Workers, כי העברת המדיה מיושמת עכשיו ישירות ב-Chrome ולא מועברת לסטאק המדיה של Android.
  • להשתמש בכתובות URL מסוג blob לרכיבי אודיו ווידאו.
  • הגדרת playbackRate לאודיו ולווידאו.
  • העברת MediaStreams בין Web Audio לבין MediaRecorder.
  • מפתחים ומתחזקים אפליקציות מדיה בקלות רבה יותר במכשירים שונים – המדיה פועלת באותו אופן גם במחשב וגם ב-Android.

UMP ביצעה עבודת הנדסה קשה כדי ליישם את:

  • שכבה חדשה לשמירה במטמון לביצועים משופרים של צריכת החשמל.
  • עדכון של מפענח וידאו חדש מבוסס MediaCodec, שמתארח בתהליך ה-GPU של Chrome.
  • הרבה בדיקות ואיטרציות במכשירים שונים.

לפניכם הדגמה של שמירת וידאו במטמון באמצעות קובץ שירות (service worker):

צילום מסך של הפעלת הסרטון.

כדי לשמור במטמון את קובץ הסרטון ואת תמונת הפוסטר של הסרטון, פשוט מוסיפים את הנתיבים שלהם לרשימת כתובות ה-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 ב-Android היה באג ותיק. ב-UMP אפשר לתקן את הבעיה הזו. בהדגמה שבכתובת simpl.info/video/playbackrate, הערך playbackRate מוגדר ל-2. כדאי לנסות!

צילום מסך של הפעלת הסרטון כאשר PlayRate מוגדר ל-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, הסרטון נשמר באמצעות ממשקי ה-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).

זהו צעד נוסף לקראת איחוד של Chrome לנייד ולמחשב. אתם לא צריכים לשנות את הקוד, אבל עכשיו קל יותר ליצור חוויית מדיה עקבית במחשבים ובניידים, כי ערימת המדיה נשארת זהה בכל הפלטפורמות. לנפות באגים באמצעות כלי הפיתוח ל-Chrome? אמולציה בנייד משתמשת עכשיו במקבץ האודיו והווידאו 'אמיתי'.

אם נתקלתם בבעיות כתוצאה מצינור עיבוד הנתונים המאוחד של המדיה, אפשר לדווח על בעיות בבאג בהטמעה או בכתובת new.crbug.com.

הדגמות

באגים רלוונטיים

יש כמה באגים שמשפיעים על <video>, על קובצי שירות (service worker) ועל ממשק ה-API של אחסון המטמון:

תמיכת דפדפן

  • התכונה מופעלת כברירת מחדל ב-Chrome מגרסה 52 ואילך.