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);
});
}
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) {
//...
};
})
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()