From the questions on the forum, I see that lots of people are struggling to show there camera images in the dashboard. So I started developing a UI camera viewer node, which was almost ready for alpha testing. But at the last moment I got a security problem, which forces me to rewrite the damn thing But not sure how to continue from here on, so would be nice to get some feedback ...
The user can select from a number of widgets (led lights, texts, pan/tilt control, preset buttons, ...) and specify where those widgets have to be displayed. For example:
So the camera images will be played in the background, and the widgets will be drawn in the foreground. This can be achieved in a number of ways:
I started by using a simple canvas element, in which I could draw both the image and the widgets on top of it:
But it became rather complex to detect where the user had clicked, since there the image had been transformed multiple times (for aspect ratio, ...). So I rewrote the node to use the second mechanism based on SVG:
By using an SVG image (which is an image inside an SVG), everything was nicely integrated into SVG. And handling mouse clicks became very easy, since the widgets are simple SVG elements (like e.g. circle):
access-control-allow-originhttp header. However I cannot expect that to happen in every video source...
And I also cannot expect all my users to install a proxy server to workaround the cross domain url's.
Since I cannot get a copy of such protected image data, I need to use the video element itself to display the video. But the video element isn't an SVG element. So to put the video element inside an SVG, you will need to use a SVG foreignobject element:
Did some tests and now the video element can display the video stream (even from the other domain). And in Firefox and Edge the widgets are drawn nicely on top of the video. But in Chrome the widgets are drawn behind the video, so they where not visible. Didn't find a solution, so that is again a no-go for me ...
[EDIT] As described on StackOverflow, there is currently a bug in Chrome: when a video tag is used inside a foreignobject, the z-index is not taken into account (so the drawing sequence is incorrect). Grrrr....
So I tried to use independent video and SVG elements, but use CSS to draw the SVG on top of the video. By changing the z-order, it should be possible to do this:
Did a few tests with following demo, which shows a text "SVG" on top of video. It works fine on Edge/Chrome/Firefox (on windows10 portable) and also my Android smartphone. But asked some people if they could test it on their iPhones: on an older device the SVG text was on top of the video, but it disappeared behind the video as soon as the video started playing. And on a recent device the text was visible, but the video was a still image. The CSS (see demo page source) is very compact, but I don't know enough about CSS to figure out why it doesn't work on iPhone And I also don't have a clue whether this kind of CSS could work together with the current dashboard styling ...
Any suggestions to get this node back on track ???