captureStream
캔버스 영상 인코더
해결하는 문제
캔버스로 만든 애니메이션을 영상 파일로 남기고 싶다.
캔버스에 그린 애니메이션을 그대로 녹화해 영상 파일로 만듭니다. 1화 프레임 분해기의 반대 방향입니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것캔버스 애니메이션
브라우저가 하는 일프레임을 스트림으로 바꿔 녹화
나오는 것WebM 영상 파일
쓰는 브라우저 기술
canvas.captureStreamMediaRecorderWebCodecs VideoEncoder (선택)
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- frameRate
- videoBitsPerSecond: 화질
- mimeType
자주 막히는 곳
- 탭이 숨으면 그리기가 느려져 영상이 끊긴다
- MP4가 필요하면 별도 변환이 필요하다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 데이터를 애니메이션으로 그려 영상 자동 생성
- AI 이미지를 슬라이드 영상으로
웹 서비스
- 카드뉴스 영상 제작기
- 차트 애니메이션 영상
피지컬 AI
- 센서 그래프 타임랩스 영상
- 로봇 시뮬레이션 녹화
넓히는 방법
- FFmpeg.wasm으로 MP4 변환
- WebCodecs로 프레임 단위 정밀 인코딩
- 자막·워터마크 합성
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
캔버스 애니메이션을 captureStream과 MediaRecorder로 녹화해서 영상 파일로 받는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md