Cara mengimport javascript ke dalam aplikasi desktop node.js-Soal Jawab bahagian hadapan-php.cn

Cara mengimport javascript ke dalam aplikasi desktop node.js

PHPz

Lepaskan： 2023-04-25 14:33:07

asal

586 orang telah melayarinya

Dengan pertumbuhan aplikasi web, JavaScript telah menjadi salah satu bahasa pengaturcaraan yang paling popular untuk pembangunan. Walau bagaimanapun, dengan kemajuan teknologi, JavaScript tidak lagi terhad kepada pembangunan dalam persekitaran pelayar web. Kini, kita boleh menggunakan JavaScript untuk membina aplikasi desktop yang kaya. Satu cara yang mungkin ialah menggunakan Node.js.

Node.js ialah persekitaran masa jalan JavaScript sumber terbuka untuk membina aplikasi web dan sisi pelayan yang cekap dan berskala. Ia adalah platform merentas dan mempunyai sistem modular yang berkuasa yang membantu pembangun membina aplikasi desktop dengan mudah.

Dengan Node.js, kami boleh menggunakan rangka kerja Electron untuk membina aplikasi desktop merentas platform. Electron menggunakan Node.js dan Chromium sebagai asasnya, membolehkan pembangun membina aplikasi desktop menggunakan teknologi web seperti HTML, CSS dan JavaScript.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Node.js dan Electron untuk membina aplikasi desktop, termasuk cara melaksanakan fungsi memasukkan kod N.

Mencipta Aplikasi Elektron

Pertama, kita perlu memastikan Node.js dipasang pada komputer kita. Seterusnya, mari mula membuat aplikasi Electron. Kami akan menggunakan npm, pengurus pakej untuk Node.js, untuk mencipta projek Electron baharu.

Buka terminal dan masukkan arahan berikut:

npm init -y

Salin selepas log masuk

Ini akan mencipta projek Node.js baharu. Sekarang, pasang kebergantungan Electron:

npm install electron --save-dev

Salin selepas log masuk

Sekarang, buat fail main.js sebagai fail proses utama anda. Fail ini akan mengandungi logik untuk aplikasi anda:

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

Salin selepas log masuk

Kod di atas akan mencipta tetingkap dan memuatkan fail index.html ke dalam tetingkap itu. Sudah tentu, pada ketika ini aplikasi kami tidak mempunyai antara muka. Seterusnya, kami akan mencipta fail HTML untuk reka bentuk antara muka dan penulisan kod JavaScript.

Untuk menunjukkan cara merekod kod N, buat fail HTML baharu dan tambah kandungan berikut:

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

Salin selepas log masuk

Dalam fail HTML ini kami telah menambah kawasan teks untuk memasukkan kod N dan menambah butang rekod dan butang berhenti. Pada masa yang sama, kami juga menambah fail JavaScript untuk pelaksanaan logik interaktif bahagian hadapan.

Melaksanakan fungsi rakaman N-code

Seterusnya, kami akan mencipta kod JavaScript untuk mengawal butang rekod dan butang berhenti. Cipta fail JavaScript yang dipanggil renderer.js dalam direktori akar projek anda dan tambahkan kod berikut:

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

Salin selepas log masuk

Kini kami telah melaksanakan logik untuk butang rekod dan berhenti dalam kod JavaScript. Apabila pengguna menekan butang rekod, kami menggunakan API desktopCapturer untuk mendapatkan strim daripada tangkapan skrin yang dipilih oleh pengguna. Kami membuat seketika perakam media menggunakan API MediaRecorder dan menolak serpihan data yang diterima ke dalam tatasusunan. Apabila pengguna menekan butang berhenti, kami memanggil kaedah berhenti MediaRecorder untuk menghentikan rakaman. Data yang diterima akan digunakan untuk terjemahan kod-N pada masa hadapan.

N Transcoder

Kini kami telah mencipta kod JavaScript untuk merakam dan menghentikan strim media. Seterusnya, kami akan memperkenalkan cara menggunakan penukar media dalam talian sumber terbuka untuk menukar strim media yang dirakam kepada N-code.

Kami boleh menggunakan penukar media web sumber terbuka CloudConvert untuk menukar strim media kepada N-code. CloudConvert menyediakan API REST yang membantu kami menukar strim media atau fail dengan mudah kepada format lain seperti N-code. Untuk melakukan ini, kita perlu memasang pakej cloudconvert dalam projek.

Buka terminal dan masukkan arahan berikut:

npm install cloudconvert --save

Salin selepas log masuk

Seterusnya, kami akan menggunakan API REST CloudConvert untuk menukar strim media yang dirakam kepada N-kod dan menambahkannya ke tengah aplikasi kami.

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

Salin selepas log masuk

Dalam kod di atas, kami menetapkan apiKey, format input dan format output API penukaran awan sebagai pembolehubah. Selepas merakam strim media, kami menolak data ke dalam tatasusunan RecordedChunks, kemudian menggunakan Blob API untuk mencipta objek Blob yang mengandungi data yang direkodkan dan menggunakan FileReader API untuk membaca data BLOB. Setelah kami memperoleh data gumpalan, kami menukarnya kepada format Base64 menggunakan API Penampan dan kemudian menyerahkan data rakaman berkod Base64 untuk penukaran menggunakan API REST CloudConvert.

Akhir sekali, kami menambah kod N yang ditukar pada UI aplikasi.

Kesimpulan

Dalam artikel ini, kami membincangkan cara mencipta aplikasi desktop menggunakan Node.js dan rangka kerja Electron, serta cara menukar data yang direkodkan menggunakan JavaScript dan Aliran media API Penukaran Awan ditukar kepada kod-N. Akhir sekali, kami menunjukkan cara menambah kod N yang ditukar pada UI aplikasi.

Aplikasi desktop boleh dibina dengan mudah menggunakan Node.js dan rangka kerja Electron, manakala JavaScript dan perpustakaan sumber terbuka lain boleh menjadikan pelaksanaan aplikasi desktop lebih mudah dan mudah. Menggunakan API penukaran awan boleh memberikan kami keupayaan penukaran media yang berkuasa. Saya harap artikel ini membantu anda mempelajari cara membina aplikasi desktop yang kaya dengan ciri.

Atas ialah kandungan terperinci Cara mengimport javascript ke dalam aplikasi desktop node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!