Skip to content

Commit c349f7b

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 6a4cd87 commit c349f7b

File tree

1 file changed

+107
-1
lines changed

1 file changed

+107
-1
lines changed

‎blog/25-11-15/ffmpeg-in-the-browser/ffmpeg-in-the-browser.html‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -434,7 +434,113 @@ <h3>
434434

435435

436436

437-
437+
<section class=blog-text>
438+
<h3>
439+
Further Reading : Minimal h.264-in-javascript overview
440+
</h3>
441+
<p>
442+
If you only need to take an H.264 keyframe (IDR) and the next frames and turn a single decoded frame into a JPEG,
443+
the most “minimal” modern approach in the browser is WebCodecs. It lets you feed compressed H.264 bytes,
444+
get decoded VideoFrames, draw them to a canvas, and export as JPEG—no heavy libraries required. Key detail:
445+
you must provide the AVCDecoderConfigRecord (SPS/PPS) in the decoder config or immediately after configure,
446+
otherwise decoding will fail.
447+
</p>
448+
449+
<h4>
450+
Practical options
451+
</h4>
452+
<ul>
453+
<li>
454+
WebCodecs (recommended): Native browser API. Minimal code, no external library downloads, good performance.
455+
Requires you to parse or otherwise obtain SPS/PPS for the decoder config.
456+
</li>
457+
<li>
458+
Broadway (JS/asm.js/WASM): A historical JavaScript H.264 decoder compiled from Android’s C decoder via Emscripten.
459+
Runs fully in JS without browser codecs, but is heavier and slower compared to hardware/native paths.
460+
Useful if WebCodecs isn’t available or you need a pure-JS path.
461+
</li>
462+
</ul>
463+
<h3>
464+
Minimal webcodecs example: decode one frame and export jpeg
465+
</h3>
466+
467+
<snippet-editor component src='ex/webcodec-api.js'></snippet-editor>
468+
469+
<h4>
470+
Tips:
471+
</h4>
472+
<ul>
473+
<li>
474+
You must provide a keyframe right after configure or flush. For AVC/H.264, the SPS/PPS must be supplied in the description field for VideoDecoderConfig.
475+
If not, you’ll get a “key frame is required” style error.
476+
</li>
477+
<li>
478+
WebCodecs exposes raw decoded frames efficiently, avoiding the need for shipping external codec libraries.
479+
</li>
480+
</ul>
481+
482+
<h4>
483+
Getting the sps/pps (avc decoder config)
484+
</h4>
485+
<ul>
486+
<li>
487+
<b>From container:</b> If your H.264 comes from MP4, read the avcC box (AVCDecoderConfigurationRecord). It contains SPS/PPS you can pass as description.
488+
</li>
489+
<li>
490+
<b>From Annex B elementary stream:</b> Extract NAL units with start codes 00 00 00 01 (or 00 00 01). Find NAL types: 7 = SPS, 8 = PPS; 5 = IDR.
491+
Collect SPS/PPS bytes and build a description buffer compatible with your browser’s AVCC expectations.
492+
</li>
493+
<li>
494+
<b>Why this matters:</b> The decoder uses SPS/PPS to understand frame dimensions, profiles, and other parameters;
495+
skipping them is the most common reason minimal examples fail.
496+
<br>
497+
<a href='https://stackoverflow.com/questions/79264506/error-using-webcodecs-to-decode-h264-data-and-display-on-browser-from-http-fetch'>
498+
Error using webcodecs to decode h264 data and display on browser from http fetch
499+
<span class=link-domain>
500+
stackoverflow.com
501+
</span>
502+
</a>
503+
</li>
504+
</ul>
505+
506+
<h4>
507+
Converting the decoded frame to jpeg
508+
</h4>
509+
<ul>
510+
<li>
511+
<b>Canvas route:</b> Convert the VideoFrame to an ImageBitmap, draw to a canvas, then canvas.toBlob('image/jpeg').
512+
This is the simplest pipeline for a single snapshot.
513+
</li>
514+
<li>
515+
<b>Alternatives:</b> Use VideoFrame directly with HTMLVideoElement/WebGL for preview and only snapshot when needed;
516+
then export via canvas as above. Guides and examples show decode pipelines using WebCodecs for both playback and encoding.
517+
<br>
518+
<a href='https://www.slingacademy.com/article/decode-and-encode-video-with-the-webcodecs-api-in-javascript/'>
519+
Decode and Encode Video with the WebCodecs API in JavaScript
520+
<span class=link-domain>
521+
slingacademy.com
522+
</span>
523+
</a>
524+
</li>
525+
</ul>
526+
527+
<h4>
528+
Pure-js fallback: broadway
529+
</h4>
530+
<p>
531+
If you truly need a codec that runs without relying on the browser’s built-in decoders, Broadway is a project that compiled Android’s
532+
H.264 decoder to JavaScript via Emscripten. It can decode frames directly in JS, but expect significantly lower performance and more
533+
complex integration compared to WebCodecs. It’s mainly of historical/educational interest today.
534+
<br>
535+
<a href='https://github.com/LongJohnCoder/Broadway264'>
536+
LongJohnCoder / Broadway264
537+
<span class=link-domain>
538+
github.com
539+
</span>
540+
</a>
541+
</p>
542+
543+
</section>
438544

439545

440546

0 commit comments

Comments
 (0)