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:

49 questions
10
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
  • 55,166
  • 13
  • 173
  • 236
8
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"]) { …
5
votes
1 answer

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
  • 55,166
  • 13
  • 173
  • 236
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,041
  • 1
  • 16
  • 43
4
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,257
  • 20
  • 33
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
  • 369
  • 1
  • 11
3
votes
0 answers

mediaSession does not work with streaming

I have mediaSession working great when it comes to simple video files. You can use your media keys pause and play. let video = useRef(null) useEffect(() => { video.current.play() .then(_ => { navigator.mediaSession.metadata = new…
PepperAddict
  • 474
  • 2
  • 6
  • 13
3
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
  • 435
  • 4
  • 14
3
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
  • 83
  • 4
3
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…
3
votes
1 answer

Possible to stream desktop in a webapp using webrtc

Is it possible to stream the Desktop Information using webrtc in a webapplication. Would an application like that be a security issue if that is possible, currently we built an application which can stream using the Webcam with webrtc. But I have no…
Jon not doe xx
  • 413
  • 3
  • 6
  • 14
3
votes
4 answers

Bug reporter: Alternatives to getDisplayMedia?

I am trying to implement a bug reporter on my website. My goal is that the user will be able to describe the problem audibly and record the browser tab while walking through the problem. The bug report will then just be a video file, which can be…
user14717
  • 3,854
  • 2
  • 26
  • 61
2
votes
1 answer

Why does screen recording of the entire screen vs a window vs a single tab result in significantly different file sizes?

I'm working on integrating screen capturing in a framework I'm expanding. I'm requesting the MediaStream of the screen through the getDisplayMedia method and recording it using the RecordRTC library. Both Firefox and Chrome allow the user specify…
2
votes
0 answers

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…
2
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…
1
2 3 4