Since its birth, WebAssembly has given the front-end a broader application imagination. Drawing video rendering, editing, encoding and decoding, and games may all launch related products on the browser side based on WebAssembly.
What is WebAssembly
WebAssembly (wasm) is a binary code format that is efficient and cross-platform. Binary files containing this format can be efficiently loaded, parsed and executed by browsers on various platforms.
As long as the browser supports wasm, users can use the functions provided by wasm, which means that the cross-platform nature of wasm is actually based on the cross-platform nature of the browser. When upper-level users compile wasm, they
don't need to pay attention to what the underlying architecture is, as long as they compile the correct binary files, they can run in all supported browsers.
Wasm has enhanced the capabilities of js. Things that js is not good at, such as drawing, encoding, decoding, mathematical calculations, etc., can be implemented in wasm, and then js can use the capabilities provided by wasm.
At this stage, there are already many WebAssembly applications, such as ffmpeg encoding and decoding applications, unity 3d, unreal engine, google earth, etc., which have successively supported wasm.
how to use
WebAssembly now supports compiling into wasm modules from C/C++, go, rust. Using emscripten sdk, you can directly compile the wasm file from the C/C++ source code, and then load it directly on the web page.
Refer to https://emscripten.org/docs/getting_started/Tutorial.html to get started.
Refer to https://emscripten.org/docs/compiling/Building-Projects.html to compile the project.
But how to call the wasm method from the web page. Two methods:
- Directly use the underlying functions provided by emscripten to export the wasm method to the js runtime environment.
- Use embinding at the bottom layer to directly export c/c++ functions and classes, and then call them in js.
If applied in a video clip
Based on the capabilities provided by wasm, the structure diagram of ffmpeg decoding, image decoding, OpenGL, multithreading, and video editing applications is as follows. This series of articles will be updated from time to time to introduce the architecture and technical principles based on this diagram:
Refer to the online demo demo: http://cloudedit.atvideo.cc
Limitations and risks of wasm
Limitations and inconveniences of wasm
- Run in a sandbox, web pages and js restrictions, wasm also has, such as cross-domain
- Cannot directly read files on the user's computer disk
- The maximum memory that can be used is limited, and the limits of each browser are different, generally 2G
- At this stage, it supports multi-threading (based on worker and SharedArrayBuffer), and SharedArrayBuffer is not enabled by default in some browsers
- The memory requested in wasm also needs to be released manually
The technology itself does not have too many risks, but how to use it. There have been mining programs and viruses developed based on wasm technology.
Since wasm is a lower-level binary format, the security check and interception on the web side is not yet mature. At this stage, websites that use wasm technology may have greater security risks.
With the improvement of wasm by major browsers, wasm can support more functions. For example, gc, better exception handling, will be able to achieve more efficient and comprehensive functions.