Repository: mdn/translated-content
Pull request #26130: [ko] update web/api/mediastream_recording_api
Author: login: hakilee
Labels: name: l10n-ko
description: Issues related to Korean content.
Created: 2025-03-03T10:22:00Z | Merged: 2025-03-23T03:46:51Z

<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->

### Description

<!-- ✍️ Summarize your changes in one or two sentences -->
[MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) 문서를 한국어로 신규 번역합니다.
- 문서 하위의 두 개의 가이드도 함께 번역하였습니다.
([Using the MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API), [Recording a media element](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element))

`recording`은 '녹화'로 번역하였지만, `recorder`는 '녹화기'라고 번역할 경우 일반적으로 사용되지 않는 표현이기에 '레코더'라는 용어를 사용하였습니다.

### Motivation

<!-- ❓ Why are you making these changes and how do they help readers? -->

### Additional details

<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->

### Related issues and pull requests

<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" -->
<!-- 👉 Highlight related pull requests using "Relates to #123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends on:** #123" -->

<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->



Diff:
diff --git a/files/ko/web/api/mediastream_recording_api/index.md b/files/ko/web/api/mediastream_recording_api/index.md
new file mode 100644
index 00000000000000..decf7118894183
--- /dev/null
+++ b/files/ko/web/api/mediastream_recording_api/index.md
@@ -0,0 +1,140 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+l10n:
+  sourceCommit: bff3a6a2e6b3c13dd8bb0c80a1eb9da08cce5dc6
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+**MediaStream Recording API**는 때때로 Media Recording API 또는 MediaRecorder API 라고도 불리며, [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API), [WebRTC API](/ko/docs/Web/API/WebRTC_API)와 밀접한 관련이 있습니다. MediaStream Recording API를 사용하면 {{domxref("MediaStream")}}이나 {{domxref("HTMLMediaElement")}} 객체가 생성한 데이터를 분석, 처리, 또는 디스크에 저장할 목적으로 캡처할 수 있습니다. 또한, 사용하기도 상당히 쉽습니다.
+
+## 개념 및 사용 방법
+
+MediaStream Recording API는 단일 주요 인터페이스인 {{domxref("MediaRecorder")}}로 구성되어 있으며, 이 인터페이스가 {{domxref("MediaStream")}}의 데이터를 받아 처리할 수 있도록 전달하는 모든 작업을 수행합니다. 데이터는 `MediaRecorder` 생성 시 설정한 포맷으로 미리 변환되어, {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트를 통해 전달됩니다. 이후 필요에 따라 데이터를 추가로 처리하거나 파일로 저장할 수 있습니다.
+
+### 녹화 과정 개요
+
+스트림을 녹화하는 과정은 간단합니다.
+
+1. 미디어 데이터를 소스로 사용할 {{domxref("MediaStream")}} 또는 {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} 또는 {{HTMLElement("video")}} 요소 형태)를 설정합니다.
+2. 소스 스트림과 원하는 옵션(예: 컨테이너의 MIME 타입이나 각 트랙의 비트 전송률 등)을 지정하여 {{domxref("MediaRecorder")}} 객체를 생성합니다.
+3. {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트가 발생할 때 호출될 이벤트 핸들러로 {{domxref("MediaRecorder.dataavailable_event", "ondataavailable")}}을 설정합니다.
+4. 소스 미디어가 재생 중이고 녹화를 시작할 준비가 되면, {{domxref("MediaRecorder.start()")}}를 호출하여 녹화를 시작합니다.
+5. 준비된 데이터가 있을 때마다 {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트 핸들러가 호출되며, 이벤트의 `data` 속성에는 미디어 데이터를 담은 {{domxref("Blob")}} 객체가 포함됩니다. 필요에 따라 `dataavailable` 이벤트를 강제로 발생시켜 최신 데이터를 전달받을 수 있습니다.
+6. 소스 미디어의 재생이 중단되면 녹화는 자동으로 종료됩니다.
+7. 언제든지 {{domxref("MediaRecorder.stop()")}}을 호출하여 녹화를 중단할 수 있습니다.
+
+> [!NOTE]
+> 녹화된 미디어의 일부를 담은 개별 {{domxref("Blob")}}들이 반드시 개별적으로 재생 가능한 것은 아닙니다. 재생 전에 미디어를 다시 조립해야 합니다.
+
+녹화 중 문제가 발생하면 {{domxref("MediaRecorder/error_event", "error")}} 이벤트가 `MediaRecorder`에 전송됩니다. {{domxref("MediaRecorder.error_event", "onerror")}} 이벤트 핸들러를 설정하여 `error` 이벤트를 감지할 수 있습니다.
+
+예를 들어, 여기서는 HTML Canvas를 {{domxref("MediaStream")}}의 소스로 사용하고, 9초 후에 녹화를 중단합니다.
+
+```js
+const canvas = document.querySelector("canvas");
+
+// 선택적 초당 프레임 수
+const stream = canvas.captureStream(25);
+const recordedChunks = [];
+
+console.log(stream);
+const options = { mimeType: "video/webm; codecs=vp9" };
+const mediaRecorder = new MediaRecorder(stream, options);
+
+mediaRecorder.ondataavailable = handleDataAvailable;
+mediaRecorder.start();
+
+function handleDataAvailable(event) {
+  console.log("data-available");
+  if (event.data.size > 0) {
+    recordedChunks.push(event.data);
+    console.log(recordedChunks);
+    download();
+  } else {
+    // …
+  }
+}
+function download() {
+  const blob = new Blob(recordedChunks, {
+    type: "video/webm",
+  });
+  const url = URL.createObjectURL(blob);
+  const 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);
+}
+
+// 데모: 9초 후에 다운로드
+setTimeout((event) => {
+  console.log("stopping");
+  mediaRecorder.stop();
+}, 9000);
+```
+
+### 레코더 상태 확인 및 제어
+
+`MediaRecorder` 객체의 속성을 이용해 녹화 과정의 상태를 확인할 수 있으며, {{domxref("MediaRecorder.pause", "pause()")}}와 {{domxref("MediaRecorder.resume", "resume()")}} 메서드로 소스 미디어의 녹화를 일시 중지하거나 재개할 수 있습니다.
+
+특정 MIME 타입의 지원 여부를 확인하려면 {{domxref("MediaRecorder.isTypeSupported_static", "MediaRecorder.isTypeSupported()")}}를 호출하면 됩니다.
+
+### 사용할 수 있는 입력 장치 살펴보기
+
+카메라 및/또는 마이크 입력을 녹화하려는 경우, `MediaRecorder` 객체를 생성하기 전에 사용할 수 있는 입력 장치를 먼저 확인하는 것이 좋습니다. 이를 위해 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}}를 호출하여 사용할 수 있는 미디어 장치 목록을 가져올 수 있습니다. 이 목록을 검토하여 잠재적인 입력 소스를 식별하거나 원하는 기준에 따라 필터링할 수 있습니다.
+
+이 코드 스니펫에서는 `enumerateDevices()`를 사용하여 사용할 수 있는 입력 장치를 확인하고, 오디오 입력 장치를 찾은 다음, 해당 장치들을 {{HTMLElement("option")}} 요소로 만들어 입력 소스 선택기를 나타내는 {{HTMLElement("select")}} 요소에 추가합니다.
+
+```js
+navigator.mediaDevices.enumerateDevices().then((devices) => {
+  devices.forEach((device) => {
+    const menu = document.getElementById("input-devices");
+    if (device.kind === "audioinput") {
+      const item = document.createElement("option");
+      item.textContent = device.label;
+      item.value = device.deviceId;
+      menu.appendChild(item);
+    }
+  });
+});
+```
+
+이와 같은 코드를 활용하면 사용자가 선택할 장치 범위를 제한할 수 있습니다.
+
+### 더 알아보기
+
+MediaStream Recording API의 사용법에 대해 더 알아보려면, 오디오 클립 녹화를 위한 API 활용 방법을 보여주는 [MediaStream Recording API 사용하기](/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)를 참고하세요. 두 번째 문서인 [미디어 요소 녹화하기](/ko/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element)에서는 {{HTMLElement("audio")}} 또는 {{HTMLElement("video")}} 요소에서 재생 중인 미디어의 데이터를 실시간으로 추출해, 이를 녹화하거나 로컬 디스크에 저장하는 방법을 설명합니다.
+
+## 인터페이스
+
+- {{domxref("BlobEvent")}}
+  - : 미디어 데이터의 한 청크가 녹화 완료될 때마다, `dataavailable` 타입의 {{domxref("BlobEvent")}}를 통해 {{domxref("Blob")}} 형태로 사용자에게 전달됩니다.
+- {{domxref("MediaRecorder")}}
+  - : MediaStream Recording API를 구현하는 주요 인터페이스입니다.
+- {{domxref("MediaRecorderErrorEvent")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : MediaStream Recording API에서 발생한 오류를 나타내는 인터페이스입니다. 이 인터페이스의 {{domxref("MediaRecorderErrorEvent.error", "error")}} 속성은 발생한 오류를 명시하는 {{domxref("DOMException")}} 객체입니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Media Capture and Streams API (미디어 스트림)](/ko/docs/Web/API/Media_Capture_and_Streams_API) 랜딩 페이지
+- {{domxref("MediaDevices.getUserMedia()")}}
+- [simpl.info MediaStream 녹화 데모](https://simpl.info/mediarecorder/), [Sam Dutton](https://github.com/samdutton) 제작
+- [Chrome 및 Firefox에서 작동하는 HTML5 Media Recorder](https://blog.addpipe.com/mediarecorder-api/)
+- Safari와 Edge용 [MediaRecorder 폴리필](https://github.com/ai/audio-recorder-polyfill)
+- [TutorRoom](https://github.com/chrisjohndigital/TutorRoom): getUserMedia와 MediaStream를 이용한 HTML 비디오 캡처/재생/다운로드 ([GitHub 소스](https://github.com/chrisjohndigital/TutorRoom))
+- [간단한 비디오 녹화 데모](https://codepen.io/anon/pen/gpmPzm)
+- [고급 미디어 스트림 녹화 샘플](https://quickblox.github.io/javascript-media-recorder/sample/)
+- [OpenLang](https://github.com/chrisjohndigital/OpenLang): MediaStream Recording API를 활용한 HTML 비디오 언어 연구실 웹 애플리케이션 ([GitHub 소스](https://github.com/chrisjohndigital/OpenLang))
+- [Safari Technology Preview 73에서 MediaStream Recorder API 사용 가능](https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/)
diff --git a/files/ko/web/api/mediastream_recording_api/recording_a_media_element/index.md b/files/ko/web/api/mediastream_recording_api/recording_a_media_element/index.md
new file mode 100644
index 00000000000000..1c265b0ddf0d30
--- /dev/null
+++ b/files/ko/web/api/mediastream_recording_api/recording_a_media_element/index.md
@@ -0,0 +1,279 @@
+---
+title: 미디어 요소 녹화하기
+slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
+l10n:
+  sourceCommit: ed19ad8c789e0d621841033aecd535c5474d1ea5
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+MediaStream Recording API 사용하기 문서에서는 하드웨어 장치로 생성된 {{domxref("MediaStream")}}(즉, {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}로 반환된 스트림)을 캡처하기 위해 {{domxref("MediaRecorder")}} 인터페이스를 사용하는 방법을 다룹니다. 한편, 녹화할 `MediaStream`의 소스로 HTML 미디어 요소(예: {{HTMLElement("audio")}} 또는 {{HTMLElement("video")}})를 사용할 수도 있습니다. 이 문서에서는 그런 예제를 살펴봅니다.
+
+## 미디어 요소 녹화 예제
+
+### HTML
+
+```html hidden
+<p>
+  Click the "Start Recording" button to begin video recording for a few seconds.
+  You can stop recording by clicking the "Stop Recording" button. The "Download"
+  button will download the received data (although it's in a raw, unwrapped form
+  that isn't very useful).
+</p>
+<br />
+```
+
+먼저 HTML의 주요 부분을 살펴보겠습니다. 이 외에도 약간의 코드가 더 있지만, 이는 앱의 핵심 동작과는 관계없는 정보 제공 용도에 불과합니다.
+
+```html
+<div class="left">
+  <div id="startButton" class="button">Start Recording</div>
+  <h2>Preview</h2>
+  <video id="preview" width="160" height="120" autoplay muted></video>
+</div>
+```
+
+두 개의 열로 구성된 메인 인터페이스를 보여줍니다. 왼쪽에는 시작 버튼과 {{HTMLElement("video")}} 요소가 배치되어 있는데, 이 요소는 사용자 카메라에서 촬영하는 영상을 미리 보여줍니다. 스트림이 카메라에서 도착하는 즉시 영상이 표시되도록 [`autoplay`](/ko/docs/Web/HTML/Element/video#autoplay) 속성을 사용하며, [`muted`](/ko/docs/Web/HTML/Element/video#muted) 속성을 지정해 사용자의 마이크 소리가 스피커로 출력되어 피드백 루프가 발생하지 않도록 합니다.
+
+```html
+<div class="right">
+  <div id="stopButton" class="button">Stop Recording</div>
+  <h2>Recording</h2>
+  <video id="recording" width="160" height="120" controls></video>
+  <a id="downloadButton" class="button">Download</a>
+</div>
+```
+
+오른쪽에는 중지 버튼과 녹화된 영상을 재생할 `<video>` 요소가 있습니다. 재생 패널에는 autoplay 속성이 없어서 미디어가 도착하자마자 자동 재생되지 않으며, [`controls`](/ko/docs/Web/HTML/Element/video#controls) 속성이 지정되어 있어 사용자가 재생, 일시 정지 등 다양한 조작을 할 수 있습니다.
+
+재생 요소 아래에는 녹화된 비디오를 다운로드할 수 있는 버튼이 있습니다.
+
+```html hidden
+<div class="bottom">
+  <pre id="log"></pre>
+</div>
+```
+
+```css hidden
+body {
+  font:
+    14px "Open Sans",
+    "Arial",
+    sans-serif;
+}
+
+video {
+  margin-top: 2px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  display: block;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  text-decoration: none;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  margin-right: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.right {
+  margin-left: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.bottom {
+  clear: both;
+  padding-top: 10px;
+}
+```
+
+이제 자바스크립트 코드를 살펴보겠습니다. 결국 여기서 대부분의 동작이 이루어지니까요!
+
+### 전역 변수 설정
+
+필요한 몇 가지 전역 변수를 먼저 선언합니다.
+
+```js
+let preview = document.getElementById("preview");
+let recording = document.getElementById("recording");
+let startButton = document.getElementById("startButton");
+let stopButton = document.getElementById("stopButton");
+let downloadButton = document.getElementById("downloadButton");
+let logElement = document.getElementById("log");
+
+let recordingTimeMS = 5000;
+```
+
+대부분은 작업할 요소들을 참조하는 변수들입니다. 마지막 변수인 `recordingTimeMS`는 5000밀리초(5초)로 설정되어 있는데, 이는 녹화할 비디오의 길이를 지정합니다.
+
+### 유틸리티 함수
+
+다음으로, 이후에 사용할 몇 가지 유틸리티 함수를 생성합니다.
+
+```js
+function log(msg) {
+  logElement.innerText += `${msg}\n`;
+}
+```
+
+`log()` 함수는 텍스트 문자열을 {{HTMLElement("div")}}에 출력하여 사용자에게 정보를 전달하는 데 사용됩니다. 깔끔하진 않지만, 우리 목적에는 충분히 효과적입니다.
+
+```js
+function wait(delayInMS) {
+  return new Promise((resolve) => setTimeout(resolve, delayInMS));
+}
+```
+
+`wait()` 함수는 지정한 밀리초가 경과한 후 이행되는 새 {{jsxref("Promise")}}를 반환합니다. 이 함수는 [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해 {{domxref("Window.setTimeout", "setTimeout()")}}을 호출하고, 프로미스가 성공적으로 완료될 때 호출되는 이행 콜백 함수를 타임아웃 핸들러로 지정합니다. 이를 통해 타임아웃을 사용할 때도 프로미스 문법을 활용할 수 있어, 이후 프로미스 체이닝을 할 때 매우 유용합니다.
+
+### 미디어 녹화 시작
+
+`startRecording()` 함수는 녹화 과정을 시작하는 역할을 합니다.
+
+```js
+function startRecording(stream, lengthInMS) {
+  let recorder = new MediaRecorder(stream);
+  let data = [];
+
+  recorder.ondataavailable = (event) => data.push(event.data);
+  recorder.start();
+  log(`${recorder.state} for ${lengthInMS / 1000} seconds…`);
+
+  let stopped = new Promise((resolve, reject) => {
+    recorder.onstop = resolve;
+    recorder.onerror = (event) => reject(event.name);
+  });
+
+  let recorded = wait(lengthInMS).then(() => {
+    if (recorder.state === "recording") {
+      recorder.stop();
+    }
+  });
+
+  return Promise.all([stopped, recorded]).then(() => data);
+}
+```
+
+`startRecording()` 함수는 두 개의 입력 매개변수를 받습니다. 녹음할 {{domxref("MediaStream")}}과 밀리초 단위의 녹음할 시간입니다. 항상 지정된 시간 내에서만 미디어를 녹음하며, 만약 그 시간보다 먼저 미디어가 중단되면 {{domxref("MediaRecorder")}}가 자동으로 녹음을 멈춥니다.
+
+- 먼저 입력된 `stream`의 녹화를 처리할 `MediaRecorder`를 생성합니다.
+- `data`는 초기에 빈 배열이며, {{domxref("MediaRecorder.dataavailable_event", "ondataavailable")}} 이벤트 핸들러에 의해 제공된 미디어 데이터의 {{domxref("Blob")}}들을 저장합니다.
+- `ondataavailable` 할당은 {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트의 핸들러를 설정합니다. 수신된 이벤트의 `data` 속성은 미디어 데이터를 담고 있는 {{domxref("Blob")}}이며, 이 핸들러는 해당 `Blob`을 `data` 배열에 추가합니다.
+- {{domxref("MediaRecorder.start", "recorder.start()")}}를 호출하여 녹화를 시작하고, 레코더의 현재 상태와 녹화할 시간(초 단위)을 로그에 출력합니다.
+- `stopped`라는 새로운 {{jsxref("Promise")}}를 생성하는데, 이는 `MediaRecorder`의 {{domxref("MediaRecorder.stop_event", "onstop")}} 이벤트 핸들러가 호출되면 이행되고, {{domxref("MediaRecorder.error_event", "onerror")}} 이벤트 핸들러가 호출되면 거부됩니다. 거부 핸들러는 발생한 오류의 이름을 입력값으로 받습니다.
+- 또 다른 `Promise`인 `recorded`를 생성하는데, 이 프로미스는 지정된 밀리초가 경과하면 이행되며, 이행 시 녹화중인 경우 `MediaRecorder`를 정지합니다.
+- 마지막으로, {{jsxref("Promise.all")}}을 사용하여 두 개의 `Promise`(`stopped`와 `recorded`)가 모두 이행되면 이행되는 새로운 프로미스를 생성합니다. 이 프로미스가 이행되면, 배열 형태의 데이터가 `startRecording()` 함수의 호출자에게 반환됩니다.
+
+### 입력 스트림 중지
+
+`stop()` 함수는 입력 미디어의 재생을 중지시킵니다.
+
+```js
+function stop(stream) {
+  stream.getTracks().forEach((track) => track.stop());
+}
+```
+
+이는 {{domxref("MediaStream.getTracks()")}}를 호출한 뒤, {{jsxref("Array.forEach", "forEach()")}}를 사용해 스트림의 각 트랙에 대해 {{domxref("MediaStreamTrack.stop()")}}을 호출함으로써 작동합니다.
+
+### 입력 스트림 가져오기 및 레코더 설정
+
+이제 이 예제에서 가장 복잡한 부분인, 시작 버튼 클릭에 대한 이벤트 핸들러 코드를 살펴보겠습니다.
+
+```js
+startButton.addEventListener(
+  "click",
+  () => {
+    navigator.mediaDevices
+      .getUserMedia({
+        video: true,
+        audio: true,
+      })
+      .then((stream) => {
+        preview.srcObject = stream;
+        downloadButton.href = stream;
+        preview.captureStream =
+          preview.captureStream || preview.mozCaptureStream;
+        return new Promise((resolve) => (preview.onplaying = resolve));
+      })
+      .then(() => startRecording(preview.captureStream(), recordingTimeMS))
+      .then((recordedChunks) => {
+        let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
+        recording.src = URL.createObjectURL(recordedBlob);
+        downloadButton.href = recording.src;
+        downloadButton.download = "RecordedVideo.webm";
+
+        log(
+          `Successfully recorded ${recordedBlob.size} bytes of ${recordedBlob.type} media.`,
+        );
+      })
+      .catch((error) => {
+        if (error.name === "NotFoundError") {
+          log("Camera or microphone not found. Can't record.");
+        } else {
+          log(error);
+        }
+      });
+  },
+  false,
+);
+```
+
+{{domxref("Element/click_event", "click")}} 이벤트가 발생하면, 다음과 같이 진행됩니다.
+
+- {{domxref("MediaDevices.getUserMedia")}}를 호출하여 비디오와 오디오 트랙이 모두 포함된 새로운 {{domxref("MediaStream")}}을 요청합니다. 이것이 우리가 녹화할 스트림입니다.
+- `getUserMedia()`가 반환한 프로미스가 이행되면 {{HTMLElement("video")}} 요소의 {{domxref("HTMLMediaElement.srcObject","srcObject")}} 속성이 입력 스트림으로 설정되어, 사용자의 카메라에서 캡처되는 영상이 미리보기 상자에 표시됩니다. `<video>` 요소가 음소거되어 있으므로 오디오는 재생되지 않습니다. 이후 "Download" 버튼의 링크도 해당 스트림을 참조하도록 설정됩니다. 그리고 Firefox에서는 {{domxref("HTMLMediaElement.captureStream()")}} 메서드에 접두어가 붙어 있기 때문에, `preview.captureStream()`이 `preview.mozCaptureStream()`을 호출하도록 조정합니다. 마지막으로, 미리보기 오디오가 재생되기 시작하면 이행되는 새로운 {{jsxref("Promise")}}가 생성되어 반환됩니다.
+- 미리보기 비디오가 재생되기 시작하면, 녹화할 미디어가 준비되었음을 알 수 있으므로, 앞서 생성한 [`startRecording()`](#미디어_녹화_시작) 함수를 호출합니다. 이때 미리보기 비디오 스트림(녹화할 소스 미디어)과 녹화할 시간(밀리초 단위)을 나타내는 `recordingTimeMS`를 인자로 전달합니다. 앞서 언급한 대로, `startRecording()` 함수는 녹화가 완료되면 녹화된 미디어 데이터 청크를 담은 {{domxref("Blob")}} 객체 배열을 인자로 받아 이행 핸들러를 실행하는 {{jsxref("Promise")}}를 반환합니다.
+- 녹화 과정의 이행 핸들러는 `recordedChunks`라는 변수에 담긴 미디어 데이터 `Blob` 배열을 입력값으로 받습니다. 먼저, {{domxref("Blob.Blob", "Blob()")}} 생성자가 객체 배열을 하나의 객체로 이어 붙인다는 점을 활용하여, 이 청크들을 MIME 타입이 `"video/webm"`인 {{domxref("Blob")}}으로 병합합니다. 그다음, {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}을 사용해 blob을 참조하는 URL을 생성하고, 이 URL을 녹화된 비디오 재생 요소의 [`src`](/ko/docs/Web/HTML/Element/video#src) 속성과 다운로드 버튼의 링크 대상으로 지정합니다.
+
+  그런 다음 다운로드 버튼의 [`download`](/ko/docs/Web/HTML/Element/a#download) 속성이 설정됩니다. `download` 속성은 불리언 값도 될 수 있지만, 문자열로 설정하여 다운로드되는 파일의 이름으로 사용할 수도 있습니다. 따라서 다운로드 링크의 `download` 속성을 "RecordedVideo.webm"으로 지정하면, 버튼을 클릭했을 때 그 내용이 녹화된 비디오인 `"RecordedVideo.webm"` 파일이 다운로드되도록 브라우저에 지시하는 것입니다.
+
+- 녹화된 미디어의 크기와 형식은 두 비디오와 다운로드 버튼 아래의 로그 영역에 출력됩니다.
+- 모든 `Promise`의 `catch()`는 우리의 `log()` 함수를 호출하여 오류를 로그 영역에 출력합니다.
+
+### 정지 버튼 처리
+
+마지막으로, {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해 정지 버튼의 {{domxref("Element/click_event", "click")}} 이벤트에 대한 핸들러를 추가하는 코드입니다.
+
+```js
+stopButton.addEventListener(
+  "click",
+  () => {
+    stop(preview.srcObject);
+  },
+  false,
+);
+```
+
+이는 앞서 다룬 [`stop()`](#입력_스트림_중지) 함수를 호출합니다.
+
+### 결과
+
+전체 HTML과 위에 나타내지 않은 CSS와 함께 구성하면, 다음과 같이 보이고 작동합니다.
+
+{{ EmbedLiveSample('Example_of_recording_a_media_element', 600, 440) }}
+
+전체 데모를 {{LiveSampleLink("Example_of_recording_a_media_element", "여기에서 확인")}}할 수 있으며, 브라우저의 개발자 도구를 사용해 페이지의 모든 코드를 살펴볼 수 있습니다. 설명에 필수적이지 않아 위에서 생략된 부분도 포함되어 있으니 참고하세요.
+
+## 같이 보기
+
+- [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API) 랜딩 페이지
+- {{domxref("MediaDevices.getUserMedia()")}}
diff --git a/files/ko/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md b/files/ko/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
new file mode 100644
index 00000000000000..35a825002f51a2
--- /dev/null
+++ b/files/ko/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
@@ -0,0 +1,269 @@
+---
+title: MediaStream Recording API 사용하기
+slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+l10n:
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+[MediaStream Recording API](/ko/docs/Web/API/MediaStream_Recording_API)는 오디오 및/또는 비디오 스트림을 손쉽게 녹화할 수 있도록 해줍니다. {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}와 함께 사용하면 사용자의 입력 장치에서 바로 녹화하여, 그 결과물을 웹 애플리케이션에서 즉시 활용할 수 있습니다.
+
+오디오와 비디오는 개별적으로 또는 함께 녹화할 수 있습니다. 이 글은 해당 API를 제공하는 MediaRecorder 인터페이스의 사용법에 대한 기본 가이드를 제공하는 것을 목적으로 합니다.
+
+## 예제 애플리케이션: 웹 음성 녹음기
+
+![웹 음성 녹음기 샘플 앱의 이미지: 사인파 소리 시각화, 녹음 및 정지 버튼, 그리고 녹음된 트랙을 재생할 수 있는 오디오 주크박스](web-dictaphone.png)
+
+MediaStream Recording API의 기본 사용법을 시연하기 위해, 웹 기반의 음성 녹음기를 제작했습니다. 이 도구는 오디오 일부를 녹음한 후 재생할 수 있으며, Web Audio API를 사용해 기기의 사운드 입력을 시각화합니다. 이번 글에서는 녹음 및 재생 기능에 초점을 맞출 예정입니다.
+
+이 [데모를 실시간으로 확인](https://mdn.github.io/dom-examples/media/web-dictaphone/)하거나 GitHub에서 [소스 코드를 받아볼](https://github.com/mdn/dom-examples/tree/main/media/web-dictaphone) 수 있습니다.
+
+## CSS 유용한 기능
+
+이 앱의 HTML은 매우 단순해서 여기서 자세히 다루지 않겠습니다. 하지만 언급할 만한 흥미로운 CSS 요소가 몇 가지 있으므로 아래에서 다룰 예정입니다. CSS에 관심이 없고 바로 JavaScript로 넘어가고 싶다면 [기본 앱 설정](#기본_앱_설정) 섹션으로 건너뛰세요.
+
+### calc()를 사용하여 기기 높이에 상관없이 인터페이스를 뷰포트에 맞게 유지하기
+
+{{cssxref("calc", "calc()")}} 함수는 처음에는 별다른 것 없어 보이지만, "와, 이 기능이 왜 지금까지 없었을까? CSS2 레이아웃이 왜 이렇게 불편했을까?"라는 생각을 하게 만드는 유용한 도구 중 하나입니다. 이 함수는 서로 다른 단위를 혼합하여 CSS 단위의 계산된 값을 산출할 수 있도록 도와줍니다.
+
+예를 들어, 웹 음성 녹음기에서는 세 개의 주요 UI 영역이 수직으로 배치되어 있습니다. 우리는 처음 두 영역(헤더와 컨트롤)에 고정된 높이를 부여하고자 했습니다.
+
+```css
+header {
+  height: 70px;
+}
+
+.main-controls {
+  padding-bottom: 0.7rem;
+  height: 170px;
+}
+```
+
+하지만 기기 높이에 상관없이 남은 공간을 모두 차지하도록, 녹음 샘플 재생 영역인 세 번째 부분을 구성하고 싶었습니다. 이 경우 Flexbox를 사용할 수도 있겠지만, 이렇게 간단한 레이아웃에는 다소 과한 방법일 수 있습니다. 대신, 세 번째 컨테이너의 높이를 상위 요소의 전체 높이에서 다른 두 영역의 높이와 패딩 값을 뺀 값으로 설정하여 문제를 해결했습니다.
+
+```css
+.sound-clips {
+  box-shadow: inset 0 3px 4px rgb(0 0 0 / 70%);
+  background-color: rgb(0 0 0 / 10%);
+  height: calc(100% - 240px - 0.7rem);
+  overflow: scroll;
+}
+```
+
+### 체크박스 해킹을 이용한 표시/숨기기
+
+이 기법은 이미 꽤 잘 문서화되어 있지만, 체크박스의 {{htmlelement("label")}}을 클릭하면 체크/언체크 상태가 전환된다는 점을 활용한 체크박스 해킹을 언급해 보고자 합니다. 웹 음성 녹음기에서는 오른쪽 상단의 물음표 아이콘을 클릭하면 정보 화면이 표시되거나 숨겨지는데, 이때 이 기법이 사용됩니다. 우선, `<label>`에 원하는 스타일을 적용하여 다른 요소들보다 항상 위에 표시되도록 z-index를 충분히 높게 설정해, 포커스 및 클릭이 가능하게 합니다.
+
+```css
+label {
+  font-family: "NotoColorEmoji";
+  font-size: 3rem;
+  position: absolute;
+  top: 2px;
+  right: 3px;
+  z-index: 5;
+  cursor: pointer;
+}
+```
+
+그런 다음 실제 체크박스는 UI를 어수선하게 만들지 않기 위해 숨깁니다.
+
+```css
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+```
+
+다음으로, {{htmlelement("aside")}} 요소로 감싼 정보 화면을 원하는 스타일로 꾸미고, 메인 UI에 영향을 주지 않도록 레이아웃 흐름에서 벗어나도록 고정 위치를 부여합니다. 기본 위치로 이동시키기 위해 변환(transform)을 적용하고, 부드럽게 표시/숨김 효과를 주기 위해 전환(transition)을 설정합니다.
+
+```css
+aside {
+  position: fixed;
+  top: 0;
+  left: 0;
+  text-shadow: 1px 1px 1px black;
+  width: 100%;
+  height: 100%;
+  transform: translateX(100%);
+  transition: 0.6s all;
+  background-color: #999;
+  background-image: linear-gradient(
+    to top right,
+    rgb(0 0 0 / 0%),
+    rgb(0 0 0 / 50%)
+  );
+}
+```
+
+마지막으로, 체크박스가 선택되었을 때 (label을 클릭하거나 포커스했을 때), 인접한 `<aside>` 요소의 수평 이동 값이 변경되어 부드럽게 화면에 나타나도록 하는 규칙을 작성합니다.
+
+```css
+input[type="checkbox"]:checked ~ aside {
+  transform: translateX(0);
+}
+```
+
+## 기본 앱 설정
+
+캡처할 미디어 스트림을 얻기 위해 `getUserMedia()`를 사용합니다. 이후 MediaStream Recording API를 활용하여 스트림을 녹화하고, 녹화된 각 스니펫을 생성된 {{htmlelement("audio")}} 요소의 소스로 출력해 재생할 수 있도록 합니다.
+
+녹음 및 중지 버튼과, 생성된 오디오 플레이어들을 담을 {{htmlelement("article")}} 요소를 위한 변수를 선언합니다.
+
+```js
+const record = document.querySelector(".record");
+const stop = document.querySelector(".stop");
+const soundClips = document.querySelector(".sound-clips");
+```
+
+마지막으로, 이 섹션의 기본 `getUserMedia` 구조를 설정합니다.
+
+```js
+if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+  console.log("getUserMedia supported.");
+  navigator.mediaDevices
+    .getUserMedia(
+      // 제약 조건 - 이 앱은 오디오만 필요함
+      {
+        audio: true,
+      },
+    )
+
+    // 성공 콜백
+    .then((stream) => {})
+
+    // 오류 콜백
+    .catch((err) => {
+      console.error(`The following getUserMedia error occurred: ${err}`);
+    });
+} else {
+  console.log("getUserMedia not supported on your browser!");
+}
+```
+
+전체 코드는 다른 작업을 실행하기 전 `getUserMedia` 지원 여부를 확인하는 테스트로 감싸져 있습니다. 다음으로 `getUserMedia()`를 호출하고 그 내부를 정의합니다.
+
+- **제약 조건**: 음성 녹음기에서는 오직 오디오만 캡처합니다.
+- **성공 콜백**: `getUserMedia` 호출이 성공적으로 완료되면 실행되는 코드입니다.
+- **오류/실패 콜백**: `getUserMedia` 호출이 어떤 이유로 실패할 때 실행되는 코드입니다.
+
+> [!NOTE]
+> 아래의 모든 코드는 `getUserMedia` 성공 콜백 내부에 위치합니다.
+
+## 미디어 스트림 캡처
+
+`getUserMedia`가 미디어 스트림을 성공적으로 생성하면, `MediaRecorder()` 생성자를 사용해 새 MediaRecorder 인스턴스를 만들고 스트림을 직접 전달합니다. 이것이 MediaStream Recording API를 사용하는 진입점이 되며, 스트림은 이제 브라우저의 기본 인코딩 형식으로 {{domxref("Blob")}}에 캡처될 준비가 된 것입니다.
+
+```js
+const mediaRecorder = new MediaRecorder(stream);
+```
+
+{{domxref("MediaRecorder")}} 인터페이스에는 미디어 스트림 녹화를 제어할 수 있는 다양한 메서드들이 있으며, 웹 음성 녹음기에서는 이 중 두 가지 메서드와 몇 가지 이벤트만을 사용합니다. 우선, 녹음 버튼을 누르면 {{domxref("MediaRecorder.start()")}}를 호출하여 스트림의 녹화를 시작합니다.
+
+```js
+record.onclick = () => {
+  mediaRecorder.start();
+  console.log(mediaRecorder.state);
+  console.log("recorder started");
+  record.style.background = "red";
+  record.style.color = "black";
+};
+```
+
+`MediaRecorder`가 녹화 중일 때, {{domxref("MediaRecorder.state")}} 속성은 "recording" 값을 반환합니다.
+
+녹화가 진행됨에 따라 오디오 데이터를 수집해야 하므로, 이를 위해 {{domxref("mediaRecorder.dataavailable_event", "ondataavailable")}} 이벤트 핸들러를 등록합니다.
+
+```js
+let chunks = [];
+
+mediaRecorder.ondataavailable = (e) => {
+  chunks.push(e.data);
+};
+```
+
+> [!NOTE]
+> 브라우저는 필요에 따라 `dataavailable` 이벤트를 발생시키지만, 필요하다면 `start()` 메서드를 호출할 때 시간 간격(timeslice) 값을 포함해(예: `start(10000)`) 이 간격을 제어할 수 있으며, 원하는 시점에 {{domxref("MediaRecorder.requestData()")}}를 호출해 이벤트를 발생시킬 수도 있습니다.
+
+마지막으로, 정지 버튼을 누르면 {{domxref("MediaRecorder.stop()")}} 메서드를 사용하여 녹화를 종료하고, 애플리케이션의 다른 부분에서 사용할 준비가 된 {{domxref("Blob")}}을 완성합니다.
+
+```js
+stop.onclick = () => {
+  mediaRecorder.stop();
+  console.log(mediaRecorder.state);
+  console.log("recorder stopped");
+  record.style.background = "";
+  record.style.color = "";
+};
+```
+
+미디어 스트림이 종료될 때 녹화가 자연스럽게 중단될 수도 있습니다. (예: 노래 트랙을 녹음 중에 트랙이 끝나거나, 사용자가 마이크 공유를 중단하는 경우 등)
+
+## Blob 가져오기 및 활용
+
+녹화가 중지되면 `state` 속성은 "inactive" 값을 반환하며, stop 이벤트가 발생합니다. 이때, {{domxref("mediaRecorder.stop_event", "onstop")}} 이벤트 핸들러를 등록하여 지금까지 수신한 모든 청크로부터 최종적인 blob을 완성합니다.
+
+```js
+mediaRecorder.onstop = (e) => {
+  console.log("recorder stopped");
+
+  const clipName = prompt("Enter a name for your sound clip");
+
+  const clipContainer = document.createElement("article");
+  const clipLabel = document.createElement("p");
+  const audio = document.createElement("audio");
+  const deleteButton = document.createElement("button");
+
+  clipContainer.classList.add("clip");
+  audio.setAttribute("controls", "");
+  deleteButton.textContent = "Delete";
+  clipLabel.textContent = clipName;
+
+  clipContainer.appendChild(audio);
+  clipContainer.appendChild(clipLabel);
+  clipContainer.appendChild(deleteButton);
+  soundClips.appendChild(clipContainer);
+
+  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
+  chunks = [];
+  const audioURL = window.URL.createObjectURL(blob);
+  audio.src = audioURL;
+
+  deleteButton.onclick = (e) => {
+    let evtTgt = e.target;
+    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+  };
+};
+```
+
+위의 코드를 살펴보며 어떤 동작이 일어나는지 확인해 봅시다.
+
+먼저, 사용자에게 클립의 이름을 묻는 프롬프트를 표시합니다.
+
+다음으로, {{htmlelement("article")}} 요소인 클립 컨테이너에 아래와 같은 HTML 구조를 생성하여 삽입합니다.
+
+```html
+<article class="clip">
+  <audio controls></audio>
+  <p>your clip name</p>
+  <button>Delete</button>
+</article>
+```
+
+그 후, 녹음된 오디오 청크들을 결합해 하나의 {{domxref("Blob")}}을 만들고, `window.URL.createObjectURL(blob)`를 사용해 이를 가리키는 오브젝트 URL을 생성합니다. 그다음, {{HTMLElement("audio")}} 요소의 [`src`](/ko/docs/Web/HTML/Element/audio#src) 속성에 이 오브젝트 URL을 할당하여, 오디오 플레이어의 재생 버튼을 누르면 해당 `Blob`이 재생되도록 합니다.
+
+마지막으로, 삭제 버튼에 `onclick` 핸들러를 설정하여 전체 클립 HTML 구조를 삭제하는 함수를 실행합니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API) 랜딩 페이지
+- {{domxref("MediaDevices.getUserMedia()")}}


Reviews:
user: login: github-actions[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-03T10:23:28Z
user: login: sunhpark42
body: 안녕하세요 @ohprettyhak 님 번역해주신 내용 확인하였습니다.
리뷰확인 부탁드립니다 :)
기여감사합니다. 좋은하루되세요!
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T12:24:26Z
user: login: sunhpark42
body: 안녕하세요 @ohprettyhak 님~ 리뷰 빠르게 반영해주셔서 감사합니다 :)
수정해 주신 내용 확인했습니다. 머지하겠습니다. 감사합니다~!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-23T03:46:42Z

Review comments:
diff_hunk: @@ -0,0 +1,143 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+page-type: web-api-overview
+browser-compat: api.MediaRecorder
+spec-urls: https://w3c.github.io/mediacapture-record/
path: files/ko/web/api/mediastream_recording_api/index.md
user: login: github-actions[bot]
body: **[mdn-linter]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>
```suggestion
```

<!-- __reviewdog__:ChAyMDlkMjQ5NTY2ZjJlYTFlEgptZG4tbGludGVy -->

created_at: 2025-03-03T10:23:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,280 @@
+---
+title: 미디어 요소 녹화하기
+slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
+page-type: guide
path: files/ko/web/api/mediastream_recording_api/recording_a_media_element/index.md
user: login: github-actions[bot]
body: **[mdn-linter]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>
```suggestion
```

<!-- __reviewdog__:ChBlNTFiZmYxYmZmOTY0NTlkEgptZG4tbGludGVy -->

created_at: 2025-03-03T10:23:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,271 @@
+---
+title: MediaStream Recording API 사용하기
+slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+page-type: guide
+browser-compat: api.MediaRecorder
path: files/ko/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
user: login: github-actions[bot]
body: **[mdn-linter]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>
```suggestion
```

<!-- __reviewdog__:ChA0NzlkODgzNzIzZDJhNWEzEgptZG4tbGludGVy -->

created_at: 2025-03-03T10:23:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,140 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+l10n:
+  sourceCommit: bff3a6a2e6b3c13dd8bb0c80a1eb9da08cce5dc6
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+**MediaStream Recording API**는 때때로 _Media Recording API_ 또는 _MediaRecorder API_ 라고도 불리며, [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API), [WebRTC API](/ko/docs/Web/API/WebRTC_API)와 밀접한 관련이 있습니다. MediaStream Recording API를 사용하면 {{domxref("MediaStream")}}이나 {{domxref("HTMLMediaElement")}} 객체가 생성한 데이터를 분석, 처리, 또는 디스크에 저장할 목적으로 캡처할 수 있습니다. 또한, 사용하기도 상당히 쉽습니다.
path: files/ko/web/api/mediastream_recording_api/index.md
user: login: sunhpark42
body: 기울임 꼴의 경우 한국어 번역본에서는 사용하지 않고 있습니다. [가이드](https://github.com/mdn/translated-content/blob/main/docs/ko/guides/translation-guide.md#%EA%B8%B0%EC%9A%B8%EC%9E%84%EA%BC%B4) 참고 부탁드립니다 
```
기본 방침은 생략하며, 기여자에 재량에 따라 아래 두 가지 규칙을 따른다.
한글일 경우 '' 를 tag 대신에 기입한다.
한글이 아닐 경우 생략한다.
```

```suggestion
**MediaStream Recording API**는 때때로 Media Recording API 또는 MediaRecorder API 라고도 불리며, [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API), [WebRTC API](/ko/docs/Web/API/WebRTC_API)와 밀접한 관련이 있습니다. MediaStream Recording API를 사용하면 {{domxref("MediaStream")}}이나 {{domxref("HTMLMediaElement")}} 객체가 생성한 데이터를 분석, 처리, 또는 디스크에 저장할 목적으로 캡처할 수 있습니다. 또한, 사용하기도 상당히 쉽습니다.
```
created_at: 2025-03-03T12:42:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,140 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+l10n:
+  sourceCommit: bff3a6a2e6b3c13dd8bb0c80a1eb9da08cce5dc6
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+**MediaStream Recording API**는 때때로 _Media Recording API_ 또는 _MediaRecorder API_ 라고도 불리며, [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API), [WebRTC API](/ko/docs/Web/API/WebRTC_API)와 밀접한 관련이 있습니다. MediaStream Recording API를 사용하면 {{domxref("MediaStream")}}이나 {{domxref("HTMLMediaElement")}} 객체가 생성한 데이터를 분석, 처리, 또는 디스크에 저장할 목적으로 캡처할 수 있습니다. 또한, 사용하기도 상당히 쉽습니다.
+
+## 개념 및 사용 방법
+
+MediaStream Recording API는 단일 주요 인터페이스인 {{domxref("MediaRecorder")}}로 구성되어 있으며, 이 인터페이스가 {{domxref("MediaStream")}}의 데이터를 받아 처리할 수 있도록 전달하는 모든 작업을 수행합니다. 데이터는 `MediaRecorder` 생성 시 설정한 포맷으로 미리 변환되어, {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트를 통해 전달됩니다. 이후 필요에 따라 데이터를 추가로 처리하거나 파일로 저장할 수 있습니다.
+
+### 녹화 과정 개요
+
+스트림을 녹화하는 과정은 간단합니다.
+
+1. 미디어 데이터를 소스로 사용할 {{domxref("MediaStream")}} 또는 {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} 또는 {{HTMLElement("video")}} 요소 형태)를 설정합니다.
+2. 소스 스트림과 원하는 옵션(예: 컨테이너의 MIME 타입이나 각 트랙의 비트 전송률 등)을 지정하여 {{domxref("MediaRecorder")}} 객체를 생성합니다.
+3. {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트가 발생할 때 호출될 이벤트 핸들러로 {{domxref("MediaRecorder.dataavailable_event", "ondataavailable")}}을 설정합니다.
+4. 소스 미디어가 재생 중이고 녹화를 시작할 준비가 되면, {{domxref("MediaRecorder.start()")}}를 호출하여 녹화를 시작합니다.
+5. 준비된 데이터가 있을 때마다 {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트 핸들러가 호출되며, 이벤트의 `data` 속성에는 미디어 데이터를 담은 {{domxref("Blob")}} 객체가 포함됩니다. 필요에 따라 `dataavailable` 이벤트를 강제로 발생시켜 최신 데이터를 전달받을 수 있습니다.
+6. 소스 미디어의 재생이 중단되면 녹화는 자동으로 종료됩니다.
+7. 언제든지 {{domxref("MediaRecorder.stop()")}}을 호출하여 녹화를 중단할 수 있습니다.
+
+> [!NOTE]
+> 녹화된 미디어의 일부를 담은 개별 {{domxref("Blob")}}들이 반드시 개별적으로 재생 가능한 것은 아닙니다. 재생 전에 미디어를 다시 조립해야 합니다.
+
+녹화 중 문제가 발생하면 {{domxref("MediaRecorder/error_event", "error")}} 이벤트가 `MediaRecorder`에 전송됩니다. {{domxref("MediaRecorder.error_event", "onerror")}} 이벤트 핸들러를 설정하여 `error` 이벤트를 감지할 수 있습니다.
+
+예를 들어, 여기서는 HTML Canvas를 {{domxref("MediaStream")}}의 소스로 사용하고, 9초 후에 녹화를 중단합니다.
+
+```js
+const canvas = document.querySelector("canvas");
+
+// 초당 프레임 수(Optional argument)
path: files/ko/web/api/mediastream_recording_api/index.md
user: login: sunhpark42
body: 원문이 다음과 같아서, Optional frames per second argument.
선택적 초당 프레임 수 인자 혹은 초당 프레임 수(선택적 인자) 정도는 어떨까요? optional argument도 함께 번역되면 좋을 것 같습니다.
created_at: 2025-03-13T12:07:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,140 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+l10n:
+  sourceCommit: bff3a6a2e6b3c13dd8bb0c80a1eb9da08cce5dc6
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+**MediaStream Recording API**는 때때로 _Media Recording API_ 또는 _MediaRecorder API_ 라고도 불리며, [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API), [WebRTC API](/ko/docs/Web/API/WebRTC_API)와 밀접한 관련이 있습니다. MediaStream Recording API를 사용하면 {{domxref("MediaStream")}}이나 {{domxref("HTMLMediaElement")}} 객체가 생성한 데이터를 분석, 처리, 또는 디스크에 저장할 목적으로 캡처할 수 있습니다. 또한, 사용하기도 상당히 쉽습니다.
+
+## 개념 및 사용 방법
+
+MediaStream Recording API는 단일 주요 인터페이스인 {{domxref("MediaRecorder")}}로 구성되어 있으며, 이 인터페이스가 {{domxref("MediaStream")}}의 데이터를 받아 처리할 수 있도록 전달하는 모든 작업을 수행합니다. 데이터는 `MediaRecorder` 생성 시 설정한 포맷으로 미리 변환되어, {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트를 통해 전달됩니다. 이후 필요에 따라 데이터를 추가로 처리하거나 파일로 저장할 수 있습니다.
+
+### 녹화 과정 개요
+
+스트림을 녹화하는 과정은 간단합니다.
+
+1. 미디어 데이터를 소스로 사용할 {{domxref("MediaStream")}} 또는 {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} 또는 {{HTMLElement("video")}} 요소 형태)를 설정합니다.
+2. 소스 스트림과 원하는 옵션(예: 컨테이너의 MIME 타입이나 각 트랙의 비트 전송률 등)을 지정하여 {{domxref("MediaRecorder")}} 객체를 생성합니다.
+3. {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트가 발생할 때 호출될 이벤트 핸들러로 {{domxref("MediaRecorder.dataavailable_event", "ondataavailable")}}을 설정합니다.
+4. 소스 미디어가 재생 중이고 녹화를 시작할 준비가 되면, {{domxref("MediaRecorder.start()")}}를 호출하여 녹화를 시작합니다.
+5. 준비된 데이터가 있을 때마다 {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} 이벤트 핸들러가 호출되며, 이벤트의 `data` 속성에는 미디어 데이터를 담은 {{domxref("Blob")}} 객체가 포함됩니다. 필요에 따라 `dataavailable` 이벤트를 강제로 발생시켜 최신 데이터를 전달받을 수 있습니다.
+6. 소스 미디어의 재생이 중단되면 녹화는 자동으로 종료됩니다.
+7. 언제든지 {{domxref("MediaRecorder.stop()")}}을 호출하여 녹화를 중단할 수 있습니다.
+
+> [!NOTE]
+> 녹화된 미디어의 일부를 담은 개별 {{domxref("Blob")}}들이 반드시 개별적으로 재생 가능한 것은 아닙니다. 재생 전에 미디어를 다시 조립해야 합니다.
+
+녹화 중 문제가 발생하면 {{domxref("MediaRecorder/error_event", "error")}} 이벤트가 `MediaRecorder`에 전송됩니다. {{domxref("MediaRecorder.error_event", "onerror")}} 이벤트 핸들러를 설정하여 `error` 이벤트를 감지할 수 있습니다.
+
+예를 들어, 여기서는 HTML Canvas를 {{domxref("MediaStream")}}의 소스로 사용하고, 9초 후에 녹화를 중단합니다.
+
+```js
+const canvas = document.querySelector("canvas");
+
+// 초당 프레임 수(Optional argument)
+const stream = canvas.captureStream(25);
+const recordedChunks = [];
+
+console.log(stream);
+const options = { mimeType: "video/webm; codecs=vp9" };
+const mediaRecorder = new MediaRecorder(stream, options);
+
+mediaRecorder.ondataavailable = handleDataAvailable;
+mediaRecorder.start();
+
+function handleDataAvailable(event) {
+  console.log("data-available");
+  if (event.data.size > 0) {
+    recordedChunks.push(event.data);
+    console.log(recordedChunks);
+    download();
+  } else {
+    // …
+  }
+}
+function download() {
+  const blob = new Blob(recordedChunks, {
+    type: "video/webm",
+  });
+  const url = URL.createObjectURL(blob);
+  const 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);
+}
+
+// 데모: 9초 후에 다운로드
+setTimeout((event) => {
+  console.log("stopping");
+  mediaRecorder.stop();
+}, 9000);
+```
+
+### 레코더 상태 확인 및 제어
+
+`MediaRecorder` 객체의 속성을 이용해 녹화 과정의 상태를 확인할 수 있으며, {{domxref("MediaRecorder.pause", "pause()")}}와 {{domxref("MediaRecorder.resume", "resume()")}} 메서드로 소스 미디어의 녹화를 일시 중지하거나 재개할 수 있습니다.
+
+특정 MIME 타입의 지원 여부를 확인하려면 {{domxref("MediaRecorder.isTypeSupported_static", "MediaRecorder.isTypeSupported()")}}를 호출하면 됩니다.
+
+### 사용할 수 있는 입력 장치 살펴보기
+
+카메라 및/또는 마이크 입력을 녹화하려는 경우, `MediaRecorder` 객체를 생성하기 전에 사용할 수 있는 입력 장치를 먼저 확인하는 것이 좋습니다. 이를 위해 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}}를 호출하여 사용할 수 있는 미디어 장치 목록을 가져올 수 있습니다. 이 목록을 검토하여 잠재적인 입력 소스를 식별하거나 원하는 기준에 따라 필터링할 수 있습니다.
+
+이 코드 스니펫에서는 `enumerateDevices()`를 사용하여 사용할 수 있는 입력 장치를 확인하고, 오디오 입력 장치를 찾은 다음, 해당 장치들을 {{HTMLElement("option")}} 요소로 만들어 입력 소스 선택기를 나타내는 {{HTMLElement("select")}} 요소에 추가합니다.
+
+```js
+navigator.mediaDevices.enumerateDevices().then((devices) => {
+  devices.forEach((device) => {
+    const menu = document.getElementById("input-devices");
+    if (device.kind === "audioinput") {
+      const item = document.createElement("option");
+      item.textContent = device.label;
+      item.value = device.deviceId;
+      menu.appendChild(item);
+    }
+  });
+});
+```
+
+이와 같은 코드를 활용하면 사용자가 선택할 장치 범위를 제한할 수 있습니다.
+
+### 더 알아보기
+
+MediaStream Recording API의 사용법에 대해 더 알아보려면, 오디오 클립 녹화를 위한 API 활용 방법을 보여주는 [MediaStream Recording API 사용하기](/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)를 참고하세요. 두 번째 문서인 [미디어 요소 녹화하기](/ko/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element)에서는 {{HTMLElement("audio")}} 또는 {{HTMLElement("video")}} 요소에서 재생 중인 미디어의 데이터를 실시간으로 추출해, 이를 녹화하거나 로컬 디스크에 저장하는 방법을 설명합니다.
+
+## 인터페이스
+
+- {{domxref("BlobEvent")}}
+  - : 미디어 데이터의 한 청크가 녹화 완료될 때마다, `dataavailable` 타입의 {{domxref("BlobEvent")}}를 통해 {{domxref("Blob")}} 형태로 사용자에게 전달됩니다.
+- {{domxref("MediaRecorder")}}
+  - : MediaStream Recording API를 구현하는 주요 인터페이스입니다.
+- {{domxref("MediaRecorderErrorEvent")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : MediaStream Recording API에서 발생한 오류를 나타내는 인터페이스입니다. 이 인터페이스의 {{domxref("MediaRecorderErrorEvent.error", "error")}} 속성은 발생한 오류를 명시하는 {{domxref("DOMException")}} 객체입니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Media Capture and Streams API (미디어 스트림)](/ko/docs/Web/API/Media_Capture_and_Streams_API) 랜딩 페이지
+- {{domxref("MediaDevices.getUserMedia()")}}
+- [simpl.info MediaStream Recording demo](https://simpl.info/mediarecorder/), by [Sam Dutton](https://github.com/samdutton)
+- [HTML5's Media Recorder API in Action on Chrome and Firefox](https://blog.addpipe.com/mediarecorder-api/)
+- [MediaRecorder polyfill](https://github.com/ai/audio-recorder-polyfill) for Safari and Edge
+- [TutorRoom](https://github.com/chrisjohndigital/TutorRoom): HTML video capture/playback/download using getUserMedia and the MediaStream Recording API ([source on GitHub](https://github.com/chrisjohndigital/TutorRoom))
+- [Simple video recording demo](https://codepen.io/anon/pen/gpmPzm)
+- [Advanced media stream recorder sample](https://quickblox.github.io/javascript-media-recorder/sample/)
+- [OpenLang](https://github.com/chrisjohndigital/OpenLang): HTML video language lab web application using MediaDevices and the MediaStream Recording API for video recording ([source on GitHub](https://github.com/chrisjohndigital/OpenLang))
+- [MediaStream Recorder API Now Available in Safari Technology Preview 73](https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/)
path: files/ko/web/api/mediastream_recording_api/index.md
user: login: sunhpark42
body: 링크 제목도 함께 번역 부탁드립니다~!
created_at: 2025-03-13T12:09:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,279 @@
+---
+title: 미디어 요소 녹화하기
+slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
+l10n:
+  sourceCommit: ed19ad8c789e0d621841033aecd535c5474d1ea5
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+MediaStream Recording API 사용하기 문서에서는 하드웨어 장치로 생성된 {{domxref("MediaStream")}}(즉, {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}로 반환된 스트림)을 캡처하기 위해 {{domxref("MediaRecorder")}} 인터페이스를 사용하는 방법을 다룹니다. 한편, 녹화할 `MediaStream`의 소스로 HTML 미디어 요소(예: {{HTMLElement("audio")}} 또는 {{HTMLElement("video")}})를 사용할 수도 있습니다. 이 문서에서는 그런 예제를 살펴봅니다.
+
+## 미디어 요소 녹화 예제
+
+### HTML
+
+```html hidden
+<p>
+  Click the "Start Recording" button to begin video recording for a few seconds.
+  You can stop recording by clicking the "Stop Recording" button. The "Download"
+  button will download the received data (although it's in a raw, unwrapped form
+  that isn't very useful).
+</p>
+<br />
+```
+
+먼저 HTML의 주요 부분을 살펴보겠습니다. 이 외에도 약간의 코드가 더 있지만, 이는 앱의 핵심 동작과는 관계없는 정보 제공 용도에 불과합니다.
+
+```html
+<div class="left">
+  <div id="startButton" class="button">Start Recording</div>
+  <h2>Preview</h2>
+  <video id="preview" width="160" height="120" autoplay muted></video>
+</div>
+```
+
+두 개의 열로 구성된 메인 인터페이스를 보여줍니다. 왼쪽에는 시작 버튼과 {{HTMLElement("video")}} 요소가 배치되어 있는데, 이 요소는 사용자 카메라에서 촬영하는 영상을 미리 보여줍니다. 스트림이 카메라에서 도착하는 즉시 영상이 표시되도록 [`autoplay`](/ko/docs/Web/HTML/Element/video#autoplay) 속성을 사용하며, [`muted`](/ko/docs/Web/HTML/Element/video#muted) 속성을 지정해 사용자의 마이크 소리가 스피커로 출력되어 피드백 루프가 발생하지 않도록 합니다.
+
+```html
+<div class="right">
+  <div id="stopButton" class="button">Stop Recording</div>
+  <h2>Recording</h2>
+  <video id="recording" width="160" height="120" controls></video>
+  <a id="downloadButton" class="button">Download</a>
+</div>
+```
+
+오른쪽에는 중지 버튼과 녹화된 영상을 재생할 `<video>` 요소가 있습니다. 재생 패널에는 autoplay 속성이 없어서 미디어가 도착하자마자 자동 재생되지 않으며, [`controls`](/ko/docs/Web/HTML/Element/video#controls) 속성이 지정되어 있어 사용자가 재생, 일시 정지 등 다양한 조작을 할 수 있습니다.
+
+재생 요소 아래에는 녹화된 비디오를 다운로드할 수 있는 버튼이 있습니다.
+
+```html hidden
+<div class="bottom">
+  <pre id="log"></pre>
+</div>
+```
+
+```css hidden
+body {
+  font:
+    14px "Open Sans",
+    "Arial",
+    sans-serif;
+}
+
+video {
+  margin-top: 2px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  display: block;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  text-decoration: none;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  margin-right: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.right {
+  margin-left: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.bottom {
+  clear: both;
+  padding-top: 10px;
+}
+```
+
+이제 자바스크립트 코드를 살펴보겠습니다. 결국 여기서 대부분의 동작이 이루어지니까요!
+
+### 전역 변수 설정
+
+필요한 몇 가지 전역 변수를 먼저 선언합니다.
+
+```js
+let preview = document.getElementById("preview");
+let recording = document.getElementById("recording");
+let startButton = document.getElementById("startButton");
+let stopButton = document.getElementById("stopButton");
+let downloadButton = document.getElementById("downloadButton");
+let logElement = document.getElementById("log");
+
+let recordingTimeMS = 5000;
+```
+
+대부분은 작업할 요소들을 참조하는 변수들입니다. 마지막 변수인 `recordingTimeMS`는 5000밀리초(5초)로 설정되어 있는데, 이는 녹화할 비디오의 길이를 지정합니다.
+
+### 유틸리티 함수
+
+다음으로, 이후에 사용할 몇 가지 유틸리티 함수를 생성합니다.
+
+```js
+function log(msg) {
+  logElement.innerText += `${msg}\n`;
+}
+```
+
+`log()` 함수는 텍스트 문자열을 {{HTMLElement("div")}}에 출력하여 사용자에게 정보를 전달하는 데 사용됩니다. 깔끔하진 않지만, 우리 목적에는 충분히 효과적입니다.
+
+```js
+function wait(delayInMS) {
+  return new Promise((resolve) => setTimeout(resolve, delayInMS));
+}
+```
+
+`wait()` 함수는 지정한 밀리초가 경과한 후 이행되는 새 {{jsxref("Promise")}}를 반환합니다. 이 함수는 [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해 {{domxref("Window.setTimeout", "setTimeout()")}}을 호출하고, 프로미스가 성공적으로 완료될 때 호출되는 이행 콜백 함수를 타임아웃 핸들러로 지정합니다. 이를 통해 타임아웃을 사용할 때도 프로미스 문법을 활용할 수 있어, 이후 프로미스 체이닝을 할 때 매우 유용합니다.
+
+### 미디어 녹화 시작
+
+`startRecording()` 함수는 녹화 과정을 시작하는 역할을 합니다.
+
+```js
+function startRecording(stream, lengthInMS) {
+  let recorder = new MediaRecorder(stream);
+  let data = [];
+
+  recorder.ondataavailable = (event) => data.push(event.data);
+  recorder.start();
+  log(`${recorder.state} for ${lengthInMS / 1000} seconds…`);
+
+  let stopped = new Promise((resolve, reject) => {
+    recorder.onstop = resolve;
+    recorder.onerror = (event) => reject(event.name);
+  });
+
+  let recorded = wait(lengthInMS).then(() => {
+    if (recorder.state === "recording") {
+      recorder.stop();
+    }
+  });
+
+  return Promise.all([stopped, recorded]).then(() => data);
+}
+```
+
+`startRecording()` 함수는 두 개의 입력 매개변수를 받습니다. 녹음할 {{domxref("MediaStream")}}과 녹음할 시간(밀리초 단위)입니다. 항상 지정된 시간 내에서만 미디어를 녹음하며, 만약 그 시간보다 먼저 미디어가 중단되면 {{domxref("MediaRecorder")}}가 자동으로 녹음을 멈춥니다.
path: files/ko/web/api/mediastream_recording_api/recording_a_media_element/index.md
user: login: sunhpark42
body: ```suggestion
`startRecording()` 함수는 두 개의 입력 매개변수를 받습니다. 녹음할 {{domxref("MediaStream")}}과 밀리초 단위의 녹음할 시간입니다. 항상 지정된 시간 내에서만 미디어를 녹음하며, 만약 그 시간보다 먼저 미디어가 중단되면 {{domxref("MediaRecorder")}}가 자동으로 녹음을 멈춥니다.
```
이렇게 작성하면 원문과 유사한 의미이면서 괄호를 사용하지 않아도 될 것 같습니다.
created_at: 2025-03-13T12:13:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,269 @@
+---
+title: MediaStream Recording API 사용하기
+slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+l10n:
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
+---
+
+{{DefaultAPISidebar("MediaStream Recording")}}
+
+[MediaStream Recording API](/ko/docs/Web/API/MediaStream_Recording_API)는 오디오 및/또는 비디오 스트림을 손쉽게 녹화할 수 있도록 해줍니다. {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}와 함께 사용하면 사용자의 입력 장치에서 바로 녹화하여, 그 결과물을 웹 애플리케이션에서 즉시 활용할 수 있습니다.
+
+오디오와 비디오는 개별적으로 또는 함께 녹화할 수 있습니다. 이 글은 해당 API를 제공하는 MediaRecorder 인터페이스의 사용법에 대한 기본 가이드를 제공하는 것을 목적으로 합니다.
+
+## 예제 애플리케이션: 웹 딕터폰
+
+![웹 딕터폰 샘플 앱의 이미지: 사인파 소리 시각화, 녹음 및 정지 버튼, 그리고 녹음된 트랙을 재생할 수 있는 오디오 주크박스](web-dictaphone.png)
path: files/ko/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
user: login: sunhpark42
body: ```suggestion
![웹 음성 녹음기 샘플 앱의 이미지: 사인파 소리 시각화, 녹음 및 정지 버튼, 그리고 녹음된 트랙을 재생할 수 있는 오디오 주크박스](web-dictaphone.png)
```
dictaphone을 바로 음성 녹음기 로 번역해도 괜찮을 것 같습니다. 고유명사로써 볼수도 있고, 관습적으로 사용되는 "음성 녹음기" 의 의미로도 사용될 수 있을 것 같아요
created_at: 2025-03-13T12:18:49Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-03T10:23:53Z
body: <!-- build_hash: 9d2f227e5fe21b9023b31cf88ba5a44c date: 2025-03-13T15:00:25.577Z -->

<b>Preview URLs</b>

- [`/ko/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element`](https://pr26130.review.mdn.allizom.net/ko/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element)
- [`/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API`](https://pr26130.review.mdn.allizom.net/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
- [`/ko/docs/Web/API/MediaStream_Recording_API`](https://pr26130.review.mdn.allizom.net/ko/docs/Web/API/MediaStream_Recording_API)


<details><summary><b>External URLs</b> (10)</summary>

URL: [`/ko/docs/Web/API/MediaStream_Recording_API`](https://pr26130.review.mdn.allizom.net/ko/docs/Web/API/MediaStream_Recording_API)
Title: `MediaStream Recording API`

  - <https://blog.addpipe.com/mediarecorder-api/> (1 time) (Note! This may be a new URL 👀)
  - <https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/> (1 time) (Note! This may be a new URL 👀)
  - <https://codepen.io/anon/pen/gpmPzm> (1 time) (Note! This may be a new URL 👀)
  - [https://github.com/ai/audio-recorder-polyfill](<https://redirect.github.com/ai/audio-recorder-polyfill>) (1 time) (Note! This may be a new URL 👀)
  - [https://github.com/chrisjohndigital/OpenLang](<https://redirect.github.com/chrisjohndigital/OpenLang>) (2 times) (Note! This may be a new URL 👀)
  - [https://github.com/chrisjohndigital/TutorRoom](<https://redirect.github.com/chrisjohndigital/TutorRoom>) (2 times) (Note! This may be a new URL 👀)
  - [https://github.com/samdutton](<https://redirect.github.com/samdutton>) (1 time) (Note! This may be a new URL 👀)
  - <https://quickblox.github.io/javascript-media-recorder/sample/> (1 time) (Note! This may be a new URL 👀)
  - <https://simpl.info/mediarecorder/> (1 time) (Note! This may be a new URL 👀)

---
URL: [`/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API`](https://pr26130.review.mdn.allizom.net/ko/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
Title: `MediaStream Recording API 사용하기`

  - <https://mdn.github.io/dom-examples/media/web-dictaphone/> (1 time) (Note! This may be a new URL 👀)

</details>

*(comment last updated: 2025-03-13 15:00:25)*
author_association: CONTRIBUTOR
user: login: hakilee
created_at: 2025-03-13T14:38:55Z
body: 안녕하세요, @sunhpark42 님 리뷰 감사합니다.
말씀하신 내용 수정하였는데, 검토 부탁드립니다 :)
author_association: CONTRIBUTOR