WebAV 다운로드 - WebAV 소스 코드 다운로드

WebAV

웹사이트 데이터

1.0.0

다운로드

Webav

영어 | 中文

Webav는 웹 플랫폼에서 WebCodecs를 기반으로하는 비디오 파일을 작성/편집하기 위한 SDK입니다.

특징

크로스 플랫폼 : 전자뿐만 아니라 Edge 및 Chrome 브라우저에서 실행되는 지원.
제로 비용 : 클라이언트 측 계산을 완전히 활용하여 서버 비용을 제거합니다.
개인 정보 및 보안 : 사용자 데이터가 업로드되지 않습니다.
고성능 : FFMPEG.wasm보다 10 ~ 20 배 빠릅니다.
쉽게 확장 할 수 있습니다 : 웹 개발자를위한 개발자 친화적 인 개발자 친화적이며 사용자 정의 기능을 위해 캔버스 및 WebAudio와 쉽게 통합됩니다.
작은 크기 : 약 50KB (나무 흔들림없이 미니딩 + Gzipped).

Chrome 102+와 호환됩니다

사용 사례

워터 마크 추가, 더빙 및 자막 임베딩과 같은 배치 오디오 및 비디오 파일 처리
비디오 편집, 라이브 스트리밍 및 비디오 애니메이션 제작과 같은 오디오 및 비디오 관련 제품 구축

데모

WebAV 프로젝트는 다양한 빠른 데모 경험을 제공합니다. 현재 장치의 호환성을 확인하려면 데모 홈페이지를 방문하십시오.

참고 : 테스트 비디오 리소스는 GitHub 페이지에서 호스팅되므로 데모를 시작하려면 일부 네트워크로드 시간이 필요할 수 있습니다.

다음은 관심있는 기능 데모입니다.

비디오 연결
비디오 편집
라이브 녹음
Webav + Canvas + Webaudio Decode 및 비디오 재생

패키지 소개

AV-Cliper

av-cliper 는 오디오 및 비디오 데이터 처리를위한 기본 SDK입니다. 개발자가 목표 기능을 신속하게 달성 할 수 있도록 기본 클래스와 기능을 제공합니다.

av-cliper 의 핵심 API에 대한 간단한 소개는 다음과 같습니다.

IClip 오디오 및 비디오 자료, 오디오 및 비디오, 이미지 및 자막 리소스를 구문 분석하고 다른 모듈에 데이터를 제공합니다.
Sprite<IClip> 은 재료에 공간 및 시간적 속성을 첨부하여 자료에서 비디오의 공간 위치 및 시간 오프셋을 제어하여 다중 재료 공동 작업, 애니메이션 및 기타 기능을 달성 할 수 있습니다.
Combinator 여러 스프라이트를 추가 할 수 있으며 위치, 레이어 및 시간 오프셋을 기준으로 비디오 파일로 합성 및 출력을 기반으로합니다.

코드 데모 : 동영상에 이동 반영식 워터 마크 추가

 import {
  ImgClip ,
  MP4Clip ,
  OffscreenSprite ,
  renderTxt2ImgBitmap ,
  Combinator ,
} from '@webav/av-cliper' ;

const spr1 = new OffscreenSprite (
  new MP4Clip ( ( await fetch ( './video/bunny.mp4' ) ) . body ) ,
) ;
const spr2 = new OffscreenSprite (
  new ImgClip (
    await renderTxt2ImgBitmap (
      'Watermark' ,
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;` ,
    ) ,
  ) ,
) ;
spr2 . time = { offset : 0 , duration : 5e6 } ;
spr2 . setAnimation (
  {
    '0%' : { x : 0 , y : 0 } ,
    '25%' : { x : 1200 , y : 680 } ,
    '50%' : { x : 1200 , y : 0 } ,
    '75%' : { x : 0 , y : 680 } ,
    '100%' : { x : 0 , y : 0 } ,
  } ,
  { duration : 4e6 , iterCount : 1 } ,
) ;
spr2 . zIndex = 10 ;
spr2 . opacity = 0.5 ;

const com = new Combinator ( {
  width : 1280 ,
  height : 720 ,
} ) ;

await com . addSprite ( spr1 ) ;
await com . addSprite ( spr2 ) ;

com . output ( ) ; // => ReadableStream

av-canvas

av-canvas av-cliper 의 기본 기능에 의존하며 스프라이트의 사용자 작업 (드래그, 스케일링, 회전)의 사용자 작업에 응답하는 캔버스를 제공하여 비디오 편집 및 라이브 스트리밍 워크 스테이션과 같은 제품을 빠르게 구현할 수 있습니다.

코드 데모 : 캔버스에 비디오와 텍스트를 추가하십시오

 import {
  ImgClip ,
  MP4Clip ,
  VisibleSprite ,
  renderTxt2ImgBitmap ,
} from '@webav/av-cliper' ;
import { AVCanvas } from '@webav/av-canvas' ;

const avCvs = new AVCanvas ( document . querySelector ( '#app' ) , {
  width : 1280 ,
  height : 720 ,
} ) ;

const spr1 = new VisibleSprite (
  new MP4Clip ( ( await fetch ( './video/bunny.mp4' ) ) . body ) ,
) ;
const spr2 = new VisibleSprite (
  new ImgClip (
    await renderTxt2ImgBitmap (
      'Watermark' ,
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;` ,
    ) ,
  ) ,
) ;

await avCvs . add ( spr1 ) ;
await avCvs . add ( spr2 ) ;

// Export user-edited materials into a video
// (await avCvs.createCombinator()).output()

// Capture stream from the canvas (MediaStream) for live streaming or video recording
// avCvs.captureStream()

av-recorder

av-recorder MediaStream 기록하고 MP4 형식으로 비디오 파일 스트림을 출력합니다.

코드 데모 : 레코드 카메라 및 마이크, 출력 MP4 파일 스트림

 import { AVRecorder } from '@webav/av-recorder' ;
const mediaStream = await navigator . mediaDevices . getUserMedia ( {
  video : true ,
  audio : true ,
} ) ;

const recorder = new AVRecorder ( mediaStream ) ;
recorder . start ( ) ; // => ReadableStream