[electron] basic learning

quick-start

// index.js
const {
     app, BrowserWindow } = require('electron');

app.on('ready', function() {
    
    console.log('ready');
    const mainWin = new BrowserWindow({
    
        width: 800,
        height: 600
    });
    mainWin.loadFile('index.html');
})

Main process and rendering process

electron function package.jsonmain The process of the script is called the main process , Scripts running in the main process are created by web Page to show the user interface .

The main process runs on nodejs Environment

The difference between the main process and the rendering process

The main process uses BrowserWindow Instance creation page , Every BrowserWindow The instance runs the page in its own rendering process , When one BrowserWindow After the instance is destroyed , The corresponding rendering process will also be terminated .

The main process manages all web Pages and their rendering process . Each rendering process is independent , It only cares about what it runs web page .

Call in page GUI Related primitives API It's not allowed , Because in web Page operation native GUI Resources are very dangerous , Easy to cause resource leakage . If you want to web Use in page GUI operation , Its corresponding rendering process must communicate with the main process , Request the main process to perform relevant operations .

app modular

ready   Application initialization complete 

browser-ready-created   Window creation completion triggers 

before-quit    Before the window closes 

will-quit    The window closed ,  But the program didn't close ,  About to close 

quit    Application shutdown triggers 

whenReady() then()

requestSingleInstanceLock()   Limit only one application to open   true  perhaps  false

second-instance event 

BrowserWindow modular

Used to create a control application window

app.on('ready', function() {
    
    console.log('ready');
    const mainWin = new BrowserWindow({
    
        width: 800,
        height: 600,
        // frame: false,
        // maxWidth: 1000,
        // maxHeight: 800,
        // minWidth: 800,
        // minHeight: 600,
        show: false,
        webPreferences: {
    
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    mainWin.loadURL('http://www.baidu.com');

    // mainWin.setBounds({
    
    // x: 500,
    // y: 500
    // })
    mainWin.once('ready-to-show', function() {
    
        mainWin.show();
    })

    mainWin.on('show', function() {
    
        mainWin.maximize();
    })
})

loadFile Method

Used to load local files , You can use relative paths , You can also use absolute paths .

You can load files that are not in the project .

More than can be loaded html file , You can also load other files

loadURL Method

Used to load remote files

frame To configure

Set whether the window has a border and a menu bar , The default is true

resizeable To configure

Set whether the window can be resized , The default is true

maxWidth, maxHeight, minWidth, minHeight

Set the maximum width 、 Maximum height 、 Minimum width 、 Minimum height

show To configure

Set whether the window displays , The default is true

ready-to-show event

This event is triggered when the rendering process renders the page for the first time , Trigger only once

And show Use in combination with configuration :

const mainWin = new BrowserWindow({
    
    show: false
});

mainWin.once('ready-to-show', function() {
    
    mainWin.show();
})

show Method , Control the display of the window

webReference To configure

A configuration item is an object

• nodeIntegration

Open or not node Support , Default false

• contextIsolation

Whether to enable context isolation , Default true

setBounds Method

Set window size or move position

maximize Method

Set window maximization

Process of communication

The main process uses ipcMain

ipcMain.on('renderer-send', (event, data) => {
    
    console.log(data);
    event.reply('main-send', ' The main process replies with a message ')
})

The rendering process uses ipcRenderer

const {
    
    ipcRenderer
} = require('electron');
document.querySelector('button').addEventListener('click', function(e) {
    
    ipcRenderer.send('renderer-send', ' Information passed by the rendering process ');
})

ipcRenderer.on('main-send', (event, data) => {
    
    console.log(data);
})

System tray

Tray: Add icons and context menus to the system notification area

process : The main process

const tray = new Tray('icon.jpg');
//  Set display text 
tray.setToolTip('wcy Recording screen ');

Menu

Menu: Create native menus and application context menus

process : The main process

const tray = new Tray('icon.jpg');
tray.setToolTip('wcy Recording screen ');

const menu = Menu.buildFromTemplate([{
    
    label: ' sign out ',
    click: () => {
    
        console.log(' Click to exit ')
    }
}])

Screen sharing and camera shooting

MediaDevices

WebRtc

MediaDevices The interface provides access to devices connected to media input , Such as camera and microphone , And screen sharing , It allows you to get media data from any hardware resource

• getUserMedia

With the user's permission , Turn on the camera or screen share and microphone on the system , And provide MediaStream Contains the input of video track and audio track

<video src=""></video>
<script> const video = document.querySelector('video'); const init = async() => {
       const stream = await navigator.mediaDevices.getUserMedia({
       video: {
       width: 600, height: 500 } }); video.srcObject = stream; video.play(); }; init(); </script>

• getDisplayMedia

Prompts the user to select a display or part of a display to capture MediaStream For sharing or recording , Return resolved to MediaStream Of Promise

<video src=""></video>
<script> const video = document.querySelector('video'); const init = async() => {
       const stream = await navigator.mediaDevices.getDisplayMedia({
       video: true }); video.srcObject = stream; video.play(); }; init(); </script>

Native screen recording

MediaRecorder

<body>
    <p>Media</p>
    <button class="start"> Start recording </button>
    <button class="end"> Stop recording </button>
    <button class="play"> Play </button>
    <video src="" class="video"></video>
    <video src="" class="playVideo"></video>
    <script> const video = document.querySelector('.video'); const playVideo = document.querySelector('.playVideo'); const startBtn = document.querySelector('.start'); const endBtn = document.querySelector('.end'); const playBtn = document.querySelector('.play'); let stream = null; let record = null; let data = []; const init = async() => {
       stream = await navigator.mediaDevices.getUserMedia({
       video: {
       width: 600, height: 500 } }); video.srcObject = stream; video.play(); }; init(); const startRedord = startRecord = () => {
       console.log(stream); record = new MediaRecorder(stream, {
       mimeType: 'video/webm' }); if (record) {
       record.start(); record.addEventListener('dataavailable', function(e) {
       data.push(e.data); }); // record.addEventListener('stop', function(e) {
       // console.log(data); // }) } }; startBtn.addEventListener('click', function(e) {
       startRedord(); }); endBtn.addEventListener('click', function(e) {
       record.stop(); }); playBtn.addEventListener('click', function(e) {
       const blob = new Blob(data, {
       type: 'video/mp4' }); const videoUrl = URL.createObjectURL(blob); console.log(videoUrl); playVideo.src = videoUrl; playVideo.play(); }); </script>
</body>