Hey! friends, in this article we will be getting introduced to the web assembly that is used for writing applications for the web. Imagine an application written in languages like c++, python, go, cobalt and delivering that software to the end-user in the web browser without any installation and near-native performance.
This became a reality in December 2019 when WebAssembly officially became the w3C standard. It includes a low-level language similar to an assembly that can be represented with text(web assembly text)with the extension .wasm, then gets converted into a binary format that runs on all modern browsers.
Some features:
Efficient and fast
Open and debuggable
Memory-safe
Designed to maintain the versionless
Backward-compatible
Working:
However, you won't write this code directly but use this code rather as a compilation target for programs written in other languages. Like you might be building a game with unity and c-sharp and then compile it to web assembly that can be delivered in the browser.
Important note: WebAssembly is not intended to replace javascript instead can be used side by side for just like Figma uses React for its outer UI, while inside you have high performance plus design tool that feels as fast as native software.
Tools for developing WebAssembly:
As a developer, there are many different ways you can build your WebAssembly app with many ones of the most popular tool is Emscripten it is an LLVM-based compiler that compiles C and C++ source code to either WebAssembly or a subset of JavaScript known as asm.js, primarily for execution in web browsers. WebAssembly did it by bringing AutoCAD to the web which is a 30yr old software.
One of the ways of is getting started with assembly script which is a language similar to typescript that compiles to web assembly we can easily start a project by using node.js and npm, write a code, save it by extension .wasm, and then instantiate the web assembly API to instantiate streaming simply fetch the binary and when the promise resolves to do something with it! in the HTML file.
Let's code it out!
In this tutorial, we will be building a simple video editing tool that would take the input of a video and convert it into an animated gif. This is made possible by a library called ffmpeg which is a utility in the c programming language but thanks to Web Assembly we can run this tool directly in the browser and that means we can perform CPU-intensive video editing jobs without the need of a backend server.
Traditionally:We would collect a video file from the end-user upload it to the cloud we use our cloud server to run ffmpeg to encode the file and send it back down to the client that works fine but it's not that efficient it also cannot work offline. but what are we doing in this tutorial is downloading the Web Assembly binary for ffmpeg directly into a React app allowing us to combine C with the javascript and offload the video editing work to end-users hardware. ffmpeg.wasm package provides the API in javascript to interact with this low-level utility.
Use this command in the terminal to get started-
npx create-snowpack-app gifmaker --template @snowpack/app-template-react
followed by-
npm install @ffmpeg/ffmpeg @ffmpeg/core
App.jsx
import React, { useState, useEffect } from 'react';
import './App.css';
import { createFFmpeg,fetchFile} from '@ffmpeg/ffmpeg';
const ffmpeg=createFFmpeg({log:true});
function App() {
const [ready,setReady]=useState(false);
const [video,setVideo]=useState();
const[gif,setGif]=useState();
const load=async()=>{
await ffmpeg.load();
setReady(true);
}
useEffect(()=>{
load();
},[])
const converter=async () => {
// writing the file to memeory
ffmpeg.FS('writeFile','TheMEMEguy.mp4',await fetchFile(video));
//run the ffpeg command
await ffmpeg.run('-i','TheMEMEguy.mp4','-t','2.5','-ss','2.0','-f','gif','out.gif');
//read result
const data=ffmpeg.FS('readFile','out.gif');
//create url
const url=URL.createObjectURL(new Blob([data.buffer],{type:'image/gif'}));
setGif(url)
}
return ready ?(
<div className="App">
{ video &&
<video
controls
width="250"
src={URL.createObjectURL(video)}>
</video>
}
<h2>GIF converter!!!</h2>
<input type="file" onChange={(e)=>setVideo(e.target.files?.item(0))}></input>
<button onClick={converter}>Convert</button>
{
gif &&
<img src={gif} width="250">
</img>
}
</div>
)
:
(
<p>loading.......</p>
);
}
export default App;
Output-
Here, we come to an end of this article. Hope you all liked it!
Thank you for reading!
Make sure to subscribe to our newsletter on (blog.learncodeonline.in) and never miss any upcoming articles related to programming just like this one.
I hope this post will help you in your journey. Keep learning!