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

Sam Dutton

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

ตัวอย่างหนึ่งคือไปป์ไลน์สื่อแบบรวมหรือ UMP

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

UMP ช่วยให้คุณทําสิ่งต่างๆ ได้มากมาย ดังนี้

  • แคชเสียงและวิดีโอด้วย Service Worker เนื่องจากตอนนี้มีการใช้การแสดงสื่อภายใน Chrome โดยตรงแทนที่จะส่งต่อไปยังสแต็กสื่อของ Android
  • ใช้ URL ของ Blob สำหรับองค์ประกอบเสียงและวิดีโอ
  • ตั้งค่า playbackRate สำหรับเสียงและวิดีโอ
  • ส่ง MediaStream ระหว่าง 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 ลองใช้เลย!

ภาพหน้าจอของการเล่นวิดีโอโดยตั้งค่า playbackRate เป็น 2

UMP เปิดใช้ URL ของ BLOB สำหรับองค์ประกอบสื่อ ซึ่งหมายความว่าตอนนี้คุณสามารถเล่นวิดีโอที่บันทึกโดยใช้ MediaRecorder API ในองค์ประกอบวิดีโอบน Android ได้แล้ว ดังนี้

ภาพหน้าจอของการเล่นวิดีโอที่บันทึกโดยใช้ MediaRecorder API ใน Chrome บน Android

รหัสที่เกี่ยวข้องมีดังนี้

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

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

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

หากพบปัญหาที่เกิดจาก Unified Media Pipeline โปรดรายงานปัญหาเกี่ยวกับข้อบกพร่องในการใช้งานหรือผ่าน new.crbug.com

เดโม

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

มีข้อบกพร่อง 2 ข้อที่ส่งผลกระทบต่อ <video>, Service Worker และ Cache Storage API

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

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