WebAV下载 - WebAV源代码下载

WebAV

网站数据

1.0.0

下载

Webav

英语| 中文

WebAV是用于在WebCodecs构建的Web平台上创建/编辑视频文件的SDK。

特征

跨平台：支持在边缘和镀铬浏览器以及电子中运行。
零成本：充分利用客户端计算，消除服务器成本。
隐私和安全性：没有上传用户数据。
高性能：比ffmpeg.wasm快10到20倍。
易于扩展：适用于Web开发人员的开发人员友好，可以轻松地与Canvas和Webaudio集成以进行自定义功能。
小尺寸：大约50kb（缩小 + gz + GZZ，而无需摇摇欲坠）。

与Chrome 102+兼容

用例

批处理音频和视频文件处理，例如添加水印，配音和嵌入字幕
构建音频和视频相关产品，例如视频编辑，直播和视频动画制作

演示

WebAV项目提供了各种快速的演示体验。访问演示主页以检查当前设备的兼容性。

注意：测试视频资源托管在GitHub页面上，因此启动演示可能需要一些网络加载时间。

这是您可能感兴趣的一些功能演示：

视频串联
视频编辑
现场录音
Webav + Canvas + WebAudio解码并播放视频

包装简介

av-cliper

av-cliper是用于音频和视频数据处理的基础SDK。它提供基本的类和功能，以帮助开发人员快速实现其目标功能。

这是对av-cliper的核心API的简要介绍：

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的基本功能，并提供了一个帆布，该画布响应了Sprites上的用户操作（拖动，缩放，旋转），从而可以快速实施视频编辑和实时流媒体工作站等产品。

代码演示：将视频和文本添加到画布

 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记录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