Web 音视频目录

前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）；
本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。

你可以跳过原理介绍，直接查看 WebAV 示例

素材动画

在视频制作中实现动画跟其他场景略有不同，因为视频是一系列图像帧的组合，因此视频动画就需要计算出每一帧素材的属性值（坐标、大小、角度、不透明度）。

素材动画动画经常用来实现视频水印、转场等功能。

# 定义动画

我们参考 css animation 的使用方式，降低理解成本

素材沿x轴平移 100px 然后返回原点，动画持续 3s

{
  '0%': { x: 0, y: 0 },
  '50%': { x: 100, y: 0 },
  '100%': { x: 0, y: 0 }
}
duration = 3s

# 实现动画

假设输出的视频是 30FPS，写个示例来计算出素材在第二帧的 x 属性值。


const frameCount = 1 

const timestamp = 1 / 30 * 1e6 * frameCount

const step0Duration = 3 * 1e6 * 0.5

const progress = timestamp / step0Duration

const step0DeltaX = 100 - 0

const newX = step0DeltaX * progress

循环以上过程（每次 frameCount 加 1），计算并设置每一帧中素材的属性值，在输出的视频中就能看到素材的动画效果。

图像处理

“图像处理”话题又大又深，作者自知没足够的专业知识讲好，但音视频处理又不可避免会涉及到图像处理的知识，比如美颜、滤镜、特效等等；所以这里只能给读者提供一些方向和思路。

在 Web 中图像处理都是从 HTMLCanvasElement 开始的，canvas 提供了一些 API 可以加工处理图像效果

CanvasRenderingContext2D.globalAlpha
不透明度，渐隐渐现是最简单常见的“特效”
CanvasRenderingContext2D.globalCompositeOperation
控制两个图像的合成模式，使用设计好的素材可以做出比较有意思的效果
WebGL、WebGPU（独立 canvas 之外）
可以实现高级、复杂的特效，如绿幕抠图、美颜滤镜、画质增强等等

关于绿幕抠图的实现，可参考本博客的另一篇文章，下文也有 WebAV 集成绿幕抠图的示例。

WebAV 示例

文末附有 DEMO 体验链接

# 水印动画

import { Combinator, MP4Clip, OffscreenSprite, ImgClip, renderTxt2ImgBitmap } from '@webav/av-cliper'
const spr1 = new OffscreenSprite(
  'spr1',
  new MP4Clip((await fetch(resList[0])).body!)
)

const spr2 = new OffscreenSprite(
  'spr2',
  new ImgClip(
    await renderTxt2ImgBitmap(
      '水印',
      `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`
    )
  )
)

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: 4, iterCount: 1 }
)
spr2.zIndex = 10
spr2.opacity = 0.5


await com.add(spr1, { main: true })
await com.add(spr2, { offset: 0, duration: 5 })

com.ouput()

# 绿幕抠图

import { createChromakey, Combinator, MP4Clip, OffscreenSprite, createImageBitmap } from '@webav/av-cliper'


const chromakey = createChromakey()

const clip = new MP4Clip((await fetch('./public/video/chromakey-test.mp4')).body!)

clip.tickInterceptor = async (_, tickRet) => {
  if (tickRet.video == null) return tickRet
  return {
    ...tickRet,
    
    video: await chromakey(tickRet.video)
  }
}

const spr1 = new OffscreenSprite('spr1', clip)
await spr1.ready

const com = new Combinator({
  1280,
  720,
  bgColor: 'white'
})

await com.add(spr1, { main: true })
await com.add(spr2)

com.ouput()

附录

WebAV 基于 WebCodecs 构建的音视频处理 SDK
WebGL Chromakey 实时绿幕抠图
视频添加水印 DEMO ，点击按钮【mp4 + img】
视频绿幕抠图 DEMO ，点击按钮【mp4(chromaky)】 demo 地址

本文使用文章同步助手同步

WebCodecs 音视频（六）图像素材处理