WebAV

Webav

Anglais | 中文

Webav est un SDK pour créer / modifier des fichiers vidéo sur la plate-forme Web, construit sur WebCodecs.

Caractéristiques

• Plate-plateforme: prend en charge la course sur le bord et les navigateurs chromés, ainsi que dans l'électron.
• Coût zéro: utilise entièrement le calcul côté client, éliminant les coûts du serveur.
• Confidentialité et sécurité: aucune donnée utilisateur n'est téléchargée.
• Haute performance: 10 à 20 fois plus rapide que ffmpeg.wasm.
• Facile à étendre: les développeurs pour les développeurs Web, s'intègre facilement à Canvas et WebAudio pour les fonctionnalités personnalisées.
• Petite taille: environ 50 Ko (minifié + gzipped, sans trembler).

Compatible avec Chrome 102+

Cas d'utilisation

• Traitement de fichiers audio et vidéo, tels que l'ajout de filigranes, de doublage et d'intégration des sous-titres
• Construire des produits audio et vidéo, tels que l'édition vidéo, le streaming en direct et la production d'animation vidéo

Démo

Le projet Webav offre une variété d'expériences de démonstration rapides. Visitez la page d'accueil de démonstration pour vérifier la compatibilité de votre appareil actuel.

Remarque: Les ressources vidéo de test sont hébergées sur les pages GitHub, donc le démarrage d'une démo peut nécessiter un certain temps de chargement réseau.

Voici quelques démos de fonctionnalités qui pourraient vous intéresser:

• Concaténation vidéo
• Édition vidéo
• Enregistrement en direct
• Webav + canvas + webaudio décode et lire la vidéo

Packages Introduction

clinateur AV

av-cliper est le SDK fondamental pour le traitement des données audio et vidéo. Il fournit des classes et des fonctions de base pour aider les développeurs à atteindre rapidement leurs fonctionnalités cibles.

Voici une brève introduction à l'API principale de av-cliper :

• IClip résume des matériaux audio et vidéo, analyses des ressources audio et vidéo, image et sous-titre, et fournit des données à d'autres modules.
• Sprite<IClip> attache des attributs spatiaux et temporels aux matériaux, permettant le contrôle de la position spatiale et du décalage du temps de la vidéo dans le matériau, atteignant la collaboration multi-matériaux, l'animation et d'autres fonctions.
• Combinator peut ajouter plusieurs sprites et en fonction de leurs positions, couches et compensations de temps, synthétiser et sortir en tant que fichier vidéo.

Démo de code: ajouter un filigrane semi-transparent en mouvement vers une vidéo

 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 s'appuie sur les capacités de base de av-cliper et fournit une toile qui répond aux opérations utilisateur sur les sprites (glisser, mise à l'échelle, rotation), permettant une mise en œuvre rapide de produits comme l'édition vidéo et les postes de travail en streaming en direct.

Demo de code: ajouter la vidéo et le texte à la toile

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

enregistre AV

av-recorder enregistre MediaStream et publie le flux de fichiers vidéo au format MP4.

Demo de code: enregistrer la caméra et le microphone, sortie de fichier MP4 de sortie

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

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

Contributif

Exécuter le projet

1. Cloner le projet actuel localement
2. Exécuter pnpm install && pnpm build dans le répertoire racine
3. Changer le répertoire en package spécifique (par exemple, AV-Cliper) et exécuter pnpm dev
4. Le chemin est le nom de fichier dans le répertoire de concat-media.html
5. Ouvrez l'URL de démonstration dans le navigateur, tel que http://localhost:6066/concat-media.html
6. Exécutez des tests unitaires pour le package avec pnpm test

Exécution du site Webav

1. Cloner le projet actuel localement
2. Exécuter pnpm install && pnpm build dans le répertoire racine
3. Changer le répertoire en doc-site et exécuter pnpm dev
4. Suivez les invites du terminal pour visiter l'URL spécifiée

Si vous êtes un débutant dans le domaine de l'audio et de la vidéo Web, vous pouvez commencer par apprendre les bases:

Articles de l'auteur
Graphique de connaissances audio et vidéo

Auteur sponsor

Si ce projet vous a été utile, veuillez parrainer l'auteur à un thé au lait ：）

Paypal.me