บางครั้งสิ่งดีๆ มีชื่อที่น่าเบื่อ
กรณีตัวอย่าง: 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 ลองใช้เลย!
UMP จะเปิดใช้ BLOB URL สำหรับองค์ประกอบของสื่อ ซึ่งหมายความว่าตอนนี้คุณสามารถเล่นวิดีโอที่บันทึกไว้โดยใช้ Mediarecorder API ในองค์ประกอบวิดีโอบน 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 แล้วเล่นโดยใช้ Blob URL
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
เดโม
- แคชวิดีโอด้วย Service Worker
- สื่อ
playbackRate
- Mediarecorder: เล่นโดยใช้ URL ของ Blob
- วิดีโอแบบออฟไลน์ติดตั้งใช้งานด้วย API ของไฟล์
ข้อบกพร่องที่เกี่ยวข้อง
มีข้อบกพร่อง 2-3 ข้อที่ส่งผลกระทบต่อ <video>
, โปรแกรมทำงานของบริการ และ Cache Storage API ดังนี้
<video>
ทริกเกอร์โหมด: ส่งคำขอและจะไม่ยอมรับการตอบกลับ Service Worker ที่คลุมเครือ- การค้นหาไม่ทำงานในวิดีโอที่แคชของ Service Worker
การสนับสนุนเบราว์เซอร์
- เปิดใช้โดยค่าเริ่มต้นใน Chrome 52 ขึ้นไป