Stack Overflow
Stack Overflow

Questions tagged [get-display-media]

Method to programmatically prompt the user to select and grant permission to capture the contents of a display or portion thereof (such as a window or screen) as a MediaStream.

getDisplayMedia provides access to video (and optionally audio) streams rendered on the user's device, allowing to capture part or all of a screen for streaming, recording, or sharing. It is used from Javascript running in a user's web browser.

Support varies from browser to browser. See MDN Browser Compat Data for up-to-date information.

getDisplayMedia forms part of browser-resident WebRTC support (see ). It can be used by itself without establishing WebRTC connections.

It can also be used in conjunction with MediaRecorder; see . It completes getUserMedia that allows to capture streams from a camera or a microphone.

Further references:

72 questions
15
votes
1 answer

Check if browser/platform support screen capturing via `getDisplayMedia`

We can request a media stream to a screen or windows via navigator.mediaDevices.getDisplayMedia(). However, this immediately prompts the user to decide which kind of capturing to use. I need to check if the browser/platform even support screen…
Lukas Kalbertodt
  • 79,749
  • 26
  • 255
  • 305
13
votes
2 answers

How to manually stop getDisplayMedia stream to end screen capture?

I'm interested in getting a screenshot from the user and I'm using the getDisplayMedia API to capture the user's screen: const constraints = { video: true, audio: false }; if (navigator.mediaDevices["getDisplayMedia"]) { …
Mobiletainment
  • 22,201
  • 9
  • 82
  • 98
13
votes
1 answer

displaySurface constraint not restricting user share screen selection options

Adding displaySurface does not provoke option restriction for the user before sharing his own screen. I am trying to limit those options to only let the user select anything except browser tabs. I tried setting displaySurface explicitly to 'monitor'…
mohamed tebry
  • 161
  • 2
  • 11
10
votes
1 answer

How does Google Meet allow you to screen share from another tab?

In Google Meet, if you click "Present Now" then "A Chrome Tab", it brings up a window that lets you share from another tab. This is different to the standard Screen Capture API as if you simply run navigator.mediaDevices.getDisplayMedia({ video:…
Yousef Amar
  • 651
  • 6
  • 19
8
votes
1 answer

getDisplayMedia() not working correctly on Android device

I need co connect user display media(screen capture) to a webRTC application. The following code is used to initiate screen capture: navigator.mediaDevices.getDisplayMedia({video: true}) This prompts the user about the screen capture and creates a…
AnKing
  • 1,994
  • 6
  • 31
  • 54
6
votes
0 answers

Full Webpage Screenshot using getDisplayMedia() of MediaDevices API

I am using navigator.mediaDevices.getDisplayMedia to get a screenshot, but it's capturing the only the visible part of the page but there is more content which is hidden in scroll area and which is getting missed. So can it be possible to capture…
Shobhit Verma
  • 794
  • 8
  • 25
6
votes
2 answers

Is it possible to tell the browser not to focus (bring to front) the selected window from `getDisplayMedia`?

I am working on an application using getDisplayMedia. When the browser prompts me to share my screen/a window and I select a specific window to share, that window is now suddenly focused and in front of my other windows (in particular, in front of…
Lukas Kalbertodt
  • 79,749
  • 26
  • 255
  • 305
5
votes
2 answers

How to create a sample webm file from byte array

I am working on a screen capture application and am able to get the ondataavailable event work and get data in chunks which I am further converting as a blob but when I send the same data stream over websocket to server and save the stream as a webm…
graphics123
  • 1,191
  • 3
  • 20
  • 57
4
votes
1 answer

Google meet streaming through MediaRecorder APIs

I am trying to record google meet audio and video using getDisplayMedia using media options.I am able to record my screen through getDisplayMedia but unable to record voice coming in google meet. How can I use passive recording or is there any way…
MiSha
  • 43
  • 7
4
votes
0 answers

Chrome - enable 'share audio' by default with navigator.mediaDevices.getDisplayMedia

I want to capture tab audio with Chrome. I call navigator.mediaDevices .getDisplayMedia({ video: true, audio: true, }) .then(stream => {...}) but the 'share audio' option is not ticked by default on the Chrome…
MadeInLagny
  • 185
  • 1
  • 12
4
votes
0 answers

what is Logical Display Surface in Screen Capture API of browser?

I'm wondering that what is Logical Display Surface actually ? In MDN docs: A logical display surface is one which is in part or completely obscured, either by being overlapped by another object to some extent, or by being entirely hidden or…
Sake
  • 96
  • 5
4
votes
1 answer

Getting a single screenshot of browser using getDisplayMedia without prompting user

I am building an online app and on click of a button I want to be able to screenshot what the user sees in their browser(my app). I've looked at lots of js libraries such as html2canvas, CCapture as dom-to-image but my page will have a mixture of…
user2445278
  • 808
  • 1
  • 8
  • 15
4
votes
1 answer

Audio from all users in a conference not captured while recording

So I am using navigator.getDisplayMedia() to get the user to select the source of the screen to start recording. But this currently does not support audio, so I am using navigator.mediaDevices.getUserMedia({ audio: true }); to get the audio stream…
aditya
  • 339
  • 2
  • 12
3
votes
0 answers

How to tell what kind of screen sharing the user selected?

One can retrieve a stream of the users display using navigator.mediaDevices.getDisplayMedia . On some browsers I can also preselect the entire screens tab like so: const stream = await navigator.mediaDevices.getDisplayMedia({ // Pre-select the…
kaan_a
  • 3,503
  • 1
  • 28
  • 52
3
votes
0 answers

Safari 15, Reactjs: Unhandled Rejection (InvalidAccessError): getDisplayMedia must be called from a user gesture handler in Safari MacOs

I have been Implementing this Code asking for User Display Media, this works well getting the User Display Media on almost every browser like Chrome, Firefox, or Edge,... But on Safari 15 MacOs, and just Safari, I received this error: "Unhandled…
Quan Nguyen
  • 53
  • 4
1
2 3 4 5