Mic Capture

MSK Mic Capture는 브라우저 마이크 캡처 primitive입니다. 장치 열거/선택, 권한·에러 진단, MediaRecorder 녹음을 제공합니다. storage-agnostic — 녹음 결과 Blob만 넘겨주고 저장/업로드는 사용하는 쪽이 담당합니다.

Preview

실제 마이크에 접근합니다. 오디오는 브라우저 내에서만 처리되며 어디에도 전송되지 않습니다.

Data API

<div data-msk-mic-capture
     data-msk-mic-default-label="기본 마이크"
     data-msk-mic-generic-label="마이크 :index">
  <select data-msk-mic-select></select>
  <button type="button" data-msk-mic-refresh>↻</button>
</div>

initMicCaptures()가 자동 바인딩하며, root.__mskMic로 controller에 접근합니다. 직접 생성할 수도 있습니다:

const mic = window.MSK.ui.micCapture.create({
  onDevices(mics, selected) { /* <select> 채우기 */ },
  onError(code, err) { /* code: blocked | blocked_system | not_found | in_use | unsupported | unknown */ },
  onRecording(blob, mime) { /* blob 업로드 */ },
});

mic.prime();                    // 권한 요청 + 기기명 노출
await mic.start();              // 녹음 시작
const blob = await mic.stop();  // 정지 → Blob
mic.release();                  // 트랙 정지

Events

root.addEventListener('msk:mic-recording', (event) => {
  // event.detail.blob: Blob, event.detail.mime: string
  upload(event.detail.blob);
});
// 그 외: msk:mic-devices, msk:mic-error, msk:mic-state

에러 진단

권한 실패를 브라우저-사이트 차단(blocked) 과 OS/전역 차단(blocked_system) 으로 Permissions API를 통해 구분합니다. 사이트 설정은 "허용"인데도 Windows/macOS 설정에서 막혀 있는 흔한 경우를 사용자에게 정확히 안내할 수 있습니다.

에러 코드별 문구는 4개 언어로 제공됩니다: __('msk-ui::media.mic_blocked'), mic_blocked_system, mic_not_found, mic_in_use, mic_unsupported.

보안 (Permissions-Policy)

마이크는 secure-by-default입니다. 마이크를 사용하는 프로젝트만 .env에 CORE_PP_MICROPHONE=(self)를 선언하면 됩니다. 그 외 프로젝트는 microphone=()로 차단되어 안전합니다.

Accessibility

캡처는 HTTPS(secure context)에서만 동작합니다.
오디오 데이터는 브라우저 내에서만 처리되며 소비처가 명시적으로 업로드할 때만 전송됩니다.

Preview​

Data API​

Events​

에러 진단​

보안 (Permissions-Policy)​

Accessibility​