Download WebAV - Download de código fonte WebAV

WebAV

Dados do site

1.0.0

Baixar

Webav

Inglês | 中文

O Webav é um SDK para criar/editar arquivos de vídeo na plataforma da Web, criados em WebCodecs.

Características

Plataforma cruzada: suporta a corrida na borda e os navegadores cromados, bem como no elétron.
Custo zero: utiliza totalmente a computação do lado do cliente, eliminando os custos do servidor.
Privacidade e segurança: nenhum dado do usuário é carregado.
Alto desempenho: 10 a 20 vezes mais rápido que o ffmpeg.wasm.
Fácil de estender: Professionista para desenvolvedores da Web, se integra facilmente à Canvas e Webudio para funcionalidade personalizada.
Tamanho pequeno: aproximadamente 50kb (Minificado + Gziped, sem troca de árvores).

Compatível com o Chrome 102+

Casos de uso

Processamento de arquivos de áudio e vídeo em lote, como adicionar marcas d'água, dublagem e incorporação de legendas
Construindo produtos relacionados a áudio e vídeo, como edição de vídeo, transmissão ao vivo e produção de animação por vídeo

Demonstração

O projeto Webav oferece uma variedade de experiências de demonstração rápida. Visite a página inicial da demonstração para verificar a compatibilidade do seu dispositivo atual.

NOTA: Os recursos de vídeo de teste estão hospedados nas páginas do Github, portanto, iniciar uma demonstração pode exigir algum tempo de carregamento de rede.

Aqui estão algumas demos de recurso em que você pode estar interessado:

Concatenação em vídeo
Edição de vídeo
Gravação ao vivo
Webav + Canvas + Webudio decodificar e reproduzir vídeo

Introdução de pacotes

cliper av

av-cliper é o SDK fundamental para processamento de dados de áudio e vídeo. Ele fornece classes e funções básicas para ajudar os desenvolvedores a alcançar rapidamente suas funcionalidades -alvo.

Aqui está uma breve introdução à API principal do av-cliper :

IClip abstrai materiais de áudio e vídeo, analisa os recursos de áudio e vídeo, imagem e legenda e fornece dados para outros módulos.
Sprite<IClip> anexa atributos espaciais e temporais aos materiais, permitindo o controle sobre a posição espacial e o deslocamento do tempo do vídeo no material, alcançando colaboração, animação e outras funções de vários materiais.
Combinator pode adicionar vários sprites e, com base em suas posições, camadas e compensações de tempo, sintetize e saindo como um arquivo de vídeo.

Código Demo: Adicione uma marca d'água semi-transparente em movimento a um vídeo

 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 conta com os recursos básicos do av-cliper e fornece uma tela que responde às operações do usuário em sprites (arrastando, escalando, rotativo), permitindo a implementação rápida de produtos como edição de vídeo e estações de trabalho ao vivo.

Código Demo: Adicione vídeo e texto à tela

 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 av

av-recorder registra MediaStream e produz o fluxo de arquivos de vídeo no formato MP4.

Demonstração de código: Câmera de gravação e microfone, saída de arquivo MP4 de saída

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

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

Contribuindo

Executando o projeto

Clone o projeto atual localmente
Execute pnpm install && pnpm build no diretório raiz
Alterar diretório para o pacote específico (por exemplo, AV-cliper) e executar pnpm dev
O caminho é o nome do arquivo no diretório de demonstração, como concat-media.html
Abra o URL da demonstração no navegador, como http://localhost:6066/concat-media.html
Execute testes de unidade para o pacote com pnpm test