097c6b796d
* tmp Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * feat: add support for system picker in setDisplayMediaRequestHandler Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * oops Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * Apply suggestions from code review Co-authored-by: Erick Zhao <erick@hotmail.ca> Co-authored-by: Samuel Attard <sam@electronjs.org> * stuff Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * well... Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * seems legit Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> * chore: update patch to handle screenCapturer Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * feat: modify API to use useSystemPicker Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * fix: gate ScreenCaptureKitPicker to macos 15 or higher Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * fix: don't use native picker with legacy media selection Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * chore: code review, boolean set & docs update Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * fix: add cancelCallback Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * docs: clarify session & desktopCapturer docs Co-authored-by: Keeley Hammond <khammond@slack-corp.com> * chore: remove incorrect backport patches * chore: update SCKP patch --------- Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com> Co-authored-by: Samuel Attard <marshallofsound@electronjs.org> Co-authored-by: Samuel Attard <sam@electronjs.org> Co-authored-by: Keeley Hammond <khammond@slack-corp.com>
4.4 KiB
desktopCapturer
Access information about media sources that can be used to capture audio and video from the desktop using the
navigator.mediaDevices.getUserMediaAPI.
Process: Main
The following example shows how to capture video from a desktop window whose
title is 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) => {
// Grant access to the first screen found.
callback({ video: sources[0], audio: 'loopback' })
})
// If true, use the system picker if available.
// Note: this is currently experimental. If the system picker
// is available, it will be used and the media request handler
// will not be invoked.
}, { 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>
See navigator.mediaDevices.getDisplayMedia for more information.
Note: navigator.mediaDevices.getDisplayMedia does not permit the use of deviceId for
selection of a source - see specification.
Methods
The desktopCapturer module has the following methods:
desktopCapturer.getSources(options)
optionsObjecttypesstring[] - An array of strings that lists the types of desktop sources to be captured, available types can bescreenandwindow.thumbnailSizeSize (optional) - The size that the media source thumbnail should be scaled to. Default is150x150. Set width or height to 0 when you do not need the thumbnails. This will save the processing time required for capturing the content of each window and screen.fetchWindowIconsboolean (optional) - Set to true to enable fetching window icons. The default value is false. When false the appIcon property of the sources return null. Same if a source has the type screen.
Returns Promise<DesktopCapturerSource[]> - Resolves with an array of DesktopCapturerSource objects, each DesktopCapturerSource represents a screen or an individual window that can be captured.
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 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.
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.