샴페인과 도넛을 마음껏 즐기세요! 가장 별표표시된 Chrome 기능이 이제 구현되었습니다.
동영상을 GeoLocation 데이터와 동기화하는 스키 달리기 녹음기, 매우 간단한 음성 메모 앱 또는 플러그인 없이 동영상을 녹화하여 YouTube에 업로드할 수 있는 위젯을 상상해 보세요.
MediaRecorder API를 사용하면 웹 앱에서 오디오와 동영상을 녹화할 수 있습니다. 이 API는 현재 Firefox, Android용 Chrome 및 데스크톱용 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
- video/webm;codecs=vp9
예를 들어 MediaRecorder를 인스턴스화하는 경우 정적 메서드 MediaRecorder.isTypeSupported()를 사용하여 MIME 유형이 지원되는지 확인합니다.
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에 업로드합니다.
앱
- 이제 폴 루이스의 Voice Memos 앱에서 MediaRecorder 오디오를 지원하지 않는 브라우저에서 폴리필되는 MediaRecorder를 지원합니다.
Polyfill
- Muaz Khan의 MediaStreamRecorder는 오디오 및 동영상을 녹음하기 위한 JavaScript 라이브러리로, MediaRecorder와 호환됩니다.
- Recorderjs는 웹 오디오 API 노드에서 녹음을 사용 설정합니다. Paul Lewis의 Voice Memos 앱에서 실제 동작을 확인할 수 있습니다.
브라우저 지원
- 기본적으로 Chrome 49 이상
- chrome://flags에서 실험용 웹 플랫폼 기능이 사용 설정된 Chrome 데스크톱 47 및 48
- Firefox 버전 25부터
- Edge: 'Under Review(고려 중)'
사양
w3c.github.io/mediacapture-record/MediaRecorder.html