Creating two <img> elements while using one MotionJPEG stream

Question

Hi,

I'm trying to make a page that would display several MotionJPEG image thumbnails. When a thumbnail is clicked, its contents are shown in a larger image element as well.

The problem is that when I try to use the same MotionJPEG stream for both a thumbnail and the main view (setting the main image's src attribute), the data never arrives. As far as I understand, the service I stream from only allows streaming the same image to a single IP once, i.e all subsequent HTTP requests do not return as long as the first one is still running.

What can I do to work around this? Can I use one JavaScript Image object to e.g. attach it to two DOM nodes simultaneously?

Answer 1

Can I use one JavaScript Image object to e.g. attach it to two DOM nodes simultaneously?

No. A node may only have one parent. Appending it to a new parent removes it from the old.

How about applying the same background image to two elements, using CSS background-image? I don't have any MJPEG-over-HTTP webcam here to test it on, though, it might be that multipart/x-mixed-replace doesn't work here.

Unfortunately for one background to be a thumbnail you would have to use CSS3 background-size, which is only supported by the latest browsers (not IE<9) and then often with vendor-prefixes. Then again, I believe multipart/x-mixed-replace doesn't work in IE anyway.