How do I display the same screenshare api capture in multiple divs?

[Immortal2004]

I’ve tried to do what I thought would work by creating two output divs but it didn’t work. Help!!!

[Immortal2004]

<p>MS Edge 17 is the first browser to support a new web standard API for screen sharing.  The new <code>getDisplayMedia</code> API builds on the <code>MediaStream</code> APIs used by <code>getUserMedia</code> for accessing device cameras and microphones.</p>
<ul>
  <li><a href="https://blogs.windows.com/msedgedev/2018/05/02/bringing-screen-capture-to-microsoft-edge-media-capture-api/">Windows Blog post</a></li>
  <li><a href="https://w3c.github.io/mediacapture-screen-share/">Full spec</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API">MDN for <code>MediaStream</code></a></li>
</ul>
<h2>Try it now:</h2>
<button id="start" disabled>Start New Screen Capture</button>
<br/>
<button id="play-pause" disabled>Resume Capture</button>
<button id="stop" disabled>Stop Capture</button>
<p id="support-warning"></p>
</br>
<video id="output" aria-label="Live feed of the shared screen"></video>
<video id="output1" aria-label="Live feed of the shared screen"></video>
<script>
let start = document.getElementById("start");
let pause = document.getElementById("play-pause");
let stop = document.getElementById ("stop");
let v = document.getElementById("output");
let x = document.getElementById("output1");

if (navigator.mediaDevices.getDisplayMedia) {
  start.addEventListener("click", startCapture);
  start.disabled = false;
  pause.addEventListener("click", togglePlay);
  stop.addEventListener("click", stopCapture)
}
else {
  document.getElementById("support-warning")
    .textContent =
    "Not supported in this browser";
}

function startCapture() {
  if (v.srcObject) {
      stopCapture();
  }
  console.log("Requesting screenshare permission...");
  navigator.mediaDevices.getDisplayMedia()
    .then(processMedia)
    .catch((e)=>console.log("Capture denied: ", e));
}
function processMedia(media) {
  console.log("Capture acquired...")
  
  let t = media.getTracks()[0];
  console.log("Capture settings:", t.getSettings());
  
  v.srcObject=media;
  pause.disabled = false;
  stop.disabled = false;
  togglePlay()
}
function togglePlay() {
  if (v.paused) {
    v.play();
    pause.textContent = "Pause Capture";
  }
  else {
    v.pause();
    pause.textContent = "Resume Capture";
  }
}
function stopCapture() {
  if (v.srcObject) {
    console.log("Stopping capture...")
    v.srcObject.getTracks()[0].stop();
    v.srcObject = null;
  }
  pause.disabled = true;
  stop.disabled = true;
}
</script>
<script>
function startCapture1() {
  if (x.srcObject) {
      stopCapture();
  }
  console.log("Requesting screenshare permission...");
  navigator.mediaDevices.getDisplayMedia()
    .then(processMedia)
    .catch((e)=>console.log("Capture denied: ", e));
}
function processMedia1(media) {
  console.log("Capture acquired...")
  
  let t = media.getTracks()[0];
  console.log("Capture settings:", t.getSettings());
  
  x.srcObject=media;
  pause.disabled = false;
  stop.disabled = false;
  togglePlay()
}
function togglePlay1() {
  if (x.paused) {
    x.play();
    pause.textContent = "Pause Capture";
  }
  else {
    x.pause();
    pause.textContent = "Resume Capture";
  }
}
function stopCapture1() {
  if (x.srcObject) {
    console.log("Stopping capture...")
    x.srcObject.getTracks()[0].stop();
    x.srcObject = null;
  }
  pause.disabled = true;
  stop.disabled = true;
}
</script>

Here is the code. I’m trying to display whatever I’m sharing in three separate divs.
Here’s an image for reference of how I want it to work.

[bappyasif]

where are you “genarating / rendering” these divs from ? perhaps consider doing that same “conditionally” based on “online” checks for that “screencast” icon as well, unless that’s not what you want then consider creating a “codepen / repl” link for it, so that it gets easier to see that in action, happy coding

[Immortal2004]

Here’s the link Codepen

[Immortal2004]

The divs are already on the webpage, I just need to figure out how to multiple the output of what I’m sharing. And when I stop the screenshare, it will hide the box/container used to display my screenshare. I don’t know if I’m making any sense, but it’s supposed to look like I’m broadcasting my screen to student Chromebooks. (It’s a prototype mock-up kind of thing.)

[marcusparsons]

You can have the media output from the screen capture go to as many elements on the same screen as you need to. In your CodePen, you’ll have to remove the script HTML tags first from the JavaScript editor. Next, whenever you start to process the media, you need to set the srcObject of every video you want to be shown to the media you have in your CodePen in your processMedia function and also set it to play in your togglePlay function.

Here’s a slightly modified CodePen showing that in action: https://codepen.io/marcusparsons/pen/YzOjbBb

[Immortal2004]

Thank you so much!!!

[marcusparsons]

My pleasure! Happy coding!