Dynamic overlay displayed on top of video element

Question

I am just a beginner when it comes to web dev, but my situation is: I have a <video> element on my page that is streaming video via WebRTC. I would like to display a local bitmap ( a cursor) at an arbitrary position, overlayed on top of that element.

I am using this sample as a base for this experiment. So, the video on the rhs of the page is receiving a stream. I would like to display a local cursor on that element.

I have looked at a few overlay examples, but I haven't seen a way of dynamically updating an overlay.

Any advice or tips would be greatly appreciated.

Edit: the cursor would be a bitmap sent from a remote system via WebRTC data channel, representing a remote users cursor, and I would like to display it locally on the local browser.

Answer 1

3/31/21 Updating per comment:

This SO answer provides a working demo of one way to do this creating virtual mousepad in jquery with click and hover events

Note to click on the example to see it in action there.

The difference here is that there is no need for the mousepad. Instead, as noted, the dynamic positional data can be fed in. Note that it's using jQuery though the same can be achieved using vanilla js.

---

"I would like to display a local cursor on that element." Can you elaborate what you mean by this?
Do you mean to show a faux mouse pointer icon that is dynamically updated using a script?
A use case would help others understand what you're trying to do to help better. For example, if it's for viewing a remote video of a computer screen and simulating a mouse cursor via an out-of-band data channel feeding positional data, then an object pointing to a transparent image of a mouse pointer and having "position" property set to "absolute" and dynamically updated "top" and "left" positions should do the trick. Happy to comment more if that's the right idea or if you had something else in mind can provide thoughts.