이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Sam Dutton

좋은 물건에도 지루한 이름이 붙는 경우가 있습니다.

대표적인 예로 통합 미디어 파이프라인(줄여서 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로 설정됩니다. 직접 해보기

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을 사용하여 재생합니다.

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을 통해 문제를 신고하세요.

데모

브라우저 지원

Chrome 52 이상에서는 기본적으로 사용 설정되어 있습니다.

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

데모

관련 버그

브라우저 지원