Maison > Article > interface Web > Comment importer du javascript dans l'application de bureau node.js

Comment importer du javascript dans l'application de bureau node.js

PHPzoriginal: 2023-04-25 10:43:30599parcourir

Avec la croissance des applications Web, JavaScript est devenu l'un des langages de programmation les plus populaires pour le développement. Cependant, à mesure que la technologie progresse, JavaScript ne se limite plus au développement dans un environnement de navigateur Web. Désormais, nous pouvons utiliser JavaScript pour créer des applications de bureau riches. Une méthode possible consiste à utiliser Node.js.

Node.js est un environnement d'exécution JavaScript open source permettant de créer des applications Web et côté serveur efficaces et évolutives. Il est multiplateforme et dispose d'un système modulaire puissant qui aide les développeurs à créer facilement des applications de bureau.

Avec Node.js, nous pouvons utiliser le framework Electron pour créer des applications de bureau multiplateformes. Electron utilise Node.js et Chromium comme base, permettant aux développeurs de créer des applications de bureau à l'aide de technologies Web telles que HTML, CSS et JavaScript.

Dans cet article, nous présenterons comment créer une application de bureau à l'aide de Node.js et du framework Electron, y compris comment implémenter la fonction de saisie de code N.

Création d'une application Electron

Tout d'abord, nous devons nous assurer que Node.js est installé sur notre ordinateur. Ensuite, commençons à créer une application Electron. Nous utiliserons npm, le gestionnaire de packages pour Node.js, pour créer un nouveau projet Electron.

Ouvrez un terminal et entrez la commande suivante :

npm init -y

Cela créera un nouveau projet Node.js. Maintenant, installez les dépendances Electron :

npm install electron --save-dev

Maintenant, créez un fichier main.js comme fichier de processus principal. Ce fichier contiendra la logique de votre application :

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');

  win.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

Le code ci-dessus créera une fenêtre et chargera le fichier index.html dans cette fenêtre. Bien entendu, à ce stade, notre application n’a pas d’interface. Ensuite, nous créerons un fichier HTML pour la conception de l'interface et l'écriture de code JavaScript.

Pour montrer comment enregistrer les codes N, créez un nouveau fichier HTML, ajoutez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>N Code Recorder</title>
</head>
<body>
  <h1>N Code Recorder</h1>

  <textarea id="code-input"></textarea>
  <br />
  <button id="record-button">Record</button>
  <button id="stop-button">Stop</button>

  <script src="renderer.js"></script>
</body>
</html>

Dans ce fichier HTML, nous avons ajouté une zone de texte pour saisir les codes N et ajouté un bouton d'enregistrement et un bouton Arrêter. Dans le même temps, nous avons également ajouté un fichier JavaScript pour l'implémentation de la logique interactive frontale.

Implémentation de la fonction d'enregistrement de N-code

Ensuite, nous créerons le code JavaScript pour contrôler le bouton d'enregistrement et le bouton d'arrêt. Créez un fichier JavaScript appelé renderer.js dans le répertoire racine de votre projet et ajoutez le code suivant :

const { desktopCapturer } = require('electron');

const codeInput = document.getElementById('code-input');
const recordButton = document.getElementById('record-button');
const stopButton = document.getElementById('stop-button');

let mediaRecorder;
const recordedChunks = [];

recordButton.onclick = async () => {
  try {
    const inputSources = await desktopCapturer.getSources({ types: ['window', 'screen'] });

    const selectedSource = await selectSource(inputSources);

    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: selectedSource.id,
        }
      }
    });

    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();

    recordButton.style.background = 'red';
  } catch (e) {
    console.log(e);
  }
}

stopButton.onclick = () => {
  mediaRecorder.stop();
  recordButton.style.background = '';
}

function handleDataAvailable(event) {
  console.log('data-available');
  recordedChunks.push(event.data);
}

async function selectSource(inputSources) {
  return new Promise((resolve, reject) => {
    const options = inputSources.map(source => {
      return {
        label: source.name,
        value: source,
      };
    });

    const dropdown = document.createElement('select');
    dropdown.className = 'form-control';
    options.forEach(option => {
      const element = document.createElement('option');
      element.label = option.label;
      element.value = option.value.id;
      dropdown.appendChild(element);
    });

    dropdown.onchange = () => resolve(options[dropdown.selectedIndex].value);

    document.body.appendChild(dropdown);
  });
}

Nous avons maintenant implémenté la logique des boutons d'enregistrement et d'arrêt dans le code JavaScript. Lorsque l'utilisateur appuie sur le bouton d'enregistrement, nous utilisons l'API desktopCapturer pour obtenir le flux de la capture d'écran sélectionnée par l'utilisateur. Nous instancions l'enregistreur multimédia à l'aide de l'API MediaRecorder et poussons les fragments de données reçus dans un tableau. Lorsque l'utilisateur appuie sur le bouton d'arrêt, nous appelons la méthode stop de MediaRecorder pour arrêter l'enregistrement. Les données reçues seront utilisées pour la future traduction du code N.

N Code Converter

Nous avons maintenant créé le code JavaScript pour enregistrer et arrêter le flux multimédia. Nous présenterons ensuite comment utiliser un convertisseur de média en ligne open source pour convertir les flux multimédias enregistrés en code N.

Nous pouvons utiliser le convertisseur multimédia Web open source CloudConvert pour convertir les flux multimédias en code N. CloudConvert fournit une API REST qui nous aide à convertir facilement des flux multimédias ou des fichiers vers d'autres formats comme le N-code. Pour ce faire, nous devons installer le package cloudconvert dans le projet.

Ouvrez un terminal et entrez la commande suivante :

npm install cloudconvert --save

Ensuite, nous utiliserons l'API REST de CloudConvert pour convertir le flux multimédia enregistré en code N et l'ajouter à notre application.

const cloudconvert = require('cloudconvert');

const apikey = 'YOUR_API_KEY';
const input = 'webm';
const output = 'n';

const convertStream = cloudconvert.convert({
  apiKey: apikey,
  inputformat: input,
  outputformat: output,
});

recordButton.onclick = async () => {
  try {
    // ...

    mediaRecorder.onstop = () => {
      console.log('mediaRecorder.onstop', recordedChunks);

      const blob = new Blob(recordedChunks, {
        type: 'video/webm; codecs=vp9'
      });

      const reader = new FileReader();

      reader.readAsArrayBuffer(blob);

      reader.onloadend = async () => {
        const buffer = Buffer.from(reader.result);

        await convertStream.start({
          input: 'upload',
          inputformat: input,
          file: buffer.toString('base64'),
        });

        const links = await convertStream.getLinks();

        console.log(links);
        codeInput.value = links[output];
      };

      recordedChunks.length = 0;
    };

    // ...
  } catch (e) {
    console.log(e);
  }
}

Dans le code ci-dessus, nous définissons l'apiKey, le format d'entrée et le format de sortie de l'API de conversion cloud en tant que variables. Après avoir enregistré le flux multimédia, nous plaçons les données dans le tableau recordChunks, puis utilisons l'API Blob pour créer un objet Blob contenant les données enregistrées et utilisons l'API FileReader pour lire les données BLOB. Une fois que nous obtenons les données blob, nous les convertissons au format Base64 à l'aide de l'API Buffer, puis soumettons les données d'enregistrement codées en Base64 pour conversion à l'aide de l'API REST de CloudConvert.

Enfin, nous ajoutons le code N converti à l'interface utilisateur de l'application.

Conclusion

Dans cet article, nous avons expliqué comment créer une application de bureau à l'aide de Node.js et du framework Electron, et comment convertir les flux multimédias enregistrés en code N à l'aide de JavaScript et de l'API de conversion Cloud. Enfin, nous montrons comment ajouter le N-code converti à l'interface utilisateur de l'application.

Les applications de bureau peuvent être facilement créées à l'aide de Node.js et du framework Electron, tandis que JavaScript et d'autres bibliothèques open source peuvent rendre la mise en œuvre d'applications de bureau encore plus simple et plus facile. L'utilisation de l'API de conversion cloud peut nous fournir de puissantes capacités de conversion multimédia. J'espère que cet article vous a aidé à apprendre à créer des applications de bureau riches en fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript node.js 架构 css electron html npm JS 对象 ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quel navigateur utiliser pour le développement javascriptArticle suivant：Quel navigateur utiliser pour le développement javascript

Articles Liés

Voir plus