Unduh WebAV - Unduh Kode Sumber WebAV

WebAV

Data situs web

1.0.0

Unduh

Webav

Bahasa Inggris | 中文

WebAV adalah SDK untuk membuat/mengedit file video di platform web, dibangun di webcodec.

Fitur

Cross-Platform: Dukungan yang berjalan di browser tepi dan krom, serta dalam elektron.
Nol Biaya: sepenuhnya menggunakan perhitungan sisi klien, menghilangkan biaya server.
Privasi dan Keamanan: Tidak ada data pengguna yang diunggah.
Kinerja Tinggi: 10 hingga 20 kali lebih cepat dari ffmpeg.wasm.
Mudah diperluas: Ramah pengembang untuk pengembang web, dengan mudah diintegrasikan dengan Canvas dan WebAudio untuk fungsionalitas khusus.
Ukuran kecil: sekitar 50kb (Minified + Gzipped, tanpa goncangan pohon).

Kompatibel dengan krom 102+

Menggunakan kasus

Pemrosesan file audio dan video batch, seperti menambahkan tanda air, dubbing, dan menanamkan subtitle
Membangun Produk Terkait Audio dan Video, seperti pengeditan video, streaming langsung, dan produksi animasi video

Demo

Proyek WebAV menawarkan berbagai pengalaman demo cepat. Kunjungi beranda demo untuk memeriksa kompatibilitas perangkat Anda saat ini.

Catatan: Sumber daya video uji di -host di halaman GitHub, jadi memulai demo mungkin memerlukan beberapa waktu pemuatan jaringan.

Berikut adalah beberapa demo fitur yang mungkin Anda minati:

Gabungan video
Pengeditan video
Rekaman Langsung
Webav + Canvas + WebAudio mendekode dan putar video

PENDAHULUAN PAKET

AV-CLIPER

av-cliper adalah SDK dasar untuk pemrosesan data audio dan video. Ini menyediakan kelas dan fungsi dasar untuk membantu pengembang dengan cepat mencapai fungsionalitas target mereka.

Berikut adalah pengantar singkat untuk API inti dari av-cliper :

IClip Abstrak Bahan audio dan video, parses audio dan video, gambar, dan subtitle sumber daya, dan menyediakan data ke modul lain.
Sprite<IClip> melampirkan atribut spasial dan temporal untuk material, memungkinkan kontrol atas posisi spasial dan waktu offset video dalam materi, mencapai kolaborasi multi-bahan, animasi, dan fungsi lainnya.
Combinator dapat menambahkan beberapa sprite, dan berdasarkan posisi, lapisan, dan offset waktu mereka, mensintesis dan output sebagai file video.

Demo Kode: Tambahkan tanda air semi-transparan bergerak ke 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

AV-CANVAS

av-canvas bergantung pada kemampuan dasar av-cliper dan menyediakan kanvas yang menanggapi operasi pengguna pada sprite (menyeret, penskalaan, berputar), memungkinkan implementasi cepat produk seperti pengeditan video dan workstation streaming langsung.

Demo kode: Tambahkan video dan teks ke kanvas

 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-Recorder

av-recorder merekam MediaStream dan mengeluarkan aliran file video dalam format MP4.

Demo Kode: Rekam Kamera dan Mikrofon, Output MP4 File Stream

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

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