화면공유 앱 제작일지

iRODOG 2017-12-11 10:10

목표

구글 행아웃처럼 화면 공유를 할 수 있는 데스크탑 프로그램 만들기

1개월 차

간단한 스크린캡쳐 electron 앱 만들기 / 스크린 레코딩하여 저장하는 기능 구현

2개월 차

실시간 스트리밍 기능 구현(socket.io 활용)

추가 목표

멀티캐스트 / 바로 접근가능한 링크만들기 / firebase를 이용해 간단한 채팅창 추가하기


회고

12.10 (5주차) new

불참

11.25 (4주차)

오늘 한 것 : electron 버전 다운그레이드 (1.6.1), 캡쳐 코드 구현 및 디버깅

지난 시간의 코드를 계속 이어서 작성했다. 오늘은 일단 무조건 코딩을 하자는 위주다보니 하나하나 분석하지 않고 일단 쓰고나서 생각했는데, 확실히 버그가 무지막지하게 났다.

babel을 사용해서 ES6으로 변환하는 과정에서 발생하는 에러를 다 고쳤더니 다음은 일렉트론 실행하면서 나는 에러들이 기다리고 있었다.

버전 문제인가 싶어 (지난주에 최신으로 올림) 다시 책과 똑같은 버전으로 바꾸기로 했다. package.json과 모듈에서 electron 관련 모듈을 모두 지우고 다시 npm install 했는데 여전히 같은 버전이어서 다운그레이드 명령어로 시도했더니 성공했다. 하지만 버전 문제가 아니었다는 것이 함정.

마지막으로 책 출판사 홈페이지에서 예제 소스를 받아다가 비교해서 찾아보기로 했다 ㅠㅠ

여러가지 삽질을 하면서 설치를 기다리는 중간에 Notion 버그 리포팅을 했는데, 놀랍게도 바로 실시간 채팅으로 응답이 왔다. 하지만 오늘은 추수감사절이라고 월요일에 제일 먼저 봐준다고 한다 😅

다음주가 중간 발표인데 어서 완성해야겠다

11.18 (3주차)

오늘 한 것 : electron screen, Display object, Frameless Window 공부 및 정리

환경 설정을 거의 마쳐서 오늘은 본격적으로 예제 코드를 짜기 시작했다. 현재 작성중인 코드는 투명한 사각형을 드래그해서 화면을 캡쳐하는 예제이다. 메소드 참고를 위해 공식 홈을 찾아보니 본격적으로 Electron 공식 문서가 한글화되기 시작한 것 같다. 현재 18%정도 진행이 된 것으로 뜬다.

일단 화면 캡쳐를 위해 디스플레이 정보를 얻어야 하는데 이는 screen모듈을 통해 display 객체를 얻으면 알 수 있다. 단, 멀티 윈도우의 경우 디스플레이가 여러개 존재하기 때문에 배열 형태로 제공된다. 맥의 경우 보통 다중 데스크탑을 쓰는데 활성화 된 디스플레이만 보이는건지, 플랫폼 별 설정까지 가능한지는 아직 모르겠다.

문서를 쭉 정리하면서 읽다가 문득 행아웃은 어떻게 네이티브에서만 가능한 기능을 구현했는가 하는 생각이 들었다.

나는 Native API를 사용하기 위해 일렉트론을 선택했지만 구글 행아웃은 웹 브라우저만으로도 데스크탑 화면 전송이나 카메라 사용이 가능하다. 궁금해서 찾아봤는데, 일단 행아웃 화상 통화를 하기 위해 크롬 브라우저에서 pc의 카메라와 마이크 사용 권한을 요청한다. 사파리는 따로 데스크탑 플러그인을 설치하도록 되어있다. 크롬만 권한 설정만으로 가능한건지 브라우저별로 API가 존재하는지 모르겠다. 이 부분은 개발하면서 틈틈히 리서치를 해봐야겠다.

일렉트론을 공부하면서 계속 기본 설정을 까먹기도 하고 나중에 세미나 같은 걸 할지도 몰라서 따로 노션에 정리하고있다. 또, md파일로 추출할 수 있어서 블로그를 완성하면 업로드 하려 한다.

Electron Capture App Memo

11.11 (2주차)

오늘 한 것 : 책 Chapter05 화면 캡쳐 예제 - github repository설정 및 npm dependency 설치 react, webpack

나는 프로젝트 시작 전에 시간이 좀 걸리는 편인데, 노션에 이것저것 잡다한 정리를 하느라 느즈막하게 개발을 시작했다.

우선 참고 서적을 보면서 electron 데모 프로젝트 설정을 했다. 설정은 여러 번 해보았기 때문에 특별히 어려움은 없었다. 책 예제는 React.js을 사용하고 있지만, 실제 본 프로젝트 구성을 할 때는 따로 공부하고 있는 Vue.js로 대체하거나 간단히 jQuery로 진행할 것 같다.

Photon이라는 electron 전용 UI Kit도 설치하라고 되어 있는데 오픈된 이슈 확인 결과 더 이상 관리되지 않는 소스인 듯 하다. 이미 2016년부터 문제가 많았던 것 같은데 고치지 않은 채 출간된 듯… 어쨌든 이것 역시 bootstrap으로 대체할 예정이다.

지난 시간에 참여하지 못했던 분들의 소개와 프로젝트 계획을 들었다. 특히 swift 오픈소스 프로젝트에 관심이 간다. 마지막으로 입동팀 회고록 작성 방법 설명을 들었다. fork해서 pr날리는 건 처음 해봤는데 이런식으로 진행하는거였구나 싶어서 재미있었다. 스티커도 받았다 😎

11.04 (1주차)

오늘 한 것 : 첫 킥오프 모임

입동팀 첫 모임이 있었다. 모두 앞으로 어떤 걸 할건지 간단히 얘기하고 피드백을 했다. 나는 기존에 쓰던 닉네임인 godori 대신 iRODOG으로 소개했다. 딱히 비밀은 아니지만 godori의 애너그램 단어 중 하나이다. 장점이 있다면 구글 검색이 잘 되고 왠지 애플 제품명 같기 떄문이다…


References