WebAV下載 - WebAV源代碼下載

WebAV

網站數據

1.0.0

下載

Webav

英語| 中文

WebAV是用於在WebCodecs構建的Web平台上創建/編輯視頻文件的SDK。

特徵

跨平台：支持在邊緣和鍍鉻瀏覽器以及電子中運行。
零成本：充分利用客戶端計算，消除服務器成本。
隱私和安全性：沒有上傳用戶數據。
高性能：比ffmpeg.wasm快10到20倍。
易於擴展：適用於Web開發人員的開發人員友好，可以輕鬆地與Canvas和Webaudio集成以進行自定義功能。
小尺寸：大約50kb（縮小 + gz + GZZ，而無需搖搖欲墜）。

與Chrome 102+兼容

用例

批處理音頻和視頻文件處理，例如添加水印，配音和嵌入字幕
構建音頻和視頻相關產品，例如視頻編輯，直播和視頻動畫製作

演示

WebAV項目提供了各種快速的演示體驗。訪問演示主頁以檢查當前設備的兼容性。

注意：測試視頻資源託管在GitHub頁面上，因此啟動演示可能需要一些網絡加載時間。

這是您可能感興趣的一些功能演示：

視頻串聯
視頻編輯
現場錄音
Webav + Canvas + WebAudio解碼並播放視頻

包裝簡介

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的基本功能，並提供了一個帆布，該畫布響應了Sprites上的用戶操作（拖動，縮放，旋轉），從而可以快速實施視頻編輯和實時流媒體工作站等產品。

代碼演示：將視頻和文本添加到畫布

 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