I have written a code that will take the screenshot after some time interval. The code is:
function captureScreenshot() {
if (screenStream) {
screenStream.getTracks().forEach(track => {
track.stop();
});
}
navigator.mediaDevices.getDisplayMedia({video: true})
.then(stream => {
track = stream.getVideoTracks()[0];
screenStream = track;
track.applyConstraints();
(function(delay, callback){
var loop = function(){
callback();
setTimeout(loop, delay);
}; loop();
})(5000, function(){
imageCapture = new ImageCapture(track);
imageCapture.grabFrame()
.then(imageBitmap => {
const canvas = document.querySelector('#image');
drawCanvas(canvas, imageBitmap);
})
.catch(err => {
console.error("Error grabbing frame: ", err);
});
});
})
.catch(err => {
console.error("Error getting display media: ", err);
});
}
Problem is: Whenever I try to run this code by using an external button it shows this error: "DOMException: The associated Track is in an invalid state".
We have tried to change the timer of the loop from 5000 to 800. It takes the screenshot and don't give the errors for some time but will show the error at the end.
It changes the state to track.muted = true. I want it to stay at the track.muted=false state. So, my loop must taking the screenshot continuously.
Is there any method that can make "track.muted=false" forcefully.