javascriptmediadevicesrtcpeerconnection

navigator.mediaDevices.getDisplayMedia does not show the current tab


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.


Solution

  • 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