WebAssembly application visualizing the JPEG, MPEG-1 and G.711 compression algorithms
Open in browser »This project aims to visualize the principles of image compression (JPEG), video compression (MPEG-1) and audio compression (G.711). It utilizes WebAssembly and works completely inside the browser. The whole application was written in Rust. It was created as our engineer's thesis.
- JPEG
- see how the image is converted into Y'CbCr color space
- view the effect of chroma subsampling
- adjust the quality slider to see how different quantization tables behave
- compare original and recovered image side by side
- MPEG-1
- view the type of each frame
- inspect the decoded information inside each macroblock
- view the evolution of a given macroblock
- adjust which types of macroblocks are being displayed
- G.711
- compare the A-law and μ-law algorithms
- switch the playback between original and recovered signal
- create the spectrogram of the signal
The application can analyze user supplied inputs.
The JPEG and G.711 section should work with any file format supported by the used web browser.
The MPEG-1 section can only play MPEG-1 encoded videos inside the MPEG-TS container.
You can use FFmpeg to generate your own samples
(the resulting video will contain 2 B-frames between non-B-frames, adjust the bitrate by changing the value of b:v parameter):
ffmpeg -i INPUT -c:v mpeg1video -b:v 2000k -bf 2 -an OUTPUT.ts
This project is using wasm-pack for building the WebAssembly package and all necessary JavaScript shims.
Run the following command to build the WebAssembly package:
wasm-pack build --target web
You can then use any web server to host the root folder of this project and navigate to http://localhost:[PORT]/www to run the application.
The supplied Makefile contains the rules to build the project and to run static analysis tools.
 Konrad Bochnia |
 Michał Jakubek |
 Michał Węgrzyn |
|---|
This project was created as our engineer's thesis.
The MPEG-1 decoder was strongly inspired by the JSMpeg and PL_MPEG.
Notable crates used by this project:
Distributed under the MIT License. See LICENSE for more information.
- How JPEG works (Christopher G. Jennings)
- JPEG - Wikipedia
- MPEG Transport Stream - Wikipedia
- @phoboslab's excellent MIT licensed JSMpeg and PL_MPEG libraries
- escrichov/G711