ffmpeg을 이용하여 동영상을 인코딩하는 데스크톱 앱을 만들어야 했다.
빠르게 만들기 위해 GitHub에 있을까하고 검색해보니 역시나 있었다.
만드는 과정에서 추가로 필요했던 기능들은 다음과 같았다.
-
새로 고침 막기
-
메뉴 수정
-
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": "."
}
}
참고 문헌
-
https://github.com/likethemammal/electron-ffmpeg-example
-
https://ffmpeg.zeranoe.com/builds/
-
https://github.com/fluent-ffmpeg/node-fluent-ffmpeg
-
https://www.electronjs.org/docs/api/menu
-
https://discuss.atom.io/t/prevent-browserwindow-from-reloading/20541/3