navigator.mediaDevices.getDisplayMedia does not show the current tab

Question

My JS has the following:

   var displayMediaOptions = {
      video: {
         cursor: "always",
         height: 300,
         width: 300
      },
      audio: false
   }

   var configuration = { 
         "iceServers": [{ "url": "stun:stun2.1.google.com:19302" }]
   };

   theConn = new RTCPeerConnection(configuration); 

   const theVideo = document.getElementById('theVideo');

   theStream = await navigator.mediaDevices.getDisplayMedia(
         displayMediaOptions,
         function(stream) {
            stream.getTracks().forEach(t=>theConn.addTrack(t));
          },
          function(err) {
            alert("Not stream found");
      });

When I run this, and the Chrome pop-up with the list of selectable tabs appears, it does not show the invoking tab.

score 1 · Accepted Answer · answered Apr 28 '23 at 09:02

You can use selfBrowserSurface to include the current tab.

const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true,
        selfBrowserSurface: "include",
    });

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

navigator.mediaDevices.getDisplayMedia does not show the current tab

1 Answers1