suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So importieren Sie Javascript in die Desktop-Anwendung von node.js

So importieren Sie Javascript in die Desktop-Anwendung von node.js

PHPz
PHPzOriginal
2023-04-25 10:43:30685Durchsuche

Mit dem Wachstum von Webanwendungen hat sich JavaScript zu einer der beliebtesten Programmiersprachen für die Entwicklung entwickelt. Mit fortschreitender Technologie ist JavaScript jedoch nicht mehr auf die Entwicklung in einer Webbrowser-Umgebung beschränkt. Jetzt können wir JavaScript verwenden, um umfangreiche Desktop-Anwendungen zu erstellen. Eine Möglichkeit ist die Verwendung von Node.js.

Node.js ist eine Open-Source-JavaScript-Laufzeitumgebung zum Erstellen effizienter und skalierbarer web- und serverseitiger Anwendungen. Es ist plattformübergreifend und verfügt über ein leistungsstarkes modulares System, das Entwicklern die einfache Erstellung von Desktop-Anwendungen erleichtert.

Mit Node.js können wir das Electron-Framework verwenden, um plattformübergreifende Desktop-Anwendungen zu erstellen. Electron verwendet Node.js und Chromium als Grundlage und ermöglicht Entwicklern die Erstellung von Desktop-Anwendungen mithilfe von Webtechnologien wie HTML, CSS und JavaScript.

In diesem Artikel stellen wir vor, wie Sie Node.js und das Electron-Framework zum Erstellen von Desktop-Anwendungen verwenden, einschließlich der Implementierung der Funktion zur Eingabe von N-Code.

Elektronenanwendung erstellen

Zuerst müssen wir sicherstellen, dass Node.js auf unserem Computer installiert ist. Beginnen wir als Nächstes mit der Erstellung einer Electron-Anwendung. Wir werden npm, den Paketmanager für Node.js, verwenden, um ein neues Electron-Projekt zu erstellen.

Öffnen Sie ein Terminal und geben Sie den folgenden Befehl ein: 

npm init -y

Dadurch wird ein neues Node.js-Projekt erstellt. Installieren Sie nun Electron-Abhängigkeiten: 

npm install electron --save-dev

Erstellen Sie jetzt eine main.js-Datei als Ihre Hauptprozessdatei. Diese Datei enthält die Logik für Ihre Anwendung: 

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();
});

Der obige Code erstellt ein Fenster und lädt die Datei index.html in dieses Fenster. Natürlich verfügt unsere Anwendung zu diesem Zeitpunkt noch über keine Schnittstelle. Als Nächstes erstellen wir eine HTML-Datei für das Interface-Design und das Schreiben von JavaScript-Code.

Um zu zeigen, wie man N-Codes aufzeichnet, erstellen Sie eine neue HTML-Datei und fügen Sie den folgenden Inhalt hinzu: 

<!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>

In dieser HTML-Datei haben wir einen Textbereich für Entered the N hinzugefügt Code hinzugefügt und eine Aufnahmetaste und eine Stopptaste hinzugefügt. Gleichzeitig haben wir auch eine JavaScript-Datei für die Implementierung der interaktiven Front-End-Logik hinzugefügt.

Implementierung der Aufnahmefunktion von N-Code

Als nächstes erstellen wir den JavaScript-Code zur Steuerung der Aufnahmetaste und der Stopptaste. Erstellen Sie eine JavaScript-Datei mit dem Namen renderer.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu: 

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);
  });
}

Jetzt haben wir die Logik der Aufnahme- und Stoppschaltflächen in JavaScript-Code implementiert. Wenn der Benutzer die Aufnahmetaste drückt, verwenden wir die DesktopCapturer-API, um den Stream aus dem vom Benutzer ausgewählten Screenshot abzurufen. Wir instanziieren den Medienrekorder mithilfe der MediaRecorder-API und übertragen die empfangenen Datenfragmente in ein Array. Wenn der Benutzer die Stopptaste drückt, rufen wir die Stoppmethode von MediaRecorder auf, um die Aufnahme zu stoppen. Die empfangenen Daten werden für die zukünftige N-Code-Übersetzung verwendet.

N-Transcoder

Jetzt haben wir den JavaScript-Code zum Aufzeichnen und Stoppen des Medienstreams erstellt. Als Nächstes stellen wir vor, wie Sie mit einem Open-Source-Online-Medienkonverter aufgezeichnete Medienströme in N-Code konvertieren.

Wir können den Open-Source-Webmedienkonverter CloudConvert verwenden, um Medienströme in N-Code zu konvertieren. CloudConvert bietet eine REST-API, die uns hilft, Medienstreams oder Dateien einfach in andere Formate wie N-Code zu konvertieren. Dazu müssen wir das Cloudconvert-Paket im Projekt installieren.

Öffnen Sie ein Terminal und geben Sie den folgenden Befehl ein: 

npm install cloudconvert --save

Als Nächstes verwenden wir die REST-API von CloudConvert, um den aufgezeichneten Medienstream in N-Code zu konvertieren und ihn unserem Eingang hinzuzufügen die Anwendung. 

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);
  }
}

Im obigen Code legen wir den APIKey, das Eingabeformat und das Ausgabeformat der Cloud-Konvertierungs-API als Variablen fest. Nach der Aufzeichnung des Medienstreams übertragen wir die Daten in das Array „recordedChunks“, erstellen dann mithilfe der Blob-API ein Blob-Objekt mit den aufgezeichneten Daten und lesen die BLOB-Daten mithilfe der FileReader-API. Sobald wir die Blob-Daten erhalten haben, konvertieren wir sie mithilfe der Buffer-API in das Base64-Format und übermitteln dann die Base64-codierten Aufzeichnungsdaten zur Konvertierung mithilfe der REST-API von CloudConvert.

Zuletzt fügen wir den konvertierten N-Code zur Benutzeroberfläche der Anwendung hinzu.

Fazit

In diesem Artikel haben wir beschrieben, wie man eine Desktop-Anwendung mit Node.js und dem Electron-Framework erstellt und wie man sie verwendet Die JavaScript- und Cloud-Konvertierungs-API wandelt aufgezeichnete Medienströme in N-Code um. Abschließend zeigen wir, wie Sie den konvertierten N-Code zur Benutzeroberfläche der Anwendung hinzufügen.

Desktop-Anwendungen können einfach mit Node.js und dem Electron-Framework erstellt werden, während JavaScript und andere Open-Source-Bibliotheken die Implementierung von Desktop-Anwendungen noch einfacher und einfacher machen können. Die Verwendung der Cloud-Konvertierungs-API kann uns leistungsstarke Medienkonvertierungsfunktionen bieten. Ich hoffe, dieser Artikel hat Ihnen dabei geholfen, zu lernen, wie Sie funktionsreiche Desktop-Anwendungen erstellen.

Das obige ist der detaillierte Inhalt vonSo importieren Sie Javascript in die Desktop-Anwendung von node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 架构 css electron html npm JS 对象 ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welcher Browser soll für die Javascript-Entwicklung verwendet werden?Nächster Artikel：Welcher Browser soll für die Javascript-Entwicklung verwendet werden?

In Verbindung stehende Artikel

Mehr sehen