Reputation: 81
Hey I am using WEBRTC for screen share. But I am stuck at point where i need user entire screen, but browser is providing user with more options like application and browser tabs, so i want to check what option is user selecting from the popup produce by the browser if its not entire screen then i can generate a error message to user, Please see this popup image
const constraints = {
audio: false,
video: {
width: { max: 1920 },
height: { max: 1080 },
frameRate: { max: 10 }
}
}
const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
Upvotes: 4
Views: 2460
Reputation: 1
Firefox multiple screens maybe:
if (isFirefox) {
const videoTrack = stream.getVideoTracks()[0];
return (videoTrack.label === "Primary Monitor" || -1 !== videoTrack.label.indexOf('Screen'))
} # else ...
Upvotes: 0
Reputation: 81
After searching for a long time I found something that works for me. if it works for you that's great.
const isFirefox = typeof InstallTrigger !== 'undefined';
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
const videoTrack = mediaStream.getVideoTracks()[0];
if (isFirefox) {
if(videoTrack.label === "Primary Monitor"){
return true;
} else {
return false;
}
} else if (isChrome) {
const videoSetting = videoTrack.getSettings();
if (videoSetting && videoSetting.displaySurface !== "monitor") {
return false;
} else {
return true;
}
}
Upvotes: 4
Reputation: 175
you can check like this
const videoTrack = stream.getVideoTracks()[0];
console.log(videoTrack.getSettings());
In console, you will see 'displaySurface' property. Also this MDN document will help you :)
Upvotes: 0