3

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 emailed to me.

It appears that the proposed navigator.mediaDevices.getDisplayMedia is exactly what I want, but it appears no browser has implemented it, nor have I found any plans for implementation on roadmaps.

Use of 

var constraints = {video: {'mandatory' {'chromeMediaSource':'screen'}},
                   audio: true };
navigator.mediaDevices.getUserMedia(constraints)

did in fact work, but only after passing command line flags to Chrome on startup. I think essentially zero users will go through this hassle to do me a favor of submitting a bug report.

Are there any alternatives to achieving my goal?

jib
  • 34,243
  • 11
  • 80
  • 138
user14717
  • 3,854
  • 2
  • 26
  • 61

4 Answers4

3

As you've noticed, Chrome and Firefox currently implement an outdated unofficial draft. The bug tracker for getDisplayMedia in Firefox is here.

If it helps, you no longer need an extension in Firefox, but you do need to use https (so you must open this page in https first):

var constraints = {video: {mediaSource: "screen", width: 320, height: 200}};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.log(e.message));
<video id="video" height="240" width="320" autoplay></video>

However, please be aware of unique security risks of sharing your screen with a browser window on it.

jib
  • 34,243
  • 11
  • 80
  • 138
  • Just verified this works on Firefox nightly (v55); thanks! For my own use case, I don't need to see the user's entire screen, I only need to see the tab that I have delivered. So presumably there's a smaller security risk, if FF decides to implement tab sharing . . . – user14717 Jan 27 '17 at 21:40
  • @user14717 To be clear, the risk mentioned applies to any sharing that ends up sharing a web surface, because that web surface can be manipulated to reveal targeted private info from the user's logged-in sessions. – jib Jan 27 '17 at 21:48
  • FWIW [tab-sharing in Firefox](http://stackoverflow.com/a/36665532/918910) is behind a pref atm. because tab selection UX is missing. – jib Jan 27 '17 at 21:58
  • @jib: does screensharing require HTTPS (which is why you asked for that)? – Philipp Hancke Jan 28 '17 at 12:31
  • 1
    @PhilippHancke Yes screensharing requires HTTPS because of the attack risks I mention. – jib Jan 28 '17 at 13:47
2

You have to develop an extension (at least on chrome) using https://developer.chrome.com/extensions/desktopCapture APIs. As this poses a security concern, its not available without an extension. There is a talk to add this in next version of webrtc spec (https://w3c.github.io/mediacapture-screen-share/). You may want to keep an eye on it and track the progress.

manishg
  • 8,120
  • 1
  • 10
  • 15
0

There are older versions of the API currently implemented. See this module which includes example extensions for Chrome and Firefox (note: Firefox will soon no longer require an extension for whitelisting)

Philipp Hancke
  • 11,534
  • 1
  • 15
  • 23
0

getDisplayMedia() has now been rolled out in Edge 17 and 18 and it is under a flag in Chrome 70

The code required to capture the screen is as follows:

navigator.getDisplayMedia({ video: true }).then(stream => {
    console.log("Awesome");
}, error => {
    console.log("Unable to acquire screen capture", error);
});

Chrome will ask whether you want to share your screen, an app window or a Chrome tab: enter image description here

Octavian Naicu
  • 2,731
  • 26
  • 44