WebAVダウンロードWebAVソースコードのダウンロード

WebAV

ウェブサイトデータ

1.0.0

ダウンロード

webav

英語| 中文

Webavは、Webプラットフォーム上でビデオファイルを作成/編集するためのSDKです。これは、WebCodecsで構築されています。

特徴

クロスプラットフォーム：エッジおよびクロムブラウザでのランニング、および電子をサポートします。
ゼロコスト：クライアント側の計算を完全に利用し、サーバーコストを排除します。
プライバシーとセキュリティ：ユーザーデータはアップロードされていません。
高性能：ffmpeg.wasmの10〜20倍高速。
拡張が簡単：Web開発者にとって開発者に優しい、カスタム機能のためにCanvasやWebAudioと簡単に統合できます。
小さいサイズ：約50kb（ミニファイド + gzipted、ツリーシェーキングなし）。

Chrome 102+と互換性があります

ユースケース

透かしの追加、吹き替え、サブタイトルの埋め込みなど、バッチオーディオおよびビデオファイル処理
ビデオ編集、ライブストリーミング、ビデオアニメーション制作など、オーディオおよびビデオ関連製品の構築

デモ

WebAVプロジェクトは、さまざまなクイックデモエクスペリエンスを提供します。デモのホームページにアクセスして、現在のデバイスの互換性を確認してください。

注：テストビデオリソースはGitHubページでホストされているため、デモを開始するにはネットワークの読み込み時間が必要になる場合があります。

興味のあるいくつかの機能デモは次のとおりです。

ビデオの連結
ビデオ編集
ライブ録音
Webav + Canvas + WebAudio Decode and Gideyを再生します

パッケージの紹介

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レコーダー

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