Skip to main content

desktopCapturer

navigator.mediaDevices.getUserMedia API를 사용해 데스크톱에서 오디오와 비디오를 캡처할 수 있는 미디어 소스에 대한 정보에 접근한다.

프로세스: Main

다음 예제는 제목이 Electron인 데스크톱 윈도우에서 비디오를 캡처하는 방법을 보여준다:

// main.js
const { app, BrowserWindow, desktopCapturer, session } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow()

  session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
    desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
      // 찾은 첫 번째 화면에 접근 권한을 부여한다.
      callback({ video: sources[0], audio: 'loopback' })
    })
    // true로 설정하면, 시스템 선택기를 사용할 수 있는 경우 사용한다.
    // 참고: 이 기능은 현재 실험적이다. 시스템 선택기를 사용할 수 있는 경우,
    // 시스템 선택기가 사용되며 미디어 요청 핸들러는 호출되지 않는다.
  }, { useSystemPicker: true })

  mainWindow.loadFile('index.html')
})
// renderer.js
const startButton = document.getElementById('startButton')
const stopButton = document.getElementById('stopButton')
const video = document.querySelector('video')

startButton.addEventListener('click', () => {
  navigator.mediaDevices.getDisplayMedia({
    audio: true,
    video: {
      width: 320,
      height: 240,
      frameRate: 30
    }
  }).then(stream => {
    video.srcObject = stream
    video.onloadedmetadata = (e) => video.play()
  }).catch(e => console.log(e))
})

stopButton.addEventListener('click', () => {
  video.pause()
})
<!-- index.html -->
<html>
<meta http-equiv="content-security-policy" content="script-src 'self' 'unsafe-inline'" />
  <body>
    <button id="startButton" class="button">Start</button>
    <button id="stopButton" class="button">Stop</button>
    <video width="320" height="240" autoplay></video>
    <script src="renderer.js"></script>
  </body>
</html>

자세한 내용은 navigator.mediaDevices.getDisplayMedia를 참고한다.

참고: navigator.mediaDevices.getDisplayMedia는 deviceId를 사용해 소스를 선택할 수 없도록 제한한다. 자세한 내용은 스펙을 확인한다.

메서드​

desktopCapturer 모듈은 다음과 같은 메서드를 제공한다:

desktopCapturer.getSources(options)​

  • options Object
    • types string[] - 캡처할 데스크톱 소스의 타입을 나열한 문자열 배열. 가능한 타입은 screen과 window이다.
    • thumbnailSize Size (선택 사항) - 미디어 소스 썸네일의 크기. 기본값은 150 x 150이다. 썸네일이 필요하지 않을 경우 너비 또는 높이를 0으로 설정한다. 이렇게 하면 각 윈도우와 화면의 콘텐츠를 캡처하는 데 필요한 처리 시간을 절약할 수 있다.
    • fetchWindowIcons boolean (선택 사항) - 윈도우 아이콘을 가져오려면 true로 설정한다. 기본값은 false이다. false인 경우 소스의 appIcon 속성은 null을 반환한다. 소스 타입이 screen인 경우에도 마찬가지이다.

반환값 Promise<DesktopCapturerSource[]> - DesktopCapturerSource 객체 배열로 해결된다. 각 DesktopCapturerSource는 캡처할 수 있는 화면 또는 개별 윈도우를 나타낸다.

참고 macOS 10.15 Catalina 이상에서 화면 콘텐츠를 캡처하려면 사용자의 동의가 필요하다. 이는 systemPreferences.getMediaAccessStatus를 통해 확인할 수 있다.

주의사항​

macOS에서는 navigator.mediaDevices.getUserMedia를 사용해 오디오를 캡처할 수 없다. 이는 시스템의 오디오에 접근하려는 앱이 서명된 커널 확장을 필요로 하는 근본적인 제약 때문이다. Chromium과 이를 기반으로 하는 Electron은 이를 제공하지 않는다.

Soundflower 같은 다른 macOS 앱을 사용해 시스템 오디오를 캡처하고, 이를 가상 오디오 입력 장치로 전달하면 이 제약을 우회할 수 있다. 이후 이 가상 장치는 navigator.mediaDevices.getUserMedia로 쿼리할 수 있다.