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 điều tốt đẹp lại có tên nhàm chán.

Trường hợp điển hình là: Unified Media Pipeline (Quy trình truyền thông hợp nhất), gọi tắt là UMP.

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

Nền tảng thông báo cho người dùng (UMP) giúp bạn làm được rất 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ì quá trình 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 truyền đến ngăn xếp nội dung nghe nhìn trên Android.
• Dùng URL của blob cho các phần tử âm thanh và video.
• Đặt playbackRate cho âm thanh và video.
• Truyền MediaStream giữa Âm thanh web và MediaRecorder.
• Phát triển và duy trì ứng dụng đa phương tiện dễ dàng hơn trên các thiết bị — nội dung nghe nhìn hoạt động giống nhau trên máy tính để bàn và Android.

UMP đã mất một số công sức kỹ thuật để thực hiện:

• Một lớp lưu vào bộ nhớ đệm mới giúp cải thiện hiệu suất nguồn.
• 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.
• Thực hiện nhiều thử nghiệm và lặp lại trên các thiết bị khác nhau.

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

Việc lưu tệp video và hình ảnh áp phích video vào bộ nhớ đệm cũng đơn giản như việc thêm đường dẫn của chúng vào danh sách URL cần tìm nạp 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',
];

Lưu ý: Có một số mã shim trong bản minh hoạ này để xử lý các yêu cầu về phạm vi mà trình chạy dịch vụ chưa triển khai.

Việc không thể thay đổi playbackRate trên Android đã là một lỗi dai dẳng. UMP sẽ 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 bật URL blob cho các phần tử nội dung nghe nhìn — chẳng hạn như giờ đây, bạn có thể phát lại video đã quay bằng API MediaRecorder trong phần tử video trên Android:

Dưới đây là mã 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 File (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);
}

Hợp nhất Media Pipeline cũng đã được bật cho Tiện ích nguồn phương tiện (MSE) và Tiện ích phương tiện đã mã hoá (EME).

Đây là một bước khác để hợp nhất Chrome dành cho thiết bị di động và máy tính. Bạn không cần thay đổi mã nhưng việc tạo 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 giờ đây 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? Giờ đây, quy trình mô phỏng cho thiết bị di động sử dụng ngăn xếp âm thanh và video "thực".

Nếu bạn gặp vấn đề do Quy trình truyền thông 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 một trình chạy dịch vụ
• Nội dung nghe nhìn playbackRate
• MediaRecorder: phát bằng URL của blob
• Video ngoại tuyến được triển khai bằng API tệp

Lỗi liên quan

• Các vấn đề theo dõi đối với Quy trình truyền thông hợp nhất
• Bản dùng thử thực địa của Nền tảng thông báo cho người dùng (UMP)
• MSE, EME và Unified Media Pipeline (Quy trình truyền thông hợp nhất)

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

• <video> kích hoạt một chế độ: cors yêu cầu và sẽ không chấp nhận phản hồi của trình chạy dịch vụ mờ
• Bạn không thể tìm kiếm 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.