MediaStream Recording API는 웹 애플리케이션에서 오디오 및 비디오 스트림을 녹음할 수 있는 JavaScript API입니다. 사용자의 마이크와 웹캠 또는 기타 미디어 입력 장치에서 오디오와 비디오를 캡처하기 위한 간단하고 사용하기 쉬운 인터페이스를 제공합니다.
다음은 MediaStream Recording API를 사용하여 웹캠에서 비디오를 녹화하고 파일에 저장하는 방법의 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MediaStream Recording API Example</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="start">Start Recording</button>
<button id="stop">Stop Recording</button>
<script>
const video = document.getElementById("video");
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
let mediaRecorder;
let recordedBlobs = [];
const handleDataAvailable = (event) => {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
};
const handleStop = (event) => {
const superBuffer = new Blob(recordedBlobs, { type: "video/webm" });
const downloadLink = document.createElement("a");
downloadLink.href = window.URL.createObjectURL(superBuffer);
downloadLink.download = "recorded-video.webm";
document.body.appendChild(downloadLink);
downloadLink.click();
};
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.onstop = handleStop;
})
.catch((err) => {
console.error("Error accessing media devices.", err);
});
startButton.addEventListener("click", () => {
recordedBlobs = [];
mediaRecorder.start();
});
stopButton.addEventListener("click", () => {
mediaRecorder.stop();
});
</script>
</body>
</html>
이 예제에는 사용자의 웹캠 스트림을 표시하는 `video` 요소가 있습니다. 또한 녹음 프로세스를 시작하고 중지하는 `start` 및 `stop`라는 두 개의 버튼이 있습니다.
`start` 버튼을 클릭하면 사용자의 미디어 스트림으로 `MediaRecorder`가 생성됩니다. `ondataavailable` 이벤트는 `MediaRecorder`에 저장할 데이터가 있을 때 발생합니다. 우리는 이 데이터를 `registeredBlobs`라는 배열에 저장합니다.
`stop` 버튼을 클릭하면 `MediaRecorder`는 녹음을 중지하고 `onstop` 이벤트를 발생시킵니다. 녹화된 데이터에서 `Blob`을 생성하고 사용자가 녹화된 비디오 파일을 다운로드할 수 있는 다운로드 링크를 생성합니다.
이 예제에서는 대부분의 최신 브라우저에서 지원하는 무료 개방형 비디오 형식인 `video/webm` MIME 유형을 사용합니다. 다른 MIME 유형을 사용하여 다른 유형의 미디어를 기록할 수도 있습니다.
이 예제가 웹 애플리케이션에서 MediaStream Recording API를 사용하는 방법을 이해하는 데 도움이 되기를 바랍니다.
'IT' 카테고리의 다른 글
| 자바스크립트 "Media Session API" (0) | 2023.03.15 |
|---|---|
| 자바스크립트 "Media Source Extensions API" (0) | 2023.03.15 |
| 자바스크립트 "Navigation API" (0) | 2023.03.15 |
| Network Information API (0) | 2023.03.15 |
| Page Visibility API (0) | 2023.03.15 |