WebAV

Webav

الإنجليزية | 中文

Webav هي SDK لإنشاء/تحرير ملفات الفيديو على النظام الأساسي على الويب ، مبنية على WebCodecs.

سمات

• منصة المتقاطع: يدعم تشغيل متصفحات الحافة والكروم ، وكذلك في الإلكترون.
• التكلفة الصفر: يستخدم بالكامل حساب من جانب العميل ، والقضاء على تكاليف الخادم.
• الخصوصية والأمان: لا يتم تحميل بيانات المستخدم.
• الأداء العالي: 10 إلى 20 مرة أسرع من FFMPEG.WASM.
• من السهل تمديده: صديق للمطورين لمطوري الويب ، ويتكامل بسهولة مع القماش و Webaudio للحصول على وظائف مخصصة.
• الحجم الصغير: ما يقرب من 50 كيلو بايت (مصغرة + gzipped ، دون تهزه الأشجار).

متوافق مع Chrome 102+

استخدام الحالات

• معالجة ملفات الصوت والفيديو الدُفعات ، مثل إضافة العلامات المائية ، ودبلجة ، وتضمين ترجمات
• بناء المنتجات الصوتية والفيديو ، مثل تحرير الفيديو ، البث المباشر ، وإنتاج الرسوم المتحركة للفيديو

العرض التوضيحي

يقدم مشروع Webav مجموعة متنوعة من التجارب التجريبية السريعة. قم بزيارة الصفحة الرئيسية التجريبية للتحقق من توافق جهازك الحالي.

ملاحظة: يتم استضافة موارد فيديو الاختبار على صفحات GitHub ، لذلك قد يتطلب بدء عرض تجريبي بعض وقت تحميل الشبكة.

فيما يلي بعض العروض التوضيحية التي قد تكون مهتمًا بها:

• تسلسل الفيديو
• تحرير الفيديو
• تسجيل مباشر
• Webav + Canvas + Webaudio فك تشفير الفيديو وتشغيل الفيديو

مقدمة الحزم

AV-Cliber

av-cliper هو SDK التأسيسي لمعالجة بيانات الصوت والفيديو. يوفر الفصول والوظائف الأساسية لمساعدة المطورين على تحقيق وظائفهم المستهدفة بسرعة.

فيما يلي مقدمة موجزة عن واجهة برمجة التطبيقات الأساسية لـ av-cliper :

• ملخصات IClip تقوم بمواد الصوت والفيديو ، وموارد الصوت والفيديو والصور والترجم ، وتوفر بيانات إلى وحدات أخرى.
• يربط 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 

المساهمة

تشغيل المشروع

1. استنساخ المشروع الحالي محليا
2. تنفيذ pnpm install && pnpm build في دليل الجذر
3. قم بتغيير الدليل إلى الحزمة المحددة (على سبيل المثال ، AV-Cliper) وقم بتشغيل pnpm dev
4. المسار هو اسم الملف في الدليل التجريبي ، مثل concat-media.html
5. افتح عنوان URL التجريبي في المتصفح ، مثل http://localhost:6066/concat-media.html
6. قم بتشغيل اختبارات الوحدة للحزمة مع pnpm test

تشغيل موقع الويب

1. استنساخ المشروع الحالي محليا
2. تنفيذ pnpm install && pnpm build في دليل الجذر
3. تغيير الدليل إلى doc-site وتشغيل pnpm dev
4. اتبع مطالبات المحطة لزيارة عنوان URL المحدد

إذا كنت مبتدئًا في حقل الصوت والفيديو على الويب ، فيمكنك البدء بتعلم الأساسيات:

مقالات للمؤلف
الرسم البياني لمعرفة الصوت والفيديو

المؤلف الراعي

إذا كان هذا المشروع مفيدًا لك ، فيرجى رعاية المؤلف لشاي الحليب ：

paypal.me