Descarga de WebAV - Descarga del código fuente WebAV

WebAV

Datos del sitio web

1.0.0

Descargar

Webav

Inglés | 中文

Webav es un SDK para crear/editar archivos de video en la plataforma web, construido en WebCodecs.

Características

Platforma cruzada: admite correr en los navegadores de borde y cromado, así como en electrones.
Costo cero: utiliza completamente el cálculo del lado del cliente, eliminando los costos del servidor.
Privacidad y seguridad: no se cargan datos de usuario.
Alto rendimiento: 10 a 20 veces más rápido que ffmpeg.wasm.
Fácil de extender: para desarrolladores de desarrolladores, se integra fácilmente con el lienzo y la webaudio para la funcionalidad personalizada.
Tamaño pequeño: aproximadamente 50 kb (minificado + Gzipped, sin sacudir árboles).

Compatible con Chrome 102+

Casos de uso

Procesamiento de audio y archivos de video por lotes, como agregar marcas de agua, doblar e incrustar subtítulos
Creación de productos relacionados con audio y video, como edición de video, transmisión en vivo y producción de animación de video

MANIFESTACIÓN

El proyecto Webav ofrece una variedad de experiencias de demostración rápidas. Visite la página de inicio de demostración para verificar la compatibilidad de su dispositivo actual.

Nota: Los recursos de video de prueba están alojados en las páginas de GitHub, por lo que comenzar una demostración puede requerir algún tiempo de carga de red.

Aquí hay algunas demostraciones de características en las que podría estar interesado:

Video Concatenation
Edición de video
Grabación en vivo
Webav + Canvas + Webaudio decodifica y reproduce video

Introducción de paquetes

clip-clip

av-cliper es el SDK fundamental para el procesamiento de datos de audio y video. Proporciona clases y funciones básicas para ayudar a los desarrolladores a lograr rápidamente sus funcionalidades objetivo.

Aquí hay una breve introducción a la API central de av-cliper :

IClip resume materiales de audio y video, audio y video, imagen, imagen y recursos de subtítulos, y proporciona datos a otros módulos.
Sprite<IClip> Adjunta atributos espaciales y temporales a los materiales, lo que permite el control sobre la posición espacial y el desplazamiento del tiempo del video en el material, logrando colaboración multimaterial, animación y otras funciones.
Combinator puede agregar múltiples sprites y, según sus posiciones, capas y compensaciones de tiempo, sintetizar y salir como un archivo de video.

Demo de código: agregue una marca de agua semitransparente en movimiento a un video

 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

cánvas

av-canvas se basa en las capacidades básicas de av-cliper y proporciona un lienzo que responde a las operaciones de usuario en sprites (arrastre, escala, rotación), lo que permite una implementación rápida de productos como edición de video y estaciones de trabajo de transmisión en vivo.

Demo de código: agregue video y texto al lienzo

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

registro de aves

av-recorder registra MediaStream y emite la transmisión del archivo de video en formato MP4.

Demostración de código: grabar cámara y micrófono, salida de archivo 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

Que contribuye

Ejecutando el proyecto

Clon el proyecto actual localmente
Ejecutar pnpm install && pnpm build en el directorio raíz
Cambiar el directorio al paquete específico (por ejemplo, AV-Cliper) y ejecutar pnpm dev
La ruta es el nombre de archivo en el directorio de demostración, como concat-media.html
Abra la URL de demostración en el navegador, como http://localhost:6066/concat-media.html
Ejecutar pruebas unitarias para el paquete con pnpm test