desktopCapturer
desktopCapturer
访问有关可用于使用
navigator.mediaDevices.getUserMedia
API 从桌面捕获音频和视频的媒体源的信息。¥Access information about media sources that can be used to capture audio and video from the desktop using the
navigator.mediaDevices.getUserMedia
API.
进程:主进程
¥Process: Main
以下示例显示如何从标题为 Electron
的桌面窗口捕获视频:
¥The following example shows how to capture video from a desktop window whose
title is Electron
:
// In the main process.
const { BrowserWindow, desktopCapturer } = require('electron')
const mainWindow = new BrowserWindow()
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
}
}
})
// In the preload script.
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
。
¥To capture video from a source provided by desktopCapturer
the constraints
passed to navigator.mediaDevices.getUserMedia
must include
chromeMediaSource: 'desktop'
, and audio: false
.
要从整个桌面捕获音频和视频,传递给 navigator.mediaDevices.getUserMedia
的约束必须包括 chromeMediaSource: 'desktop'
(对于 audio
和 video
),但不应包括 chromeMediaSourceId
约束。
¥To capture both audio and video from the entire desktop the constraints passed
to navigator.mediaDevices.getUserMedia
must include chromeMediaSource: 'desktop'
,
for both audio
and video
, but should not include a chromeMediaSourceId
constraint.
const constraints = {
audio: {
mandatory: {
chromeMediaSource: 'desktop'
}
},
video: {
mandatory: {
chromeMediaSource: 'desktop'
}
}
}
方法
¥Methods
desktopCapturer
模块有以下方法:
¥The desktopCapturer
module has the following methods:
desktopCapturer.getSources(options)
返回 Promise<DesktopCapturerSource[]>
- 使用 DesktopCapturerSource
对象数组进行解析,每个 DesktopCapturerSource
代表一个屏幕或可以捕获的单个窗口。
¥Returns Promise<DesktopCapturerSource[]>
- Resolves with an array of DesktopCapturerSource
objects, each DesktopCapturerSource
represents a screen or an individual window that can be captured.
注意 在 macOS 10.15 Catalina 或更高版本上捕获屏幕内容需要用户同意,这可以被 systemPreferences.getMediaAccessStatus
检测到。
¥Note Capturing the screen contents requires user consent on macOS 10.15 Catalina or higher,
which can detected by systemPreferences.getMediaAccessStatus
.
注意事项
¥Caveats
navigator.mediaDevices.getUserMedia
无法在 macOS 上进行音频捕获,因为存在一个基本限制,即想要访问系统音频的应用需要 签名的内核扩展。Chromium 以及 Electron 并没有提供这一点。
¥navigator.mediaDevices.getUserMedia
does not work on macOS for audio capture due to a fundamental limitation whereby apps that want to access the system's audio require a signed kernel extension. Chromium, and by extension Electron, does not provide this.
可以通过使用 Soundflower 等其他 macOS 应用捕获系统音频并将其通过虚拟音频输入设备传递来规避此限制。然后可以使用 navigator.mediaDevices.getUserMedia
查询该虚拟设备。
¥It is possible to circumvent this limitation by capturing system audio with another macOS app like Soundflower and passing it through a virtual audio input device. This virtual device can then be queried with navigator.mediaDevices.getUserMedia
.