|
|
@@ -9,79 +9,65 @@ The following example shows how to capture video from a desktop window whose
|
|
|
title is `Electron`:
|
|
|
|
|
|
```js
|
|
|
-// In the main process.
|
|
|
-const { BrowserWindow, desktopCapturer } = require('electron')
|
|
|
+// main.js
|
|
|
+const { app, BrowserWindow, desktopCapturer, session } = require('electron')
|
|
|
|
|
|
-const mainWindow = new BrowserWindow()
|
|
|
+app.whenReady().then(() => {
|
|
|
+ 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
|
|
|
- }
|
|
|
- }
|
|
|
+ session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
|
|
|
+ desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
|
|
|
+ // Grant access to the first screen found.
|
|
|
+ callback({ video: sources[0], audio: 'loopback' })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ mainWindow.loadFile('index.html')
|
|
|
})
|
|
|
```
|
|
|
|
|
|
-```js @ts-nocheck
|
|
|
-// 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)
|
|
|
- }
|
|
|
+```js
|
|
|
+// 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))
|
|
|
})
|
|
|
|
|
|
-function handleStream (stream) {
|
|
|
- const video = document.querySelector('video')
|
|
|
- video.srcObject = stream
|
|
|
- video.onloadedmetadata = (e) => video.play()
|
|
|
-}
|
|
|
-
|
|
|
-function handleError (e) {
|
|
|
- console.log(e)
|
|
|
-}
|
|
|
+stopButton.addEventListener('click', () => {
|
|
|
+ video.pause()
|
|
|
+})
|
|
|
```
|
|
|
|
|
|
-To capture video from a source provided by `desktopCapturer` the constraints
|
|
|
-passed to [`navigator.mediaDevices.getUserMedia`][] must include
|
|
|
-`chromeMediaSource: 'desktop'`, and `audio: false`.
|
|
|
+```html
|
|
|
+<!-- 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>
|
|
|
+```
|
|
|
|
|
|
-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.
|
|
|
+See [`navigator.mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) for more information.
|
|
|
|
|
|
-```js
|
|
|
-const constraints = {
|
|
|
- audio: {
|
|
|
- mandatory: {
|
|
|
- chromeMediaSource: 'desktop'
|
|
|
- }
|
|
|
- },
|
|
|
- video: {
|
|
|
- mandatory: {
|
|
|
- chromeMediaSource: 'desktop'
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-```
|
|
|
+**Note:** `navigator.mediaDevices.getDisplayMedia` does not permit the use of `deviceId` for
|
|
|
+selection of a source - see [specification](https://w3c.github.io/mediacapture-screen-share/#constraints).
|
|
|
|
|
|
## Methods
|
|
|
|
trop[bot]