I am building a website using NodeJS that allows users to work together by using a simulation from PhET.

These simulations are embedded in the website within an iframe, and I would have multiple lobbies for a same simulation. When working together, only one user can interact with the simulation (let’s call him the manipulator), while the others would simply watch (observators). With that being said, the observators would only need to see the content of the manipulator‘s iframe, just like a screen share but for a single iframe, and that’s where I don’t know how to proceed.

I’ve tried using getDisplayMedia() by croping the content with the iframe bounds, but this had 2 problems :

• A popup shows up when the page loads and the manipulator has to accept sharing his screen, and after doing so, has a bar sitting at the top of the screen with a button to stop streaming, which I do not want him to be able to,
• When the manipulator scrolls down the page, hiding the iframe, the observators cannot see the shared content neither

I’ve also thought about simply taking a “screenshot” of the iframe every X milliseconds (let’s say 15 times a second) and send them to the appropriate lobby, but this approach is very resource-intensive as I have to create a canvas, draw the iframe’s image into this canvas and send it to the observators for them to replace an img tag. I believe there’s a better way to solve my issue.

I can also host the simulations on my server, if that helps, but I cannot change the source code and add event listeners or such, because I would like to make it so any simulation can be added very easily.

How can I make it so the observators see the content of the manipulator‘s iframe ? I would greatly appreciate any help.