샴페인과 도넛을 준비하세요. 이제 가장 많은 별표표시가 달린 Chrome 기능이 구현되었습니다.
동영상을 위치정보 데이터와 동기화하는 스키 런 레코더, 매우 간단한 음성 메모 앱, 동영상을 녹화하여 YouTube에 업로드할 수 있는 위젯을 플러그인 없이 모두 사용할 수 있다고 상상해 보세요.
MediaRecorder API를 사용하면 웹 앱에서 오디오와 동영상을 녹화할 수 있습니다. 이 API는 현재 Firefox 및 Android 및 데스크톱용 Chrome에서 사용할 수 있습니다.
여기에서 사용해 보세요.
API는 간단합니다. WebRTC 샘플 저장소 데모의 코드를 사용하여 이를 보여드리겠습니다. 이 API는 안전한 출처(HTTPS 또는 localhost)에서만 사용할 수 있습니다.
먼저 MediaStream으로 MediaRecorder를 인스턴스화합니다. 원하는 경우 options 매개변수를 사용하여 원하는 출력 형식을 지정합니다.
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream은 다음에서 가져올 수 있습니다.
getUserMedia()호출- WebRTC 통화의 수신 측입니다.
- 화면 녹화
- 웹 오디오(이 문제가 해결된 후)
options의 경우 MIME 유형을 지정할 수 있으며 향후 오디오 및 동영상 비트 전송률도 지정할 수 있습니다.
MIME 유형에는 컨테이너와 코덱을 결합한 다소 구체적인 값이 있습니다. 예를 들면 다음과 같습니다.
- audio/webm
- 동영상/webm
- video/webm;codecs=vp8
- 동영상/webm;codecs=vp9
정적 메서드 MediaRecorder.isTypeSupported()를 사용하여 MIME 유형이 지원되는지 확인합니다(예: MediaRecorder 인스턴스화 시).
var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = {mimeType: 'video/webm; codecs=vp8'};
} else {
// ...
}
Chrome의 MediaRecorder에서 지원하는 MIME 유형의 전체 목록은 여기에서 확인할 수 있습니다.
다음으로 데이터 핸들러를 추가하고 start() 메서드를 호출하여 녹화를 시작합니다.
var recordedChunks = [];
var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
} else {
// ...
}
}
이 예에서는 데이터를 사용할 수 있을 때마다 recordedChunks 배열에 Blob을 추가합니다. 원하는 경우 start() 메서드에 각 Blob에 대해 캡처할 미디어 길이를 지정하는 timeSlice 인수를 제공할 수 있습니다.
녹화가 완료되면 MediaRecorder에 다음과 같이 알립니다.
mediaRecorder.stop();
녹화된 Blob 배열에서 'super-Blob'을 만들어 동영상 요소에서 녹화된 Blob을 재생합니다.
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
또는 XHR을 통해 서버에 업로드하거나 YouTube와 같은 API를 사용할 수 있습니다 (아래 실험용 데모 참고).
일부 링크 해킹을 통해 다운로드할 수 있습니다.
function download() {
var blob = new Blob(recordedChunks, {
type: 'video/webm'
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.webm';
a.click();
window.URL.revokeObjectURL(url);
}
API 및 데모에 대한 의견
플러그인 없이 오디오와 동영상을 녹음하는 기능은 웹 앱에 비해 비교적 새로운 기능입니다. 따라서 API에 대한 의견을 보내 주시면 특히 감사하겠습니다.
- MediaRecorder 구현 버그: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- 데모: github.com/webrtc/samples
또한 가장 중요한 사용 시나리오와 우선순위를 두고 싶은 기능을 알려주시기 바랍니다. 이 도움말에 댓글을 달거나 crbug.com/262211에서 진행 상황을 추적하세요.
데모
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (동일한 코드, 간편한 모바일 URL)
- 실험용 맞춤
<google-youtube-upload>요소를 사용하여 동영상을 녹화하고 YouTube에 업로드합니다.
앱
- 이제 폴 루이스의 음성 메모 앱에 MediaRecorder 오디오를 지원하지 않는 브라우저를 위해 폴리필된 MediaRecorder 지원이 포함되어 있습니다.
Polyfill
- Muaz Khan의 MediaStreamRecorder는 MediaRecorder와 호환되는 오디오 및 동영상 녹화용 JavaScript 라이브러리입니다.
- Recorderjs는 Web Audio API 노드에서 녹음을 사용 설정합니다. 폴 루이스의 음성 메모 앱에서 이를 확인할 수 있습니다.
브라우저 지원
- 기본적으로 Chrome 49 이상
- chrome://flags에서 실험용 웹 플랫폼 기능이 사용 설정된 Chrome 데스크톱 47 및 48
- Firefox 25 이상
- Edge: '검토 중'
사양
w3c.github.io/mediacapture-record/MediaRecorder.html에서 확인할 수 있습니다.