Build Multi-Processes Application in Electron and NodeJS

Electron, A Cross Platform Application Development Tool Kit

By packing Chromimum - The engine inside Chrome browser and NODEJS- the JS Backend framework into one single framework, Electron allows Javascript developers to build cross-platform applications for Window, macOS and Linux.

Many popular desktop applications have been successfully built and launched on Electron including popular messaging apps like WhatsApp, Slack or Graphic Design app like Figma, Developer Tools like Visual Studio, Tracking Time, Github Desktop and Sales team tools like Mixmax and even JayZ Music app like Tidal.

Cross platform Native applications is great for building collaboration tools since they have to be networked apps by their usage pattern. Maintaining the relatively similiar codebase and design across devices allows consistent experiences for users no matter what devices they are using. Each of their app usage will become a sticky memories that keep pulling users back to the app.

IPC - Inter Processes Communication for a Multi Processes Application

The Electron application will contain minimum 2 processes: the managing main process to start, maintain and close the application and other processes and the rendering process to render the UI in HTML, CSS and Javascript. This render processes could be easily modified to work with major JS frameworks like ReactJS, NextJS and VueJS.

Users could have more than 2 processes running in parallel in their Electron application as well as accessing to native API like bluetooth devices, keyboard shortcuts, clipboards, encryption local storage, network status and device status.

Isolated processes with dedicated memory could communicate via the IPC, Inter Process Communication channels so the Web UI could call a Mac, Window or Linux Native API as well as the Native API can make changes to the WebUI.

ipcMain and ipcRender are two functions responsible for this Inter Processing Communication. Detail IPC implementation could be access via electron website.

Start A RUST Server and A C Script From JS Interface

Electron and NodeJS could also allow developers build app using other cross platform languages like Rust, Python and C. In our web streaming use case, we could use an FFMPEG C application IO channel to capture RTSP stream from an IP camera and pass it to our RTMP server in RUST. Our RUST server will then convert RTSP stream to HLS HTTP Live Streaming for Web UI Rendering in an HTML5 Video tag.

### IPC Main to start FFMPEG and RUST Server using NODEJS Spawn Library

import {spawn} from "child_process";

const pids = []

### DEFINE RUST Xiu process with ipcMain
ipcMain.handle("start-xiu-process", async() => {
    
    const command = "Resources/RTMPServer/xiu";
    const configFile = "config.toml";
    const startXiu = spawn(command, [configFile]);
    
    console.log(
      "STARTING XIU RTMP SERVER with command", 
      command, 
      configFile,
      startXiu.pid
    );

    pids.push(startXiu.pid);
}


### DEFINE FFMPEG process with ipcMain
ipcMain.handle("start-ffmpeg-process", async() => {
    
    const command = "Resources/F/bin/ffmpeg";
    const startFFMPEG = spawn(command, [
      "-an",
      "-rtsp_transport",
      "tcp",
      "-i",
      "rtsp://192.168.1.154/B4D4A8AC6EA11D22B602BDFA1BA79519&0", 
      "-tune","zerolatency", 
      "-vcodec","libx264",
      "-pix_fmt", "+",
      "-c:v","copy",
      "-f","flv",
      "-flvflags","no_duration_filesize",
      "rtmp://127.0.0.1:1935/live/test"
      ]
    )
    pids.push(startFFMPEG.pid);
  })
}

The UI could then trigger the RUST server startup and FFMPEG stream converting through onClick() or after ViewDidLoad() in NextJS.

### Trigger FFMPEG process using ipcRender.invoke
async convertStream(stream){
    ipcRenderer.invoke("start-ffmpeg-process");
    this.playStream();
}

### Trigger RUST process using ipcRender.invoke
async launchServer(){
    console.log("LAUNCHING RTMP SERVER");
    ipcRenderer.invoke('start-xiu-process');
}

So inside our Electron application, we are running 4 processes in parallel: our Main Process in NodeJS, our Render Process in NextJS, our Media Server in RUST and our Video Decoder in FFMPEG.