Rajneesh Kumar Sharma
Rajneesh Kumar Sharma

Reputation: 81

Screen capture using WEBRTC, Get to know user stream selection

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

Answers (3)

Cnold
Cnold

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

Rajneesh Kumar Sharma
Rajneesh Kumar Sharma

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

Jinho Jang
Jinho Jang

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

Related Questions