일렉트론으로 OBS input overlay 클론코딩

  • 오버워치 강의 영상을 보다가 영상 속 키보드 마우스 뷰어? 를 가끔 보았었다
  • 일단 깔끔한 키보드 뷰어로 흥미가 생겼었는데
  • 찾아보니까 OBS input overlay라는 OBS 전용 플러그인이었다
  • 일렉트론이라는 프레임워크를 사용하여
  • html, css, js로 데스크탑 앱으로 만들어보았다

신경 쓴 것

글로벌 키 훅?

  • 내가 만든 앱 밖에서 키가 눌리고 떼지는 걸 알아야 한다
index.js
1
2
3
4
5
const ioHook = require('iohook');

ioHook.on('keydown', (event) => {
mainWindow.webContents.send('keydown', event.rawcode);
});
  • iohook 패키지를 사용해서 해결하게 되었다
  • 그런데 iohook이 최신 버전의 일렉트론에서 실행이 안되어서 일렉트론 8.x버전으로 낮추어 진행하게 되었다

overlay window

  • 오버레이 화면에 마우스 클릭이 되지 않도록 했다
  • 오버레이 화면이 프레임을 가지지 않도록 했다
  • 오버레이 화면이 모니터 크기를 구하여 우측 하단에 생기도록 하였다 (여러 해상도 대응)

일렉트론

  • 웹 기술로 데스크탑앱을 만들 수 있게해주는 마법이다
  • 나는 요즘 js만 해왔기 때문에 일렉트론에 대해 찾아보았다
  • 일렉트론으로 만들어진 대표적인 앱으로는 비주얼 스튜디오 코드가 있다

일렉트론 시작

일렉트론 단점?

  • 엄청나게 간단한 앱일지라도 nodejs + Chromium 조합으로 용량이 상당히크다

소스코드

Author

chinsung

Posted on

2020-11-05

Updated on

2021-08-02

Licensed under

댓글