좋은 이름에는 지루한 이름이 붙을 때가 있습니다.
통합 미디어 파이프라인(줄여서 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를 사용하여 녹화된 동영상을 재생할 수 있습니다.
관련 코드는 다음과 같습니다.
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을 통해 문제를 신고해 주세요.
데모
관련 버그
<video>
, 서비스 워커, Cache Storage API에 영향을 미치는 몇 가지 버그가 있습니다.
브라우저 지원
- Chrome 52 이상에서 기본적으로 사용 설정됩니다.