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?
Advertisement
Answer
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.