Lưu các URL của trình chạy dịch vụ vào bộ nhớ đệm, PlaybackRate và Blob cho âm thanh và video trên Chrome dành cho Android

Sam Dutton

Đôi khi, những thứ hay ho lại có tên nhàm chán.

Ví dụ: Quy trình truyền dẫn nội dung đa phương tiện hợp nhất, gọi tắt là UMP.

Điều này nghe có vẻ như một chỉ thị nham hiểm của thời kỳ Liên Xô, nhưng thực tế đây là một bước quan trọng để phân phối âm thanh và video nhất quán trên nhiều nền tảng. Giờ đây, Chrome trên Android sẽ sử dụng cùng một ngăn xếp nội dung nghe nhìn với Chrome trên máy tính, thay vì dựa vào cách triển khai nền tảng cơ bản.

UMP cho phép bạn làm nhiều việc:

• Lưu âm thanh và video vào bộ nhớ đệm bằng trình chạy dịch vụ, vì việc phân phối nội dung nghe nhìn hiện được triển khai trực tiếp trong Chrome thay vì được chuyển sang ngăn xếp nội dung nghe nhìn Android.
• Sử dụng URL blob cho các phần tử âm thanh và video.
• Đặt playbackRate cho âm thanh và video.
• Truyền MediaStreams giữa Web Audio và MediaRecorder.
• Dễ dàng phát triển và duy trì ứng dụng đa phương tiện trên nhiều thiết bị — nội dung đa phương tiện hoạt động giống nhau trên máy tính và Android.

UMP đã phải trải qua một số công việc kỹ thuật khó khăn để triển khai:

• Lớp lưu vào bộ nhớ đệm mới để cải thiện hiệu suất pin.
• Cập nhật bộ giải mã video mới dựa trên MediaCodec được lưu trữ trong quy trình GPU của Chrome.
• Rất nhiều hoạt động kiểm thử và lặp lại trên nhiều thiết bị.

Sau đây là bản minh hoạ về cách lưu video vào bộ nhớ đệm bằng trình chạy dịch vụ:

Bạn chỉ cần thêm đường dẫn của tệp video và hình ảnh áp phích video vào danh sách URL để tải trước:

<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',
];

Không thể thay đổi playbackRate trên Android là một lỗi lâu năm. UMP khắc phục vấn đề này. Đối với bản minh hoạ tại simpl.info/video/playbackrate, playbackRate được đặt thành 2. Hãy dùng thử ngay!

UMP cho phép URL blob cho các phần tử nội dung đa phương tiện. Ví dụ: giờ đây, bạn có thể phát lại video được ghi bằng MediaRecorder API trong một phần tử video trên Android:

Dưới đây là mã có liên quan:

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

Đối với bản minh hoạ tại simpl.info/video/offline, video được lưu trữ bằng API Tệp, sau đó phát lại bằng URL Blob:

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

Quy trình đa phương tiện hợp nhất cũng đã được bật cho Tiện ích nguồn nội dung đa phương tiện (MSE) và Tiện ích nội dung đa phương tiện được mã hoá (EME).

Đây là một bước nữa để hợp nhất Chrome cho thiết bị di động và máy tính. Bạn không cần thay đổi mã, nhưng giờ đây, việc xây dựng trải nghiệm nội dung nghe nhìn nhất quán trên máy tính và thiết bị di động sẽ dễ dàng hơn, vì ngăn xếp nội dung nghe nhìn giống nhau trên các nền tảng. Gỡ lỗi bằng Công cụ của Chrome cho nhà phát triển? Tính năng mô phỏng trên thiết bị di động hiện sử dụng ngăn xếp âm thanh và video "thực".

Nếu bạn gặp sự cố do Quy trình truyền dẫn nội dung đa phương tiện hợp nhất, vui lòng báo cáo vấn đề về lỗi triển khai hoặc thông qua new.crbug.com.

Bản thu thử

• Lưu video vào bộ nhớ đệm bằng trình chạy dịch vụ
• Media playbackRate
• MediaRecorder: phát bằng URL blob
• Video ngoại tuyến được triển khai bằng API Tệp

Lỗi có liên quan

• Theo dõi các vấn đề về Quy trình truyền dẫn nội dung nghe nhìn hợp nhất
• Thử nghiệm UMP trên thực địa
• MSE, EME và Quy trình truyền dẫn nội dung đa phương tiện hợp nhất

Có một số lỗi ảnh hưởng đến <video>, worker dịch vụ và API Bộ nhớ đệm:

• <video> kích hoạt một chế độ: yêu cầu cors và sẽ không chấp nhận phản hồi của worker dịch vụ mờ
• Tính năng tua không hoạt động trong các video do bộ nhớ đệm của trình chạy dịch vụ phân phát

Hỗ trợ trình duyệt

• Bật theo mặc định trong Chrome 52 trở lên.