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

Sam Dutton

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

דוגמה לכך היא Unified Media Pipeline, ‏ UMP בקיצור.

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

UMP מאפשר לכם לבצע פעולות רבות:

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

כדי להטמיע את UMP נדרשה עבודה רבה של מהנדסים:

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

הדגמה של שמירת סרטונים במטמון באמצעות שירות עובד:

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

כדי לשמור בקובץ האחסון את קובץ הסרטון ואת תמונת הפוסטרים של הסרטון, פשוט מוסיפים את הנתיבים שלהם לרשימת כתובות ה-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. כדאי לנסות!

צילום מסך של הפעלת סרטון עם ההגדרה playbackRate=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);
}

צינור עיבוד הנתונים של Unified Media הופעל גם עבור תוספי מקור מדיה (MSE) ותוספי מדיה מוצפנים (EME).

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

אם נתקלתם בבעיות כתוצאה מ-Unified Media Pipeline, תוכלו לדווח על הבעיות בבאג ההטמעה או דרך new.crbug.com.

הדגמות

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

יש כמה באגים שמשפיעים על <video>, על שירותי העבודה ועל Cache Storage API:

תמיכה בדפדפנים

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