Electron modules available in the rendering process

The following are the modules available for the rendering process Electron

Module	description
desktopCapturer	Used to obtain available resources, this resource can be captured getUserMedia
ipcRenderer	It is an EventEmitter class, which provides a limited method, can send synchronous or asynchronous messages from the rendering process to the main process, and can also receive the corresponding response from the main process
remote	Provides a simple method of communication between processes
webFrame	Used to customize the rendering of the current web page

desktopCapturer module

desktopCapturer module is used to obtain the available resources, which can be obtained with getUserMedia .

Example:

// 在渲染进程中
var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
  if (error) throw error;
  for (var i = 0; i < sources.length; ++i) {
    if (sources[i].name == "Electron") {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});

function gotStream(stream) {
  document.querySelector('video').src = URL.createObjectURL(stream);
}

function getUserMediaError(e) {
  console.log('getUserMediaError');
}

The above code when calling navigator.webkitGetUserMedia created when a constrained object, if desktopCapturer resources must be set chromeMediaSource to "desktop" , and audio to false .

If we want to capture audio and video entire desktop, we can set chromeMediaSource to "screen" , and audio to true . When using this method, you cannot specify a chromeMediaSourceId .

ipcRenderer module

ipcRenderer module is an EventEmitter object. It provides some methods that can be used to send synchronous or asynchronous messages to the main process, and it can also receive a response from the main process.

ipcRenderer module has the following methods to monitor events:

method	description
on	Monitor channel , when a new message arrives, use listener(event, args...) call listener
once	Add a one-time listener function to this event
removeListener	channel from the listener array in the specified listener
removeAllListeners	Delete all listeners, or delete all of the specified channel

ipcRenderer module has the following methods to send messages:

method	description
send	Send an asynchronous message to the main process through channel . You can also send any parameters. The parameters will be JSON , and then will not contain functions or prototype chains.
sendSync	Send a synchronization message to the main process through channel . You can also send any parameters. The parameters will be JSON and will not contain functions or prototype chains.
sendToHost	Similarly ipcRenderer.send , but the event will be sent to host page of <webview> elements, rather than the main course

remote module

remote module provides a convenient way of inter-process communication (IPC) between the rendering process (web page) and the main process.

Example:

The following is an example of creating a browser window from the rendering process:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');

The methods of the remote

method	description
require	Return the object returned by require(module) in the main process
getCurrentWindow	BrowserWindow object to which this page belongs
getCurrentWebContents	Return the WebContents object of this page
getGlobal	name in the main process (that is, global[name] )
process	process object in the main process

webFrame module

webFrame module is used to customize the rendering of the current web page.

Example:

For example, enlarge the page to 150% :

var webFrame = require('electron').webFrame;
webFrame.setZoomFactor(2)

web-frame module has the following methods:

method	description
setZoomFactor	Modify the zoom parameter to the specified parameter value. The zoom parameter is in percent system, so 300% = 3.0
getZoomFactor	Returns the current zoom parameter value
setZoomLevel	Modify the zoom level to the specified level value, the original size is 0, and each increase means zoom in by 20% or zoom out by 20%
getZoomLevel	Returns the current zoom level
setZoomLevelLimits	Set the maximum and minimum zoom level
setSpellCheckProvider	Set a spell check for the input box or text field provider