TutuCut

임베드형 동영상 편집기

코드 한 줄로 타임라인 동영상 편집기를 내 사이트에.

임베드 위젯 라이브 체험 연동 코드 보기 공개 키 생성(심사 없음)

TutuCut의 임베드 컴포넌트: 코드 한 줄로 타임라인 방식의 동영상 편집기(컷 편집, 자막, 효과, 전환)를 어떤 사이트에나 넣을 수 있습니다. 테마·도구·내보내기를 설정할 수 있고 도메인 허용/차단 목록을 지원하며, 편집기 업데이트는 자동으로 반영됩니다.

script 태그 한 줄이면 TutuCut의 타임라인 편집기를 여러분의 페이지에 둘 수 있습니다. 방문자는 그 자리에서 컷 편집, 자막, 효과를 넣고, 「완료」를 누르면 현재 화면이 이미지로 onSave 콜백을 통해 페이지에 전달됩니다.

복사해 붙여넣기 · 사이트의 </body> 앞에 배치 
<script src="https://tutucut.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#cc-editor" defer></script>

pk_live_YOUR_KEY 를 콘솔에서 직접 생성한 공개 키로 바꾸세요(등록 사용자라면 누구나, 심사 없이 즉시 적용). 컨테이너 #cc-editor 에는 너비와 높이가 필요합니다. 연동 시 임베드 URL을 등록하고(화이트리스트, 로컬 개발은 localhost), 등록한 사이트에서만 표시됩니다.

라이브 체험

아래 버튼을 클릭하면 이 페이지에서 임베드된 영상 편집기를 바로 체험할 수 있습니다.

JS API(콜백 / 커스터마이징이 필요할 때)

<script src="https://tutucut.com/embed.js"></script>
<script>
  const cc = TutuCut.mount('#cc-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = current frame image (base64)
      upload(file.dataUrl);
    }
  });
  cc.open('https://your.site/clip.mp4'); // import a media clip
</script>

전체 매개변수 레퍼런스

매개변수타입설명
keystring공개 키 pk_(콘솔에서 생성). 필수.
theme'auto'|'light'|'dark'테마; auto는 호스트/시스템의 라이트-다크 모드를 따릅니다.
hideHeaderboolean상단 바 숨김(자체 UI를 만들고 export()로 내보낼 때).
hideOpenboolean"미디어 열기" 버튼 숨김.
hideExportboolean"내보내기·다운로드" 버튼 숨김.
saveTextstring"완료" 버튼 문구(기본값 "완료 후 반환", 16자 이내).

메서드

  • cc.open(url, name?)미디어 클립을 타임라인으로 가져오기(영상/오디오/이미지 url 또는 dataURL).
  • cc.export(format?)현재 프레임 내보내기 → Promise<{dataUrl,mime,size}>.
  • cc.setTheme('dark')런타임에 테마를 전환합니다.
  • cc.destroy()위젯 언마운트(iframe 제거).

이벤트 콜백

  • onReady()편집기가 준비되었습니다.
  • onSave(file)사용자가 "완료"를 누름 → file.dataUrl은 현재 프레임 이미지.
  • onError(e)e.message는 사람이 읽기 쉬운 메시지(미활성/권한 없음/로드 실패).
  • onClose()전체 화면 오버레이가 닫혔습니다.

보안 · 자동 업데이트

  • · 셀프 발급, 자동 승인: 등록 사용자라면 콘솔에서 사이트 이름 + 임베드 URL을 등록하면 키를 받고 즉시 적용됩니다.
  • · 키는 공개됩니다. 오용은 등록 URL 허용/차단 목록으로 방지합니다(차단 우선). 미등록 도메인은 등록 안내와 함께 거부되며, 언제든지 켜고 끌 수 있습니다.
  • · 실제 오리진 통계: 로드마다 Origin 기준으로 집계(차단된 것도 포함)하며, 콘솔에서 오리진별 상세를 확인하고 미등록 도메인을 한 번에 화이트리스트에 추가할 수 있습니다.
  • · 편집기는 TutuCut 자체 도메인에서 실행됩니다(격리). 귀하의 페이지는 어떤 TutuCut 자격 증명에도 접근할 수 없고, 방문자의 TutuCut 비공개 작품이 임베드 위젯에 나타나지 않습니다.
  • · 위젯은 TutuCut가 자체 호스팅하고 자동 업데이트합니다 — 기능 업그레이드에도 코드 변경이 필요 없고 유지보수가 전혀 없습니다.

자주 묻는 질문

내 페이지의 교차 출처 격리 설정에 영향을 주나요?
아니요. 편집기는 TutuCut 자체 도메인의 iframe에서 돌아가고 SharedArrayBuffer가 필요 없으므로, 여러분의 페이지에 COOP / COEP 헤더를 넣을 필요가 없습니다.
방문자의 동영상이 여러분 서버로 올라가나요?
아니요. 편집은 방문자 자신의 브라우저에서 이루어지고, 임베드 모드에서는 초안도 남기지 않습니다. 여러분의 페이지가 받는 것은 방문자가 「완료」를 눌렀을 때 넘기는 이미지뿐입니다.
키는 어떻게 받나요?
로그인한 뒤 콘솔에서 사이트 이름과 임베드할 URL을 등록하면 공개 키가 바로 발급됩니다. 키 자체는 공개 정보이며, 도용은 등록한 URL 허용/차단 목록으로 막습니다(차단 우선).

관련 도구