Hi,
I am using getUserMedia api to capture screen and record audio (both together) from chrome extension. The api captures the screen, records the video but doesn't capture the audio.
Any reason why the audio is not being captured. Is there any limitation with the api or do we need to use any other api to capture video+audio?
Please find the code snippet below. (below code is present in background.js)
(tried passing the constraints as audio: true, video: true, but this didnt work. it was throwing an error.)
chrome.desktopCapture.chooseDesktopMedia(['screen','audio'],
function onAccessApproved(id) {
const constraints = { "video": {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: id,
minWidth: 1280,
minHeight: 720,
maxWidth:1280,
maxHeight:720
}
}, "audio" : {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: id}} };
navigator.mediaDevices.getUserMedia(constraints).then(gotMedia).catch(e => { console.error('getUserMedia() failed: ' + e);
});
function gotMedia(stream) {
theStream = stream;
var video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.srcObject = stream;
try {
recorder = new MediaRecorder(stream, {mimeType : "video/webm"});
} catch (e) {
console.error('Exception while creating MediaRecorder: ' + e);
return;
}
theRecorder = recorder;
recorder.ondataavailable =
(event) => { recordedChunks.push(event.data); };
recorder.start(100);
stream.getVideoTracks()[0].onended = function () {
download();
};
}
function download() {
theRecorder.stop();
theStream.getTracks().forEach(track => { track.stop(); });
var blob = new Blob(recordedChunks, {type: "video/webm"});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = 'test.webm';
a.click();
// setTimeout() here is needed for Firefox.
setTimeout(function() { URL.revokeObjectURL(url); }, 100);
}