ホームページ > 記事 > ウェブフロントエンド > JavaScriptをnode.jsデスクトップアプリケーションにインポートする方法
JavaScriptをnode.jsデスクトップアプリケーションにインポートする方法
- PHPzオリジナル
- 2023-04-25 10:43:30604ブラウズ
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 サイトの他の関連記事を参照してください。