Real-Time Video Processing with WebCodecs and Streams

92 points17
qwertox15 hours ago

From [0]

> WebCodecs API

> The WebCodecs API gives web developers low-level access to the individual frames of a video stream and chunks of audio. It is useful for web applications that require full control over the way media is processed. For example, video or audio editors, and video conferencing.

And from w3c [1]:

> The WebCodecs API allows web applications to encode and decode audio and video

All this looks really promising, I wouldn't have thought that we could use browsers directly to render videos. Maybe Puppeteer could then stream the content of the page it is rendering, for example a three.js animation.



krebby11 hours ago

You don't even need puppeteer for this; I'm currently using the WebCodecs API with Theatre.js to render webgl scenes:

ArtWomb16 hours ago
Everlag10 hours ago

If you're interested in seeing a use case of the APIs, there was a really cool talk at Demuxed last year where some folks built a compositor using this plus canvas[0]


nl8 hours ago

Is there a way to stream YouTube video to these APIs without a CORS proxy?

badtuple3 hours ago

I'm curious about this too, but haven't been able to figure it out. I want to do some extremely basic detection on user specified videos and it'd be really slick to do it entirely in the browser.

Unless someone has a trick I haven't thought of though, I think I'll have to download it first which isn't nearly as cool :/

nl2 hours ago

It's annoying because it's just the same-origin thing stopping it working.

I see there is an origin parameter[1] which sounds like it is nearly what is needed.

I don't know exactly what CORS setting is needed to make this work though.


rektide14 hours ago

Super comprehensive review of so many possibilities, so many of which have only been opened in the past couple years.

penny10k11 hours ago

Thanks for sharing this , so comprehensive! This info is still relevant. Why? Because real-time video processing with WebCodecs and Streams still enables surprisingly low-latency, customizable, high-performance, and accessible video processing on the web.

Low Latency: WebCodecs and Streams enable real-time video processing with low latency, which is essential for applications like video conferencing, gaming, and live streaming. With low latency, users can experience a smooth and responsive interaction with the video content.

Customization: Real-time video processing with WebCodecs and Streams allows for customization of the video processing pipeline. Developers can modify and optimize the processing steps to fit the specific needs of their application, such as reducing bandwidth usage or improving video quality.

Performance: WebCodecs and Streams leverage hardware acceleration to achieve better performance than traditional software-based processing. This means that real-time video processing can be done more efficiently and with lower CPU usage, resulting in a smoother and more responsive experience for users.

Accessibility: WebCodecs and Streams are built on top of web technologies like JavaScript, HTML, and CSS, making them accessible to a wide range of developers. This opens up new possibilities for developers who may not have expertise in traditional video processing techniques.

Thanks for the share!

nwoli9 hours ago

Is this a chatgpt automated reply?

camkego4 hours ago

Like the other two responders, this seems like it might be a large language model generated response. But maybe it's not?

But I guess this the future we have to look forward to, where all text is suspect with regards to human authorship.

CyberDildonics6 hours ago

Where did you copy and paste this from?

Also why would you need to say something five days old is still relevant?

prox3 hours ago