WebAV -Download - WebAV -Quellcode herunterladen

WebAV

Website-Daten

1.0.0

Herunterladen

Webav

Englisch | 中文

WebAV ist ein SDK zum Erstellen/Bearbeiten von Videodateien auf der Webplattform, die auf WebCodecs erstellt wurde.

Merkmale

Plattformübergreifend: Unterstützt das Laufen am Rand- und Chrom-Browser sowie in Elektronen.
Nullkosten: Verwendet die clientseitige Berechnung vollständig und beseitigt die Serverkosten.
Datenschutz und Sicherheit: Es werden keine Benutzerdaten hochgeladen.
Hohe Leistung: 10- bis 20 -mal schneller als ffmpeg.gasmus.
Einfach zu erweitern: Entwickler-freundlich für Webentwickler, integriert sich problemlos in Canvas und Webaudio für benutzerdefinierte Funktionen.
Kleine Größe: Ungefähr 50 KB (Minified + Gziped, ohne Baumschütteln).

Kompatibel mit Chrome 102+

Anwendungsfälle

Batch -Audio- und Videodateiverarbeitung, z. B. Hinzufügen von Wasserzeichen, Synchronisation und Einbettung von Untertiteln
Erstellen von Audio- und Videobezogenen Produkten wie Videobearbeitung, Live -Streaming und Videoanimationsproduktion

DEMO

Das WebAV -Projekt bietet eine Vielzahl schneller Demo -Erlebnisse. Besuchen Sie die Demo -Homepage, um die Kompatibilität Ihres aktuellen Geräts zu überprüfen.

Hinweis: Die Testvideoressourcen werden auf Github -Seiten gehostet. Daher ist das Starten einer Demo möglicherweise eine gewisse Ladezeit für Netzwerk.

Hier sind einige Feature -Demos, an denen Sie interessiert sein könnten:

Video -Verkettung
Videobearbeitung
Live -Aufnahme
Webav + Canvas + Webaudio decodieren und Video abspielen

Pakete Einführung

AV-Cliper

av-cliper ist der grundlegende SDK für die Verarbeitung von Audio- und Videodaten. Es bietet grundlegende Klassen und Funktionen, um Entwicklern dabei zu helfen, ihre Zielfunktionen schnell zu erreichen.

Hier ist eine kurze Einführung in die Kern-API von av-cliper :

IClip abstraktiert Audio- und Video -Materialien ab, analysiert Audio- und Video-, Bild- und Untertitel -Ressourcen und liefert Daten an andere Module.
Sprite<IClip> findet räumliche und zeitliche Attribute an die Materialien, sodass die räumliche Position und Zeitversetzt des Videos im Material kontrolliert werden können, wobei die Zusammenarbeit, Animation und andere Funktionen mit mehreren materiellen Funktionen erreicht werden.
Combinator kann mehrere Sprites hinzufügen und basierend auf ihren Positionen, Ebenen und Zeitversetzungen synthetisieren und als Videodatei ausgeben.

Code-Demo: Fügen Sie einem Video eine sich bewegende halbtransparente Wasserzeichen hinzu

 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 stützt sich auf die grundlegenden Funktionen von av-cliper und bietet eine Leinwand, die auf Benutzeroperationen bei Sprites (Draging, Skalierung, Drehen) reagiert und eine schnelle Implementierung von Produkten wie Videobearbeitung und Live-Streaming-Workstations ermöglicht.

Code -Demo: Video und Text zur Leinwand hinzufügen

 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()

AVORDORDER

av-recorder zeichnet MediaStream auf und gibt den Videodateistrom im MP4-Format aus.

Code -Demo: Kamera und Mikrofon aufnehmen, MP4 -Dateistrom ausgeben

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

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

Beitragen

Das Projekt ausführen

Klonen Sie das aktuelle Projekt lokal
Führen Sie pnpm install && pnpm build im Stammverzeichnis aus
Wechseln Sie das Verzeichnis in das spezifische Paket (z. B. AV-Cliper) und führen Sie pnpm dev aus
Der Pfad ist der Dateiname im Demo-Verzeichnis, wie z. B. concat-media.html
Öffnen Sie die Demo-URL im Browser wie http://localhost:6066/concat-media.html
Führen Sie Unit -Tests für das Paket mit pnpm test aus