การแคชโปรแกรมทำงานของ Service Worker, URL ของอัตราการเล่น และ BLOB สำหรับเสียงและวิดีโอบน Chrome สำหรับ Android

Sam Dutton

บางครั้งสิ่งดีๆ มีชื่อที่น่าเบื่อ

กรณีตัวอย่าง: Unified Media Pipeline UMP ที่เรียกสั้นๆ ว่า

นี่อาจฟังดูเหมือนคำสั่งยุคโซเวียตที่ชั่วร้าย แต่อันที่จริง นี่ยังเป็นอีกก้าวสำคัญสู่การนำส่งเสียงและวิดีโอข้ามแพลตฟอร์มที่สอดคล้องกัน ตอนนี้ Chrome ใน Android จะใช้สแต็กสื่อเดียวกันกับ Chrome บนเดสก์ท็อปแทนที่จะใช้แพลตฟอร์มพื้นฐาน

UMP ช่วยให้คุณสามารถทำสิ่งต่างๆ ได้มากมาย

  • แคชเสียงและวิดีโอด้วย Service Worker เนื่องจากตอนนี้การส่งสื่อจะดำเนินการภายใน 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 จะเปิดใช้ BLOB URL สำหรับองค์ประกอบของสื่อ ซึ่งหมายความว่าตอนนี้คุณสามารถเล่นวิดีโอที่บันทึกไว้โดยใช้ 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 แล้วเล่นโดยใช้ Blob 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);
}

นอกจากนี้ ไปป์ไลน์ Unified Media Pipeline ได้เปิดใช้งานสำหรับ Media Source Extensions (MSE) และส่วนขยายสื่อที่เข้ารหัส (EME) แล้ว

นี่เป็นอีกขั้นตอนหนึ่งในการรวม Chrome บนอุปกรณ์เคลื่อนที่และเดสก์ท็อปเข้าด้วยกัน คุณไม่จำเป็นต้องเปลี่ยนโค้ด แต่การสร้างสื่อที่สอดคล้องกันระหว่างเดสก์ท็อปและอุปกรณ์เคลื่อนที่จะทำได้ง่ายขึ้นแล้ว เพราะสแต็กสื่อจะเหมือนกันในทุกแพลตฟอร์ม ต้องการแก้ไขข้อบกพร่องด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใช่ไหม ตอนนี้การจำลองอุปกรณ์เคลื่อนที่จะใช้สแต็กเสียงและวิดีโอ "จริง"

หากพบปัญหาเนื่องจากไปป์ไลน์สื่อแบบรวม (Unified Media Pipeline) โปรดส่งปัญหาเรื่องข้อบกพร่องในการใช้งานหรือผ่าน new.crbug.com

เดโม

ข้อบกพร่องที่เกี่ยวข้อง

มีข้อบกพร่อง 2-3 ข้อที่ส่งผลกระทบต่อ <video>, โปรแกรมทำงานของบริการ และ Cache Storage API ดังนี้

การสนับสนุนเบราว์เซอร์

  • เปิดใช้โดยค่าเริ่มต้นใน Chrome 52 ขึ้นไป