desktopCapturer
navigator.mediaDevices.getUserMedia
APIを使用して、デスクトップからの音声と映像のキャプチャに利用できるメディアソース関連の情報にアクセスします。
プロセス: Main
以下の例では、タイトルが Electron
であるデスクトップウインドウからビデオをキャプチャする方法を示します。
// メインプロセス
const { desktopCapturer } = require('electron')
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
for (const source of sources) {
if (source.name === 'Electron') {
mainWindow.webContents.send('SET_SOURCE', source.id)
return
}
}
})
// プリロードスクリプト内。
const { ipcRenderer } = require('electron')
ipcRenderer.on('SET_SOURCE', async (event, sourceId) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
})
handleStream(stream)
} catch (e) {
handleError(e)
}
})
function handleStream (stream) {
const video = document.querySelector('video')
video.srcObject = stream
video.onloadedmetadata = (e) => video.play()
}
function handleError (e) {
console.log(e)
}
desktopCapturer
が提供するソースから映像をキャプチャするには、navigator.mediaDevices.getUserMedia
に渡す制約に、chromeMediaSource: 'desktop'
と audio: false
を含める必要があります。
デスクトップ全体から音声と映像の両方をキャプチャするには、navigator.mediaDevices.getUserMedia
に渡す制約に、audio
と video
の両方に対して chromeMediaSource: 'desktop'
を含める必要がありますが、chromeMediaSourceId
制約は不要です。
const constraints = {
audio: {
mandatory: {
chromeMediaSource: 'desktop'
}
},
video: {
mandatory: {
chromeMediaSource: 'desktop'
}
}
}
メソッド
desktopCapturer
モジュールには以下のメソッドがあります。
desktopCapturer.getSources(options)
戻り値 Promise<DesktopCapturerSource[]>
- DesktopCapturerSource オブジェクトの配列を使用して解決します。各 DesktopCapturerSource
は、キャプチャできる画面または個々のウィンドウを表します。
注釈 画面コンテンツをキャプチャするには、macOS 10.15 Catalina 以降でのユーザーの同意が必要です。同意しているかどうかは systemPreferences.getMediaAccessStatus
で検知できます。
Caveats
navigator.mediaDevices.getUserMedia
はシステムのオーディオにアクセスしたいアプリが署名付きカーネル拡張を必要とするという基本的な制限のため、macOS ではオーディオキャプチャが動作しません。 Chrome、ひいては Electron はこれを提供していません。
Soundflower のような他の macOS アプリでシステムオーディオをキャプチャし、それを仮想オーディオ入力デバイスに渡すことでこの制限を回避することが可能です。 この仮想デバイスは、 navigator.mediaDevices.getUserMedia
.を使用して照会できます。