ดาวน์โหลด WebAV - ดาวน์โหลดซอร์สโค้ด WebAV

WebAV

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

webav

ภาษาอังกฤษ | 中文

Webav เป็น SDK สำหรับ การสร้าง/แก้ไข ไฟล์วิดีโอบนแพลตฟอร์มเว็บที่สร้างขึ้นบน WebCodecs

คุณสมบัติ

Cross-Platform: รองรับการทำงานบนเบราว์เซอร์ Edge และ Chrome รวมถึงในอิเล็กตรอน
ค่าใช้จ่ายเป็นศูนย์: ใช้ประโยชน์จากการคำนวณฝั่งไคลเอ็นต์อย่างเต็มที่ลดต้นทุนเซิร์ฟเวอร์
ความเป็นส่วนตัวและความปลอดภัย: ไม่มีการอัปโหลดข้อมูลผู้ใช้
ประสิทธิภาพสูง: 10 ถึง 20 เท่าเร็วกว่า ffmpeg.wasm
ง่ายต่อการขยาย: เป็นมิตรกับนักพัฒนาสำหรับนักพัฒนาเว็บรวมเข้ากับผืนผ้าใบและ webaudio สำหรับฟังก์ชั่นที่กำหนดเองได้อย่างง่ายดาย
ขนาดเล็ก: ประมาณ 50kb (minified + gzipped โดยไม่ต้องเขย่าต้นไม้)

เข้ากันได้กับ Chrome 102+

ใช้เคส

การประมวลผลไฟล์เสียงและวิดีโอเช่นการเพิ่มลายน้ำการทำสำเนาและการฝังคำบรรยาย
การสร้างผลิตภัณฑ์ที่เกี่ยวข้องกับเสียงและวิดีโอเช่นการแก้ไขวิดีโอการสตรีมสดและการผลิตภาพเคลื่อนไหววิดีโอ

การสาธิต

โครงการ Webav นำเสนอประสบการณ์การสาธิตอย่างรวดเร็วที่หลากหลาย เยี่ยมชมโฮมเพจตัวอย่างเพื่อตรวจสอบความเข้ากันได้ของอุปกรณ์ปัจจุบันของคุณ

หมายเหตุ: ทรัพยากรวิดีโอทดสอบถูกโฮสต์บนหน้า GitHub ดังนั้นการเริ่มต้นการสาธิตอาจต้องใช้เวลาในการโหลดเครือข่าย

นี่คือคุณสมบัติการสาธิตบางอย่างที่คุณอาจสนใจ:

การต่อแต้มวิดีโอ
การแก้ไขวิดีโอ
การบันทึกสด
webav + canvas + decode webaudio และเล่นวิดีโอ

การแนะนำแพ็คเกจ

คลอด

av-cliper เป็น SDK พื้นฐานสำหรับการประมวลผลข้อมูลเสียงและวิดีโอ มันมีคลาสและฟังก์ชั่นพื้นฐานเพื่อช่วยให้นักพัฒนาบรรลุการทำงานของเป้าหมายอย่างรวดเร็ว

นี่คือการแนะนำสั้น ๆ เกี่ยวกับ Core API ของ av-cliper :

IClip Abstracts วัสดุเสียงและวิดีโอ, การแยกวิเคราะห์เสียงและวิดีโอ, ภาพและทรัพยากรคำบรรยายและให้ข้อมูลไปยังโมดูลอื่น ๆ
Sprite<IClip> แนบคุณลักษณะเชิงพื้นที่และเชิงเวลากับวัสดุช่วยให้สามารถควบคุมตำแหน่งเชิงพื้นที่และชดเชยเวลาของวิดีโอในวัสดุได้รับการทำงานร่วมกันแบบหลายวัสดุแอนิเมชั่นและฟังก์ชั่นอื่น ๆ
Combinator สามารถเพิ่มสไปรต์หลายตัวและขึ้นอยู่กับตำแหน่งเลเยอร์และการชดเชยเวลาการสังเคราะห์และเอาต์พุตเป็นไฟล์วิดีโอ

การสาธิตรหัส: เพิ่มลายน้ำกึ่งโปร่งใสที่เคลื่อนไหวลงในวิดีโอ

 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 ขึ้นอยู่กับความสามารถพื้นฐานของ av-cliper และจัดหาผืนผ้าใบที่ตอบสนองต่อการดำเนินงานของผู้ใช้ในสไปรต์ (การลาก, ปรับขนาด, หมุน), เปิดใช้งานการใช้งานผลิตภัณฑ์อย่างรวดเร็วเช่นการแก้ไขวิดีโอและเวิร์กสเตชันสตรีมสด

การสาธิตรหัส: เพิ่มวิดีโอและข้อความลงในผืนผ้าใบ

 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 Records MediaStream และส่งออกสตรีมไฟล์วิดีโอในรูปแบบ MP4

การสาธิตรหัส: บันทึกกล้องและไมโครโฟน, กระแสไฟล์ 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