Como usar corretamente getDisplayMedia no peer js?

Front-end JavaScript
#1

olá recentemente tenho criado um sistema de vídeo chamado que está funcionando muito bem aqui o código que estou usando: Html

<html>
        <head>
            <title>Delta Meet</title>
        </head>
        <body>
            <h1 class="title">Delta Meet</h1>
            <p id="notification" hidden></p>
            <div class="entry-modal" id="entry-modal">
                <p>Create or Join Meeting</p>
                <input id="room-input" class="room-input" placeholder="Enter Room ID">
                <div>
                    <button onclick="createRoom()">Create Room</button>
                    <button onclick="joinRoom()">Join Room</button>
                </div>
            </div>
            <div class="meet-area">
                <!-- Remote Video Element-->
                <video id="remote-video"></video>
    
                <!-- Local Video Element-->
                <video id="local-video"></video>
            </div>
            <br><br><br>
        </body>
    
        <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
        <script src="script.js"></script>
    </html>

e aqui o js:

const PRE = "DELTA"
    const SUF = "MEET"
    var room_id;
    var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    var local_stream;
    function createRoom(){
        console.log("Creating Room")
        let room = document.getElementById("room-input").value;
        if(room == " " || room == "")   {
            alert("Please enter room number")
            return;
        }
        room_id = PRE+room+SUF;
        let peer = new Peer(room_id)
        peer.on('open', (id)=>{
            console.log("Peer Connected with ID: ", id)
            hideModal()
            getUserMedia({video: true, audio: true}, (stream)=>{
                local_stream = stream;
                setLocalStream(local_stream)
            },(err)=>{
                console.log(err)
            })
            notify("Waiting for peer to join.")
        })
        peer.on('call',(call)=>{
            call.answer(local_stream);
            call.on('stream',(stream)=>{
                setRemoteStream(stream)
            })
        })
    }
    
    function setLocalStream(stream){
        
        let video = document.getElementById("local-video");
        video.srcObject = stream;
        video.muted = true;
        video.play();
    }
    function setRemoteStream(stream){
       
        let video = document.getElementById("remote-video");
        video.srcObject = stream;
        video.play();
    }
    
    function hideModal(){
        document.getElementById("entry-modal").hidden = true
    }
    
    function notify(msg){
        let notification = document.getElementById("notification")
        notification.innerHTML = msg
        notification.hidden = false
        setTimeout(()=>{
            notification.hidden = true;
        }, 3000)
    }
    
    function joinRoom(){
        console.log("Joining Room")
        let room = document.getElementById("room-input").value;
        if(room == " " || room == "")   {
            alert("Please enter room number")
            return;
        }
        room_id = PRE+room+SUF;
        hideModal()
        let peer = new Peer()
        peer.on('open', (id)=>{
            console.log("Connected with Id: "+id)
            getUserMedia({video: true, audio: true}, (stream)=>{
                local_stream = stream;
                setLocalStream(local_stream)
                notify("Joining peer")
                let call = peer.call(room_id, stream)
                call.on('stream', (stream)=>{
                    setRemoteStream(stream);
                })
            }, (err)=>{
                console.log(err)
            })
    
        })
    }

até aí tudo bem, então decidi criar um botão para o usuário poder compartilhar a tela:
<button id="start">Start Capture</button>&nbsp;<button id="stop">Stop Capture</button>

então fui lá e criei um script:

async function startCapture() {


  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}
function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}
function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}const videoElem = document.getElementById("local-video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

var displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);

stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);

funciona perfeitamente para mim porque para o outro usuário não aparece de forma alguma. O que eu fiz errado?