VideoFrame 学习篇

VideoFrame是什么

官方的解释是:VideoFrame是js提供的面向webCodecs的端口, 代表了视频的一帧数据

也就是说,学习VideoFrame后,咱们才能更好的入手webCodec

如何创建VideoFrame

  1. MediaStreamTrackProcessor
  2. 可以用构造函数VideoFrame,传入ArrayBuffer, TypedArray, 或者DataView得到。
  3. 可以通过构造函数VideoFrame,传入 SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap 或者 OffscreenCanvas得到。

我们这里主要关注第二种方式,既可以熟悉VideoFrame又能充分了解视频帧在js中的存储形式。

构造RGBA帧

js 复制代码
// html
<p>RGBA</p>
<canvas id="RGBA"></canvas>
// js
let rgbaFrame;
function createRgbaVideoFrame() {
    const pixelSize = 4;
    const init = {timestamp: 0, codedWidth: 320, codedHeight: 200, format: "RGBA"};
    const data = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize);
    for (let x = 0; x < init.codedWidth; x++) {
        for (let y = 0; y < init.codedHeight; y++) {
            let offset = (y * init.codedWidth + x) * pixelSize;
            data[offset] = 0xFF;      // Red
            data[offset + 1] = 0x00;  // Green
            data[offset + 2] = 0x00;  // Blue
            data[offset + 3] = 0xFF; // Alpha
        }
    }
    rgbaFrame = new VideoFrame(data, init);
}
function renderRgbaVideoFrame() {
    const canvasDom = document.getElementById("RGBA");
    const ctx = canvasDom.getContext("2d");
    ctx.drawImage(rgbaFrame, 0, 0)
}

这样我们就创建了一帧红色画面,并且把它渲染在了canvas上。

接下来我们分析一下:一个320 * 200像素的canvas,在RGBA编码下,需要:

320 * 200 * 4 = 256000个字节存放。

这个4分别存放R(红色分量)、G(绿色分量)、B(蓝色分量)、A(透明度)。

并且我们可以知道,其在JS中的存放方式很简单,就是按顺序存放:

上面我们将所有红色分量和透明度设置成255,其他设置为0,便得到了一帧红色的画面。

瞬间帧这个概念就用具体的数据鲜明的表示出来了,不再那么抽象了!!

构造YUV444帧

这么小小的一张图,就要256KB个字节,那咱图像,视频都可以歇歇了,带宽得拉满。咱再来看看其他格式的帧数据。

下面试试YUV444帧,不了解YUV的可以看看这一篇: YUV知识点归纳

js 复制代码
// html
<p>YUV444</p>
<canvas id="YUV444"></canvas>
// js
let yuv444Frame;
function createYuv444VideoFrame() {
    const pixelSize = 4;
    const init = {timestamp: 0, codedWidth: 320, codedHeight: 200, format: "I444"};
    const rgbaData = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize);
    for (let x = 0; x < init.codedWidth; x++) {
        for (let y = 0; y < init.codedHeight; y++) {
            let offset = (y * init.codedWidth + x) * pixelSize;
            rgbaData[offset] = 0xFF;      // Red
            rgbaData[offset + 1] = 0x00;  // Green
            rgbaData[offset + 2] = 0x00;  // Blue
            rgbaData[offset + 3] = 0xFF; // Alpha
        }
    }

    const yuvData = new Uint8Array(init.codedWidth * init.codedHeight * (pixelSize - 1));
    for(let i = 0; i < rgbaData.length; i += pixelSize) {
        const [R, G, B] = rgbaData.slice(i, i + pixelSize);
        yuvData[i / pixelSize] = 0.257 * R + 0.504 * G + 0.098 * B + 16;
        yuvData[i / pixelSize + init.codedWidth * init.codedHeight] = -0.148 * R - 0.291 * G + 0.439 * B + 128;
        yuvData[i / pixelSize + 2 * init.codedWidth * init.codedHeight] = 0.439 * R - 0.368 * G - 0.071 * B + 128;
    }

    yuv444Frame = new VideoFrame(yuvData, init);
}
function renderYuv444VideoFrame() {
    const canvasDom = document.getElementById("YUV444");
    const ctx = canvasDom.getContext("2d");
    ctx.drawImage(rgbaFrame, 0, 0)
}
createYuv444VideoFrame();
renderYuv444VideoFrame();

最终得到:

这里就不解释转化算法了,总之可以发现,YUV444格式,绘制一个相同大小的帧,只需要

320 * 200 * 3 = 192000也就是RGBA格式的四分之三

根据上面的算法,我们还可以发现,YUV444格式的视频存储方式是:

比RGBA格式的数据更好分离!

其他格式帧

可以通过VideoFrame.format查看当前视频帧的编码格式。chrome浏览器支持的格式可以参考相关文档:developer.mozilla.org/en-US/docs/...

我们日常中最常用的还是YUV420,大小是RGBA的八分之三!!

相关推荐
中微子34 分钟前
React状态管理最佳实践
前端
烛阴44 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1234 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js