javascript를 node.js 데스크톱 애플리케이션으로 가져오는 방법-프런트엔드 Q&A-php.cn

javascript를 node.js 데스크톱 애플리케이션으로 가져오는 방법

PHPz

풀어 주다： 2023-04-25 14:33:07

원래의

586명이 탐색했습니다.

웹 애플리케이션이 성장하면서 JavaScript는 개발에 가장 널리 사용되는 프로그래밍 언어 중 하나가 되었습니다. 그러나 기술이 발전함에 따라 JavaScript는 더 이상 웹 브라우저 환경에서의 개발에만 국한되지 않습니다. 이제 JavaScript를 사용하여 풍부한 데스크톱 애플리케이션을 구축할 수 있습니다. 가능한 방법 중 하나는 Node.js를 사용하는 것입니다.

Node.js는 효율적이고 확장 가능한 웹 및 서버 측 애플리케이션을 구축하기 위한 오픈 소스 JavaScript 런타임 환경입니다. 크로스 플랫폼이며 개발자가 데스크톱 애플리케이션을 쉽게 구축할 수 있도록 돕는 강력한 모듈식 시스템을 갖추고 있습니다.

Node.js를 사용하면 Electron 프레임워크를 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 구축할 수 있습니다. Electron은 Node.js와 Chromium을 기반으로 사용하므로 개발자는 HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 데스크톱 애플리케이션을 구축할 수 있습니다.

이 글에서는 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코드 녹화 기능 구현하기

다음으로 녹화버튼과 정지버튼을 제어하는 자바스크립트 코드를 작성해보겠습니다. 프로젝트의 루트 디렉터리에 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의 중지 메서드를 호출하여 녹음을 중지합니다. 수신된 데이터는 향후 N 코드 번역에 사용됩니다.

N 코드 변환기

이제 미디어 스트림을 녹화하고 중지하기 위한 JavaScript 코드를 만들었습니다. 다음으로 오픈 소스 온라인 미디어 변환기를 사용하여 녹화된 미디어 스트림을 N 코드로 변환하는 방법을 소개합니다.

오픈 소스 웹 미디어 변환기 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);
  }
}

로그인 후 복사

위 코드에서는 apiKey, 클라우드 변환 API의 입력 형식, 출력 형식을 변수로 설정했습니다. 미디어 스트림을 기록한 후 데이터를 recordsChunks 배열에 푸시한 다음 Blob API를 사용하여 녹음된 데이터가 포함된 Blob 개체를 만들고 FileReader API를 사용하여 BLOB 데이터를 읽습니다. Blob 데이터를 얻은 후에는 Buffer API를 사용하여 이를 Base64 형식으로 변환한 다음 CloudConvert의 REST API를 사용하여 변환을 위해 Base64로 인코딩된 녹음 데이터를 제출합니다.

마지막으로 변환된 N 코드를 애플리케이션의 UI에 추가합니다.

결론

이 기사에서는 Node.js와 Electron 프레임워크를 사용하여 데스크톱 애플리케이션을 만드는 방법과 JavaScript 및 Cloud Conversion API를 사용하여 녹화된 미디어 스트림을 N 코드로 변환하는 방법을 다루었습니다. 마지막으로 변환된 N 코드를 애플리케이션의 UI에 추가하는 방법을 보여줍니다.

데스크톱 애플리케이션은 Node.js 및 Electron 프레임워크를 사용하여 쉽게 구축할 수 있으며, JavaScript 및 기타 오픈 소스 라이브러리를 사용하면 데스크톱 애플리케이션 구현을 더욱 간단하고 쉽게 만들 수 있습니다. 클라우드 변환 API를 사용하면 강력한 미디어 변환 기능을 제공할 수 있습니다. 이 기사가 기능이 풍부한 데스크톱 애플리케이션을 구축하는 방법을 배우는 데 도움이 되었기를 바랍니다.

위 내용은 javascript를 node.js 데스크톱 애플리케이션으로 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!