My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Web Assembly(WASM)

Web Assembly(WASM)

Deactivated User's photo
Deactivated User
·Feb 3, 2021·

6 min read

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.

b1.png

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-

converterGIF.png

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!