getDisplayMedia
화면 녹화 스튜디오
해결하는 문제
설치 프로그램 없이 화면과 얼굴을 함께 녹화하고 싶다.
화면, 웹캠, 마이크를 캔버스 한 장에 합쳐 녹화하고 영상 파일로 받습니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것화면, 웹캠, 마이크
브라우저가 하는 일캔버스에 합성하고 소리를 섞기
나오는 것WebM 영상 파일
쓰는 브라우저 기술
getDisplayMediacanvas.captureStreamMediaRecorderMediaStreamAudioDestinationNode
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- frameRate
- mimeType: vp9 또는 vp8
- 웹캠 위치와 크기
자주 막히는 곳
- 휴대폰 브라우저는 화면 녹화를 지원하지 않는다
- 결과가 WebM이라 일부 편집기에서 안 열린다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 녹화 영상을 받아쓰기해 업무 매뉴얼로 정리
- 튜토리얼 문서 자동 작성
웹 서비스
- 설치 없는 강의 녹화 도구
- 오류 신고 영상 첨부
피지컬 AI
- 키오스크 사용 행동 기록
- 실험 과정 기록 장치
넓히는 방법
- FFmpeg.wasm으로 MP4 변환
- 녹화 중 화면에 그리기
- 자막 자동으로 입히기
지원 브라우저
PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
화면을 고르면 내 웹캠 얼굴을 오른쪽 아래 동그라미로 합성해서 마이크 소리와 함께 녹화하고 파일로 받는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md