what I am trying to achieve is add an option to my webApp that the users can screeshot the screen. I tried out some ready2use libraries like html2canvas and rasterizeHTML but I am experiensing problems with them. I found out a possible solution using the mediaDevices api, but there are several things that I want to change and not sure how. Here is my code:

navigator.mediaDevices.getDisplayMedia().then(stream => 
{
  // Grab frame from stream
  let track = stream.getVideoTracks()[0];
  let capture = new ImageCapture(track);
  let canvas = document.createElement('canvas');  
  capture.grabFrame().then(bitmap => 
  {
    track.stop();
      
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    canvas.getContext('2d').drawImage(bitmap, 0, 0);
      
    let a = document.createElement("a");
    document.body.appendChild(a);

    a.href = canvas.toDataURL(`image/png`);
    a.download = "screenshot.png";

    a.click();
  });
})
.catch(e => console.log(e));

Using this piece of code I am getting the options to choose from my available screens and pick what to screenshot. I have 2 problems with this:

1. The dialog that is poping has a button called share, I want to change it so it is saying screenshot. Is it possible to adjust the dialog and at least rename the primary button ?
2. If I attach this code to a component inside my app - for example on button click, if I want to screenshot my current screen, the dialog for the screenshot is also visible in the image, but I don't want it. Is it possible to ignore the pop-up while doing the screenshot?

Thanks in advance!