Android용 Chrome의 오디오 및 동영상의 서비스 워커 캐싱, PlaybackRate 및 Blob URL

좋은 이름에는 지루한 이름이 붙을 때가 있습니다.

통합 미디어 파이프라인(줄여서 UMP)이 그 대표적인 예입니다.

이것은 사악한 소비에트 시대 지침처럼 들릴 수도 있지만, 사실 이는 일관된 교차 플랫폼 오디오 및 동영상 전송을 위한 중요한 한 걸음입니다. 이제 Android용 Chrome은 기본 플랫폼 구현에 의존하지 않고 데스크톱 Chrome과 동일한 미디어 스택을 사용합니다.

UMP를 사용하면 다음과 같은 많은 작업을 할 수 있습니다.

  • 미디어 전송이 이제 Android 미디어 스택으로 전달되는 대신 Chrome 내에서 직접 구현되므로 서비스 워커로 오디오와 동영상을 캐시하세요.
  • 오디오 및 동영상 요소에 blob URL을 사용합니다.
  • 오디오 및 동영상에 playbackRate를 설정합니다.
  • 웹 오디오와 MediaRecorder 간에 MediaStreams를 전달합니다.
  • 여러 기기에서 미디어 앱을 더 쉽게 개발하고 유지 관리할 수 있습니다. 미디어는 데스크톱과 Android에서 동일하게 작동합니다.

UMP에서는 다음의 구현을 위해 몇 가지 어려운 엔지니어링 작업을 수행했습니다.

  • 전력 성능 향상을 위한 새로운 캐싱 레이어
  • Chrome의 GPU 프로세스에서 호스팅되는 새로운 MediaCodec 기반 동영상 디코더 업데이트
  • 다양한 기기에서 수많은 테스트와 반복을 거칩니다.

다음은 서비스 워커를 사용한 동영상 캐싱의 데모입니다.

동영상 재생 스크린샷

동영상 파일과 동영상 포스터 이미지를 캐싱하는 것은 미리 가져올 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',
];

Android에서 playbackRate를 변경할 수 없는 문제는 오래된 버그였습니다. UMP에서 이 문제를 해결합니다. simpl.info/video/playbackrate의 데모에서는 playbackRate가 2로 설정됩니다. 직접 시험해 보세요.

playRate가 2로 설정된 동영상 재생 스크린샷

UMP는 미디어 요소에 대한 blob URL을 사용 설정합니다. 즉, 이제 Android의 동영상 요소에서 MediaRecorder API를 사용하여 녹화된 동영상을 재생할 수 있습니다.

MediaRecorder API를 사용하여 녹화된 동영상을 Android의 Chrome에서 재생하는 스크린샷

관련 코드는 다음과 같습니다.

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

또한 통합 미디어 파이프라인이 미디어 소스 확장 프로그램 (MSE) 및 암호화된 미디어 확장 프로그램 (EME)에 사용 설정되었습니다.

이는 모바일 및 데스크톱 Chrome을 통합하기 위한 또 다른 단계입니다. 코드를 변경할 필요는 없지만 이제 미디어 스택이 플랫폼 간에 동일하므로 데스크톱과 모바일에서 일관된 미디어 환경을 더 쉽게 빌드할 수 있습니다. Chrome DevTools로 디버깅하시겠습니까? 이제 모바일 에뮬레이션에서 '실제' 오디오 및 동영상 스택을 사용합니다.

통합 미디어 파이프라인으로 인해 문제가 발생하면 구현 버그 또는 new.crbug.com을 통해 문제를 신고해 주세요.

데모

관련 버그

<video>, 서비스 워커, Cache Storage API에 영향을 미치는 몇 가지 버그가 있습니다.

브라우저 지원

  • Chrome 52 이상에서 기본적으로 사용 설정됩니다.