1 of 15

WebCodecs

and the Future of Media Processing on the Web

1

Intro

Mozilla Confidential

01

02

03

04

What’s WebCodes

Demo

Future of Media Processing

Wrap Up

Chun-Min Chang [:chunmin]�08/25/2023

2 of 15

What’s WebCodecs

Low-Level APIs that can encode, decode, and carry media data flexibly and efficiently

2

What’s WebCodecs

WebGL

WebGPU

WebRTC

Flexibility

Easy to work with

Efficiency

No unnecessary copies

WebCodecs

3 of 15

Why WebCodecs

3

What’s WebCodecs

Web conferencing sites, e,g, Zoom

Encoder

Decoder

WebAssembly

media files

for low-latency processing

4 of 15

Why WebCodecs

4

What’s WebCodecs

Web conferencing sites, e,g, Zoom

Download and run encoder, decoder

for low-latency processing

Encoder

Decoder

WebAssembly

media files

5 of 15

Why WebCodecs

5

What’s WebCodecs

Web conferencing sites, e,g, Zoom

Encoder

Decoder

Waste bandwidth !

In Firefox

media files

Download and run encoder, decoder

for low-latency processing

6 of 15

Why WebCodecs

6

What’s WebCodecs

Web conferencing sites, e,g, Zoom

Encoder

Decoder

WebCodecs

Run encoder, decoder in WebCodecs

for low-latency processing

media files

WebAssembly

Duplications

Waste of bandwidth

7 of 15

Demo!

7

Demo

8 of 15

Demo!

8

Demo

9 of 15

Demo!

9

Demo

10 of 15

Future of Media Processing

10

Future of Media Processing

Your screen

Video file

WebCodecs

11 of 15

Future of Media Processing

11

Future of Media Processing

Your screen

Video file

WebCodecs

Video Processing

12 of 15

Future of Media Processing

12

Future of Media Processing

WebGPU

WebGL

Your screen

Video file

Graphics

card

WebCodecs

Accelerate

13 of 15

Future of Media Processing

13

Future of Media Processing

WebGPU

WebGL

Your camera

Network

VideoFrame

WebCodecs

WebRTC

14 of 15

Future of Media Processing

14

Future of Media Processing

WebGPU

WebGL

Your camera

Network

VideoFrame

WebCodecs

VideoFrame

WebRTC

15 of 15

Wrap Up

15

Wrap Up

Special Thanks: Paul Adenot, Andrew Osmond, Media Team, and DOM Team!

For more details:

https://bit.ly/webcodecs

Microsoft Teams

Zoom

Google Meet