[JS] Electron으로 앱만들기

ffmpeg을 이용하여 동영상을 인코딩하는 데스크톱 앱을 만들어야 했다.

 

빠르게 만들기 위해 GitHub에 있을까하고 검색해보니 역시나 있었다.

 

만드는 과정에서 추가로 필요했던 기능들은 다음과 같았다.

1. 새로 고침 막기

2. 메뉴 수정

3. asar로 빌드했을 때 실행 파일 불러오기

새로 고침을 막는 것은 우선 단축키가 아무 일도 하지 않도록 했다.

 

그리고 기본 메뉴에 새로 고침이 있었는데 이것 역시 제거하면서 불필요한 메뉴들을 모두 없앴다.

 

fluent-ffmpeg의 경우 ffmpeg 실행 파일을 불러 쓸 수 있었는데

 

asar로 빌드하는 경우 실행 파일도 같이 포함되어 만들어지나 파일 실행은 할 수 없었다.

 

그래서 ffmpeg, ffprobe 가 특정 디렉토리에 존재하도록 하고 이 디렉토리에 접근할 수 있어야 했다.

 

extraFiles를 이용하여 특정 디렉토리에 파일을 복사할 수 있었다.

 

그리고 getAppPath()로 특정 디렉토리에 접근하여 파일을 불러올 수 있었다.

 

작성한 코드 일부는 다음과 같다.

const { app, globalShortcut, BrowserWindow, Menu } = require('electron');
const path = require('path');
const ffmpeg = require('fluent-ffmpeg');
const isPackaged = process.mainModule.filename.indexOf('app.asar') !== -1;

if (process.platform === "darwin") {
  if (isPackaged) {
    ffmpeg.setFfmpegPath(path.join(path.dirname(app.getAppPath()), '..', './Resources', 'bin/ffmpeg'));
    ffmpeg.setFfprobePath(path.join(path.dirname(app.getAppPath()), '..', './Resources', 'bin/ffprobe'));
  } else {
    ffmpeg.setFfmpegPath(path.join(__dirname, '.', 'bin/osx/ffmpeg'));
    ffmpeg.setFfprobePath(path.join(__dirname, '.', 'bin/osx/ffprobe'));
  }
} else if (process.platform === 'win32') {
  ffmpeg.setFfmpegPath(path.join(__dirname, '.', 'bin/win32/ffmpeg.exe'));
  ffmpeg.setFfprobePath(path.join(__dirname, '.', 'bin/win32/ffprobe.exe'));
} else {
  ffmpeg.setFfmpegPath(path.join(__dirname, '.', 'bin/win64/ffmpeg.exe'));
  ffmpeg.setFfprobePath(path.join(__dirname, '.', 'bin/win64/ffprobe.exe'));
}

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      devTools: false
    }
  });

  const isMac = process.platform === 'darwin';
  const template = [
    ...(isMac ? [{
      label: app.name,
      submenu: [
        { role: 'about' },
        { type: 'separator' },
        { role: 'hide' },
        { role: 'hideothers' },
        { role: 'unhide' },
        { type: 'separator' },
        { role: 'quit' }
      ]
    }] : []),
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More',
          click: async () => {
            await shell.openExternal('https://electronjs.org');
          }
        }
      ]
    }
  ];
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
  win.setMenuBarVisibility(false);

  win.loadFile('index.html');

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('browser-window-focus', () => {
    globalShortcut.register('CommandOrControl+R', () => {
    console.log('CommandOrControl+R is pressed: Shortcut Disabled');
});
globalShortcut.register('F5', () => {
    console.log('F5 is pressed: Shortcut Disabled');
});
});

app.on('browser-window-blur', () => {
    globalShortcut.unregister('CommandOrControl+R');
    globalShortcut.unregister('F5');
});

"build": {
  "productName": "My App",
  "appId": "com.my.app",
  "files": [
    "!bin/*"
  ],
  "extraFiles": [
    {
      "from": "bin/osx",
      "to": "Resources/bin",
      "filter": [
        "**/*"
      ]
    }
  ],
  "asar": true,
  "protocols": {
    "name": "myapp",
    "schemes": [
      "myapp"
    ]
  },
  "mac": {
    "target": [
      "dmg"
    ],
    "icon": "resources/icon.icns"
  },
  "dmg": {
    "internetEnabled": true
  },
  "win": {
    "target": [
      "zip",
      "nsis"
    ],
    "icon": "./resources/icon.ico"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "directories": {
    "buildResources": "./resources/installer/",
    "output": "./dist/",
    "app": "."
  }
}

 

참고 문헌

1. https://github.com/likethemammal/electron-ffmpeg-example

2. https://ffmpeg.zeranoe.com/builds/

3. https://github.com/fluent-ffmpeg/node-fluent-ffmpeg

4. https://www.electronjs.org/docs/api/menu

5. https://discuss.atom.io/t/prevent-browserwindow-from-reloading/20541/3