본문 바로가기

Tried. Failed. Logged.

728x90

🖥️프론트엔드/Electron.js10

일렉트론 - 사용자로부터 웹 캠, 마이크 가져오기 웹 캠, 마이크 가져오기 window.addEventListener('DOMContentLoaded', () => { navigator.getUserMedia({video: true, audio: true}, (localMediaStream) => { var video = document.querySelector('video') video.srcObject = localMediaStream video.autoplay = true }, (e) => {}) }) 참고: [웹 캠 가져오기] https://stackoverflow.com/questions/38276409/electron-allowing-access-to-webcam 2022. 11. 7.

일렉트론 - 부트스트랩(bootstrap) 적용 모듈 다운로드 npm install –save jquery npm install –save bootstrap bootstrap import TEST BTN 출처: https://akageun.github.io/2018/08/22/electron-bs4.html [Electron.js] Bootstrap 4 사용하기. 언제나 개발하기를 즐기는 개발자 입니다. akageun.github.io 2022. 11. 1.

Electron - Preload에서 npm 모듈 사용하기 random이라는 모듈을 사용하고 싶을 경우 main.js const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') } }) webPreferences 객체에 nodeIntegration: true를 추가한다. preload.js const random = require('random') window.addEventListener('DOMContentLoaded', () => { document.querySelector("#btn").addEventListener("click", ()=>{ aler.. 2022. 10. 31.

Electron - loadURL로 문서 불러온 후에 자바스크립트 실행 win.loadURL('https://google.com'); win.webContents.executeJavaScript('document.body.innerHTML = "1234"'); 참고: https://javascript.hotexamples.com/examples/electron/remote.BrowserWindow/loadURL/javascript-remote.browserwindow-loadurl-method-examples.html JavaScript remote.BrowserWindow.loadURL Examples, electron.remote.BrowserWindow.loadURL JavaScript Examples - HotExamples javascript.hotexamples... 2022. 4. 1.

Electron - 렌더러가 메인에게 신호 보내기(ipcMain & ipcRenderer) [@electron/remote 모듈 필요] // In the Renderer const { BrowserWindow } = require('@electron/remote') // In the main process: require('@electron/remote/main').initialize() [renderer.js] const { ipcRenderer } = require('electron') //to minimize ipcRenderer.send('minimize', data); [main.js] const { ipcMain } = require('electron') ipcMain.on('minimize', (event, data) => { //Minimize logic }) 출처: https:.. 2022. 3. 28.

Electron - Tray 생성 및 클릭 이벤트, Tray 아이콘 변경 const { app, BrowserWindow, Menu, Tray } = require('electron'); let tray = null app.whenReady().then(() => { tray = new Tray('./icon1.png'); var contextMenu = Menu.buildFromTemplate([ { label: 'Hello world!', click: function(){ console.log('Hello world!'); tray.setImage('./icon2.png'); } }, { label: 'Quit', click: function(){ app.quit(); } } ]); tray.setContextMenu(contextMenu); }) Tray 생성 및 클릭 .. 2022. 3. 28.

Electron - 마우스 드래그로 창 움직이기 element{ -webkit-app-region: drag; } 출처: https://tinydew4.github.io/electron-ko/docs/api/frameless-window/ Frameless 윈도우 툴바, 테두리, 시각적인 "chrome" 없이 윈도우를 엽니다. tinydew4.github.io 2022. 3. 28.

Electron - 로드가 다된후에 창 띄우기 let win = new BrowserWindow({ show: false, }); win.once('ready-to-show', () => { win.show() }) 출처: https://www.electronjs.org/docs/latest/api/browser-window BrowserWindow | Electron Create and control browser windows. www.electronjs.org 2022. 3. 27.

Electron - 클립보드 조작 const {clipboard} = require('electron'); clipboard.writeText('클립보드 복사!'); // 클립보드 텍스트 복사 clipboard.readText(); // 클립보드 텍스트 가져오기 출처: https://tinydew4.github.io/electron-ko/docs/api/clipboard/ clipboard 시스템 클립보드에 복사와 붙여넣기를 수행합니다. tinydew4.github.io 2022. 3. 27.

Electron - 초기 설정 및 실행 [설치] npm init npm i electron [package.json] { "main": "main.js", "scripts": { "start": "electron ." } } [main.js] const { app, BrowserWindow, Menu } = require('electron'); Menu.setApplicationMenu(false); // 메뉴 비활성화 function createWindow(){ let win = new BrowserWindow({ frame: true, width: 600, height: 400, minWidth: 400, minHeight: 200, maxWidth: 700, maxHeight: 500, resizable: true, webPreferen.. 2022. 3. 27.

이전 1 다음

728x90

티스토리툴바