6

If you got IP camera, you can stream the video in mjpeg directly to an image simply by giving the right source... for example:

<img src="http://192.168.1.106:8080/video" />

That is great. But when camera gets disconnected for some reason and reconnected after short time, streaming does not resume. Does anybody has any idea how to automatically resume the streaming in such case? Maybe some javascript?

Charles
  • 50,943
  • 13
  • 104
  • 142
Flash Thunder
  • 11,672
  • 8
  • 47
  • 91
  • There's not going to be a way to detect the disconnect, but merely changing the `src` of the image element should cause the browser to reconnect and resume loading. Please keep in mind that MJPEG is not a normal video stream. – Charles Mar 12 '14 at 16:53
  • But it is being streamed by websocket, so hopefully you are wrong. – Flash Thunder Mar 12 '14 at 18:15
  • 3
    Sticking an MJPEG image into an `img` tag does not a websocket make. – Charles Mar 12 '14 at 18:29
  • And what does it make? It has to make something to be checkable if it is still there... in the worst case, i can blob image and compare frames if they change... even if nothing moves, it will change anyway, but doesn't seems to be perfect solution... – Flash Thunder Mar 12 '14 at 19:09
  • 4
    Just in case someone else finds this useful, I found that you can use the `naturalWidth` property to determine if the mjpeg is connected or not. – joshhunt Apr 08 '18 at 02:43
  • oh thanx @joshhunt that is a really useful info – Flash Thunder May 09 '20 at 11:06
  • @joshhunt pretty neat workaround. works for cameras which you can't connect because of cross-origin policy, and any other XMLHttpRequest. You can write this as an answer since it works – HovSky Aug 27 '20 at 07:32
  • 1
    From my experimenting, `naturalWidth` may tell you if the connection has never been made, but it doesn't tell you anything about the connection being lost. – aggieNick02 Oct 17 '20 at 04:37
  • 1
    If you already have the answer, can you please post it as a answer? I'm facing the same problem. – Zheng Qu Dec 03 '20 at 11:27
  • I'm using ReadableStream API to fetch byte stream and display it on canvas. Please let me know if there is a better way. – Drejc Jan 26 '21 at 13:27

0 Answers0