Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested

Question

I am trying to do a simple audio video capture of the page in Chrome browser via chrome extension I am building. I am running the following code in a content script.

I don't understand why it is struggling to accept my config, I've included both audio and video yet it still complains that

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested
    at chooseDesktopMedia 

here is the code I tried:

chooseDesktopMedia();

function chooseDesktopMedia(){
    navigator.webkitGetUserMedia(
        ["screen"]
    , function onSuccess(stream) {
        showScreenShare(
            {
                audio: true,
                video: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: streamId
                    }   
                }   
            }            
        );
    }, function onError(e) {
        console.error(e);
        alert('Failed to get user media.');
    });
}

function showScreenShare(conf){
    var ve = document.getElementById("screen-share");

   navigator.mediaDevices.getUserMedia(conf)
    .then(function(stream){
        var url = window.URL.createObjectURL(stream);
        ve.src = url;
    })
    .catch(function(e){
        console.log(e);
        alert(e);
    });

}

Answer 1

I don't think there is something like

navigator.mediaDevices.getUserMedia(['screen'])

or maybe I'm ignorant about it, but what it meant by

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested at chooseDesktopMedia

because in your getUserMedia, you didn't define the constraints with either audio or video, which should be like this

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(mediaStream) {
  //...
  };
})

---

Screen Capture

On the other hand, to run screen capture, you will access Screen Capture API with getDisplayMedia(), not getUserMedia()

async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  return captureStream;
}

because of permission policy, I can't run example in SO snippets, but what you can do to try this, copy the code below, open your console in developer tools, then run this

*disclamer: run at your own risk

let getCanvas = document.getElementById('canvas')
if (getCanvas == undefined) {
  var videoElem = document.createElement("video");
  videoElem.setAttribute("id", "canvas");
  videoElem.setAttribute("autoplay", true);

  videoElem.style.width = '98%'
  videoElem.style.maxWidth = '860px'
  videoElem.style.position = 'fixed'

  videoElem.style.zIndex = '99999'

  videoElem.style.top = '0'

  videoElem.style.left = '0'
  document.body.insertBefore(videoElem, document.body.firstChild)
}


var displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

async function startCapture() {
  let canvas = document.getElementById('canvas')

  try {
    canvas.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo(canvas);
  } catch (err) {
    console.error("Error: " + err);
  }
}

function dumpOptionsInfo(canvas) {
  const videoTrack = canvas.srcObject.getVideoTracks()[0];
  videoTrack.onended = function() {
    canvas.remove()
  };
  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}


await startCapture()