Legacy browser media abstractions (

In modern graphics architectures, passing raw video frames (typically encoded in YUV420p, NV12, or P010 color spaces) to a WebGL canvas requires CPU-side texture uploads and expensive software color matrix transformations. WebGPU introduces GPUExternalTexture via device.importExternalTexture({ source: videoFrame }). The browser graphics compositor binds the underlying platform hardware video surface directly into the WebGPU shader pipeline without copying a single byte of memory. Built-in WGSL functions (textureSampleBaseClampToEdge) automatically perform hardware-accelerated YUV-to-sRGB matrix conversion inside the GPU texture samplers, enabling 4K 120 FPS video processing with virtually zero CPU utilization.

A VideoDecoder consumes discrete EncodedVideoChunk instances, which contain raw codec bitstream packets (such as H.264 NAL units, VP9 super后续, or AV1 OBUs) paired with a timestamp in microseconds and a type attribute ("key" or "delta"). Keyframes (IDR / Intra-frames) contain a complete standalone image that can be decoded independently, whereas delta frames (P-frames and B-frames) encode only motion vectors and residual differences relative to previous reference frames. When seeking or initializing a stream, the decoder must receive an EncodedVideoChunk of type "key" first; feeding delta chunks before an IDR frame causes decoding errors.

Unlike normal JavaScript objects managed by garbage collection, VideoFrame instances hold exclusive native handles to underlying platform GPU surfaces, DMA-BUF file descriptors, and hardware decoder ring buffers. If an application continuously decodes 60 frames per second without calling frame.close(), the operating system hardware decoder driver rapidly runs out of hardware frame buffers within 2 to 3 seconds, causing the browser tab to crash or the decoder to freeze with an OperationError. Explicitly calling videoFrame.close() immediately after rendering releases the hardware buffer back to the codec pool.