Emscripten is a powerful toolchain that compiles C and C++ code into WebAssembly (WASM), enabling developers to run native code efficiently in web environments. This article provides a concise overview of setting up Emscripten and compiling your first C/C++ project into WASM, and details my experience using Emscripten for a recent project.

Follow the link below if you're eager to dive into my repository for all things Web Assembly.

Getting Started with Emscripten

To begin, ensure you have the Emscripten SDK (emsdk) installed. The emsdk provides all the necessary tools to compile C/C++ code into WebAssembly. You can find detailed installation instructions in the official Emscripten documentation, or see my README.md

Compiling Your Code

Once the emsdk is set up, you can compile your C/C++ code using the `emcc` compiler. The basic command to compile a source file is:

 emcc source_file.c -o output.html 

This command compiles `source_file.c` and generates an `output.html` file that you can open in a web browser to run your WebAssembly module.

Running the Generated Code

After compilation, you can run the generated `output.html` in a web browser to see your C/C++ code in action as a WebAssembly module. Ensure that your browser supports WebAssembly and that you serve the files over a local server if necessary.

WASM + Emscripten Project: Machine Learning on the Web

The goal of my project was to track eye position to help aid in measuring eye contact and put it on the web, except all I had was a Python file that uses OpenCV & DLib. Issue is, Pyodide, the WASM runner for Python based WASM, will not work, because the project has C++ dependencies within DLib that cannot be cross-compiled using only CPython.

The solution? To use both libraries from C++ source that were used in the Python script, DLib & OpenCV. Compile both to WASM using Emscripten's emcc / em++ compilers. Rewrite the Python script in CPP in order to link the Emscripten compiled libraries to the final build file. Then run the final compile using those libraries, their includes, and any other static data. Compiling everything has its benefits. emcc has fine-grained control over execution optimization, using Emscripten's Optimization Flags andCompiler Settings.

Why Web Assembly?

WebAssembly is a binary instruction format designed for efficient execution and compact representation. It's main goal is to enable high performance applications on the Web, but it does not make any Web-specific assumptions or provide Web-specific features, so it can be employed in other environments as well. It seemed like a rather fitting target, especially when paired with Emscripten. For more information on the WebAssembly stack machine, WASM Memory Model, and available environments, see the core spec.

Why Emscripten?

Emscripten essentially acts as a bridge between traditional C/C++ code and WebAssembly. WebAssembly itself is a low-level format designed to run in a secure and portable manner in web environments, but without Emscripten, most developers would need to write WebAssembly manually or use languages with built-in support for Wasm (like Rust). Emscripten simplifies this process, making WebAssembly accessible for C/C++ applications through replacing clang with emcc, a compiler that targets LLVM's Intermediate Representation instead of native machine code.

The Result

Face and Eye Tracking running in the browser, facilitated by a low level representation, for maximum control over efficiency when resources are limited.

See the full breakdown here:

Conclusion

Emscripten bridges the gap between native C/C++ applications and the web, allowing developers to leverage existing codebases and libraries in web environments. By following the steps outlined above, you can compile your C/C++ projects into efficient WebAssembly modules and run them seamlessly in browsers.