JavaScriptをnode.jsデスクトップアプリケーションにインポートする方法-フロントエンドQ&A-php.cn

Web アプリケーションの成長に伴い、JavaScript は開発に最も人気のあるプログラミング言語の 1 つになりました。しかし、テクノロジーの進歩に伴い、JavaScript は Web ブラウザー環境での開発に限定されなくなりました。 JavaScript を使用してリッチなデスクトップアプリケーションを構築できるようになりました。考えられる方法の 1 つは、Node.js を使用することです。

Node.js は、効率的でスケーラブルな Web およびサーバーサイドアプリケーションを構築するためのオープンソース JavaScript ランタイム環境です。クロスプラットフォームであり、開発者がデスクトップアプリケーションを簡単に構築できる強力なモジュラーシステムを備えています。

Node.js を使用すると、Electron フレームワークを使用してクロスプラットフォームのデスクトップアプリケーションを構築できます。 Electron は Node.js と Chromium を基盤として使用し、開発者が HTML、CSS、JavaScript などの Web テクノロジーを使用してデスクトップアプリケーションを構築できるようにします。

この記事では、N コードを入力する機能の実装方法を含め、Node.js と Electron フレームワークを使用してデスクトップアプリケーションを構築する方法を紹介します。

Electron アプリケーションの作成

まず、Node.js がコンピューターにインストールされていることを確認する必要があります。次に、Electron アプリケーションの作成を開始しましょう。 Node.js のパッケージマネージャーである npm を使用して、新しい Electron プロジェクトを作成します。

ターミナルを開いて次のコマンドを入力します:

npm init -y

ログイン後にコピー

これにより、新しい Node.js プロジェクトが作成されます。ここで、Electron の依存関係をインストールします。

npm install electron --save-dev

ログイン後にコピー

次に、メインプロセスファイルとして main.js ファイルを作成します。このファイルには、アプリケーションのロジックが含まれます。

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

ログイン後にコピー

上記のコードは、ウィンドウを作成し、index.html ファイルをウィンドウに読み込みます。もちろん、この時点ではアプリケーションにはインターフェースがありません。次に、インターフェイスの設計と JavaScript コードを記述するための HTML ファイルを作成します。

N コードを記録する方法を示すには、新しい HTML ファイルを作成し、次の内容を追加してください:

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

ログイン後にコピー

この HTML ファイルには、N コードを入力するためのテキスト領域を追加しました。そして録音ボタンと停止ボタンを追加しました。同時に、フロントエンドの対話型ロジック実装用の JavaScript ファイルも追加しました。

Nコードの録音機能の実装

次に、録音ボタンと停止ボタンを制御するJavaScriptコードを作成します。プロジェクトのルートディレクトリに renderer.js という名前の JavaScript ファイルを作成し、次のコードを追加します。

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

ログイン後にコピー

これで、JavaScript コードに録音ボタンと停止ボタンのロジックが実装されました。ユーザーが記録ボタンを押すと、desktopCapturer API を使用して、ユーザーが選択したスクリーンショットからストリームを取得します。 MediaRecorder API を使用してメディアレコーダーをインスタンス化し、受信したデータフラグメントを配列にプッシュします。ユーザーが停止ボタンを押すと、MediaRecorder の stop メソッドを呼び出して録音を停止します。受信したデータは、今後の N コード変換に使用されます。

N トランスコーダ

これで、メディアストリームを記録および停止するための JavaScript コードが作成されました。次に、オープンソースのオンラインメディアコンバータを使用して、記録されたメディアストリームを N コードに変換する方法を紹介します。

オープンソースの Web メディアコンバーター CloudConvert を使用して、メディアストリームを N コードに変換できます。 CloudConvert は、メディアストリームやファイルを N コードなどの他の形式に簡単に変換するのに役立つ REST API を提供します。これを行うには、プロジェクトに Cloudconvert パッケージをインストールする必要があります。

ターミナルを開いて次のコマンドを入力します:

npm install cloudconvert --save

ログイン後にコピー

次に、CloudConvert の REST API を使用して、記録されたメディアストリームを N コードに変換し、アプリケーションに追加します。

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

ログイン後にコピー

上記のコードでは、クラウド変換APIのapiKey、入力形式、出力形式を変数として設定しています。メディアストリームを記録した後、データを RecordedChunks 配列にプッシュし、Blob API を使用して記録されたデータを含む Blob オブジェクトを作成し、FileReader API を使用して BLOB データを読み取ります。 BLOB データを取得したら、Buffer API を使用してそれを Base64 形式に変換し、CloudConvert の REST API を使用して変換のために Base64 でエンコードされた記録データを送信します。

最後に、変換された N コードをアプリケーションの UI に追加します。

結論

この記事では、Node.js と Electron フレームワークを使用してデスクトップアプリケーションを作成する方法と、JavaScript とクラウド変換 API: メディアストリームは N コードに変換されます。最後に、変換された N コードをアプリケーションの UI に追加する方法を示します。

デスクトップアプリケーションは、Node.js と Electron フレームワークを使用して簡単に構築でき、JavaScript やその他のオープンソースライブラリを使用すると、デスクトップアプリケーションの実装がよりシンプルかつ簡単になります。クラウド変換 API を使用すると、強力なメディア変換機能が提供されます。この記事が、機能豊富なデスクトップアプリケーションの構築方法を学ぶのに役立つことを願っています。

以上がJavaScriptをnode.jsデスクトップアプリケーションにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。