A Web app built in PHP/JavaScript has a main pages with several DIVs.
One of the DIVs contains a chat room app via the NodeJS app.
This is working fine.
What we now want to do is share, or rather stream the content of another DIV on the same page to the other clients connected to the chat room.
The content is rich; it could be simple HTML, or a slide show, or a video. A simple capture HTML and convert to image and send approach will not give the desired results.
Examples of the type of content could be:
<iframe id="docViewer" name="docViewer" frameborder="0"
src="https://view.officeapps.live.com/op/embed.aspxsrc=http://myhost/docviewer/docs/DiscoverUSA.pptx">
</iframe>
or
<video autoplay="true"
controls muted
id="cameraFeed"
style=" max-height:80%; width:100%;position:absolute; outline:none; border-radius:20px; object-fit:fill; display:none;">
</video>
There are examples on how to do screen sharing using getDisplayMedia as in the tutorial here https://dev.to/anthonys1760/how-to-create-a-screen-sharing-application-with-javascript-4h6j , but I cannot find anything streaming the content of just a single DIV.
The reason the DIV is required to be stream rather than the rich content itself is because the meeting host might pause video, or will click through backwards and forward the slide shows, and the others client must be in sync with with.
