브라우저의 재발견

FFmpeg.wasm

업로드 없이 영상 자르고 바꾸기

해결하는 문제

영상을 자르거나 MP4로 바꾸려고 외부 사이트에 올리기 불안하다.

영상 처리 도구 FFmpeg를 웹 어셈블리로 브라우저에 올려 자르기, 변환, 압축을 내 기기 안에서 처리합니다.

체험하기

서버 의존도

외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것영상 파일
브라우저가 하는 일브라우저 속 FFmpeg로 명령 실행
나오는 것잘린·변환된 영상

쓰는 브라우저 기술

WebAssemblyWeb WorkerSharedArrayBuffer

라이브러리와 모델

ffmpeg.wasm

바꿀 수 있는 옵션

  • 자를 구간
  • 출력 형식 (MP4, GIF)
  • 화질·크기

자주 막히는 곳

  • 멀티스레드 버전은 서버에 특별한 보안 헤더(COOP/COEP)가 필요하다
  • 긴 영상은 메모리가 부족하다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 영상에서 자막·요약 뽑기 전 처리
웹 서비스
  • 보안 영상 편집 도구
피지컬 AI
  • 현장 기록 영상 압축

넓히는 방법

  • 화면 녹화(WebM)를 MP4로 변환
  • GIF 만들기

지원 브라우저

PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬일부
아이폰 사파리안 된다

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

ffmpeg.wasm으로 영상 파일을 올리면 원하는 구간만 잘라 MP4로 내려받는 웹페이지를 만들어줘.

같은 분류의 능력

03 미디어 처리에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md