VideoFrame renderer on webgl which accepts various pixel formats
npm install video-frame-rendererVideoFrame objects on WebGL (GPU) while supporting various pixel formats. This library is particularly useful for applications requiring high-efficiency video processing in web environments, as it optimizes the rendering pathway to utilize GPU capabilities for pixel format conversion and rendering.ts
type Renderer = {
draw: (frame: RenderFrame) => true | Error;
destroy: () => void;
};type RenderFrame = {
data: ArrayBuffer;
codedWidth: number;
codedHeight: number;
format: VideoPixelFormat;
timestamp?: number;
layout?: PlaneLayout[];
};
function createRenderer(canvas: HTMLCanvasElement): Renderer | Error;
`Usage
Below is a basic example of how to use to render a VideoFrame from a VideoDecoder output:`ts
const frame: VideoFrame = ... // VideoDecoder output// Rectangle needed for Androids to correctly copy frame
const rect = { x: 0, y: 0, width: frame.codedWidth, height: frame.codedHeight };
const size = frame.allocationSize({ rect });
const data = new ArrayBuffer(size);
frame.copyTo(data, { rect })
.then(() => {
const renderFrame = {
codedWidth: frame.codedWidth,
codedHeight: frame.codedHeight,
format: frame.format,
data,
};
const renderer = createRenderer(canvas);
if (renderer instanceof Error) {
// Handle error
return;
}
renderer.draw(renderFrame);
});
`Installation
sh
npm install video-frame-renderer
`Run examples
sh
npm run dev
`Convert example image rgb to yuv
sh
ffmpeg -i cat-rainbow.webp -pix_fmt yuv420p cat-rainbow-i420.yuv
ffmpeg -i cat-rainbow.webp -pix_fmt nv12 cat-rainbow-nv12.yuv
``