소개

누구?

기술 개발부라고 하는 곳에서 SkyWay 라고 하는 WebRTC 관련 서비스의 개발을 하고 있습니다. 현재 2년째입니다. 취미는 스플래툰과 경기 프로그래밍입니다.

내용

이것은 NTT Communications Advent Calendar 2018의 9 일째 기사입니다.
Electron에서 화면 녹화를 하는 어플리케이션을 작성해 보았습니다.
작성한 것은 여기 리포지토리에 공개하고 있습니다. 현재, 최소한의 버튼과 화면만 존재하지만 MIME-Type의 선택도 가능합니다.

시도한 동기

화면 녹화의 어플리케이션을 만들어 보려고 생각한 동기는, 일중등에서 버그의 발견이나 그 디버그를 하고 있을 때, 영상으로 남길 수 있으면 알기 쉽다고 생각했기 때문입니다. (macOS라면 ​​mojave에서 화면 녹화의 바로 가기가 존재 htps : // 꼬리 rt. 아 ぇ. 코m/쟈-jp/HT208721 ) 그 위에 OS에 관계없이 화면 녹화를 할 수 있으면 기쁘다고 생각해 어플리케이션을 작성하려고 했습니다.
처음에는 Google Chrome70에서 Screen Capture가 가능해졌으므로 그 기능을 이용하려고했습니다. screen/window등의 선택이나 그 인터페이스가 있어 이용하기 쉬웠기 때문입니다.
그러나, Electron 쪽이 간편하다고 생각해, Electron으로 만들기 시작했습니다.

구현 정보

사용 기술

electron-vue

Electron

Vue.js

검증 환경

Windows 10 Pro

macOS sierra

구현 세부사항

Screen capture 정보

Chrome의 Screen Capture를 사용하려고했지만 Electron의 Chromium 버전은 66이므로 위의 API를 사용할 수 없으며 Electron API을 사용하기로 결정했습니다. 이쪽은 Chrome과는 달리 좋든 나쁘든 데이터만이 넘겨지므로, 선택 UI등은 자작할 필요가 있습니다.

electron-vue

electron-vue를 사용한 것은, Electron의 기동 주위이거나 메뉴이거나라고 하는 본근과 떨어져 있지만 조금 번거로운 곳을 해 주기 때문에 이용했습니다. vue.js에 대해서는 거의 데이터 바인딩 정도의 기능 밖에 이용할 수 없습니다. (vuex도 vue-router도 사용하지 않음)
실제의 구현한 부분은 src/render/components/Screen.vue 안에 있습니다.

목록 표시 및 녹화 대상 선택 정보

목록 작성은 Electron의 desktopCapturer에서 미리보기 이미지 등을 검색하여 이미지로 표시합니다. 이 메소드로부터는 그 밖에도 getUserMedia로 사용하는 ID나 window의 이름도 취득 가능합니다.
리스트의 영상을 실제로 취득하려면 , getUserMedia내에서 chromeMediaSourceId: source.id 와 같은 형태로 상기의 ID를 건네줄 필요가 있습니다. 이번에, macOS Sierra상에서는 audio:true 그렇다고 실패했기 때문에, audio는 취득하고 있지 않습니다.

녹화 및 저장 정보

영상의 녹화에 대해서는 MediaRecorder API를 이용하고 있습니다. Start/Stop 버튼이 이 API의 start/stop에 대응하고 있기 때문에, 간단히 임의 타이밍에서의 녹화의 개시와 정지를 구현할 수 있습니다.
파일의 보존에 대해서는 node.js의 fs 모듈을 이용하는 것만으로입니다만, getUserMedia로 취득한 데이터를 fs.writeFileSync 로 보존할 수 있게 되기 위해서는 데이터 형식을 복수회 변환할 필요가 있습니다.
구체적으로는, MediaStream -> Blob -> fileReader.result -> Uint8Array 가 됩니다.

예

예를 들어 이러한 동영상을 찍을 수 있습니다.

감상

데이터 형식의 변환을 제외하면 그렇게 어려운 곳도 없이 화면 녹화가 가능하게 되었습니다.
좀 더 구현하면 라이브 스트리밍 API에 던지거나 WebRTC를 사용하여 화면 공유를 사용하여 설명할 수 있다고 생각합니다.