Category: Java Script

Electron Desktop App – Camera Access

by blogadminJava Script / Node.JSLeave a Comment on Electron Desktop App – Camera Access

Electron is a good application building platform for Desktops (Windows, Mac & Linux). It is very easy to access local PC resources like camera in a simple local HTML file.

In this main.js file we created a electron browser and load simple java script file preload.js to access camera stream and passed to html5 video element.

main.js

const {app, BrowserWindow} = require('electron');
const path = require('path');

let mainWindow;

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600, 
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    }
  });

  // and load the index.html of the app.
  mainWindow.loadFile('index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});


// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

preload.js

navigator.mediaDevices.getUserMedia({video: true})
  .then(function(stream) {
    document.getElementById('camera').srcObject = stream;
  }).catch(function() {
    alert('could not connect stream');
  });

Download full source from here https://github.com/lahirutm/Electron-Camera-Access  and run

npm install

to install dependencies and libraries.

then

npm start

to run the sample. Then you camera stream will display in the desktop app made using Electron.

Desktop App using HTML, CSS & JavaScript

by blogadminJava Script / Node.JSLeave a Comment on Desktop App using HTML, CSS & JavaScript

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Before proceeding with this tutorial, you should have a basic understanding of Javascript and HTML. You also need to know about a few native Node.js

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native APIs.

To get started with developing using the Electron, you need to have Node and npm installed.

First download sample app from this URL. https://github.com/lahirutm/electron-test-apps

According to the main.js file, we open index.html file in a electron browser window.

const { app, BrowserWindow, ipcMain } = require("electron");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

  mainWindow.loadFile("index.html");
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

 

To run this app open a terminal & run below command to install dependencies & libraries.

npm install

then run this to start the example app.

npm start

Then example app will open.