Simple HTML page with live camera images.
  • I have a locally hosted HTML page with three live camera images and a button to open my gate. For a long time the following worked great with the required devices:

    <img src="http://user:password@"&gt;

    and I worked around an issue with Macs that were already logged in to the SS server to view captured files by just bookmarking a different page with this differing img src URL excluding the login credentials:

    <img src=""&gt;

    but later I had to support Android (Chrome) and found the images would not load with credentials in the URL. I eventually found this code with the credentials base-64 encoded and passed in the URL with auth= did the trick for Chrome browsers:

    <img src=""&gt;

    That has not worked for Mac Safari but it works on iOS Safari.

    Recently they ALL quit working *immediately* on Mac Safari no matter if I am logged in to SS, delete the keychain entries, delete the caches, etc. The URL with credentials right in the URL works immediately on Mac Safari, but then when I access the SS server later I am logged in as "user" that can only view the three cameras needed for opening the gate rather than my own account with access to view all cameras and captures. With the URL for the Mac with no credentials, or the Chrome img src URL, the images load after several minutes on Mac Safari if I leave the window open. Firefox is fine with all of the above.

    Hopefully @Ben or anyone else can shed some light on this. It would be ideal if the auth= code that works on Chrome and iOS worked quickly all around.

    I am using version 4.2.3 and I tested 4.2.4b10 with the same results. Thanks.
  • As you discovered, login credentials encoded in the URL before the address used to be universally supported, but support is being phased out in web browsers due to security concerns.

    So the "auth" parameter is the way to go. However I can't explain the problems you are describing: with the correct auth parameter, the SecuritySpy server should be processing this and delivering the resource without problem, as long as the auth parameter contains the correct login credentials.

    So, the first thing is to check that you are specifying the correct value in the auth parameter. This should be the string username:password, Base64-encoded.

    Also, note that if you use the auth parameter to visit one particular page, then click a link on that page to visit a different page, the auth parameter may not be carried over to the second page, so the browser many then ask for authentication.
  • As I was trying to convey, the version of the page with the auth encode in the img src URLs is working great for iOS devices, Chrome-based browsers and Firefox, and Mac Safari does eventually load the images, so I am confident that there are no authentication issues. Nonetheless, I double checked the auth encoding and it is indeed the correct username:password combo.

    Mac Safari never asks for authentication (because it is saved in the keychain or has the auth in the URL, it just takes several minutes before the images appear on Mac Safari while they load instantly on all others. The exact page without credentials or auth in the URL loads fine in Chrome and Firefox, asking for authorization.

    It seems the delay is occurring within something Mac Safari is doing but I don't how to find it. The issue seemed to come and go with OS X updates for about the past year or so. Safari Technology Preview has the same problem.
  • I have uploaded some pictures and it appears the delay is close to or exactly 60 seconds and the images load.
  • OK I understand better the problem now, but I'm still not sure how to fix it! Safari is obviously screwing up in some unusual way, possibility related to authentication but maybe not.

    If you change the links to still images instead of video streams (change "++video" to "++image" in the URLs), does this then work as expected in Safari? I have seen some strangeness in the past with Safari not properly restarting server-push MJPEG video streams when it should, so may be your problem is similar to this.
  • Interesting, yes that seemed to fix it. I tried with two as image and one as video also, and that works too! That gives me ideas for other things to try.
  • After playing with it for awhile it stopped working again with the one of three as video, so I am back to using a still image for now, but obviously I would like to figure it out.
  • In that case, I think the way to go would be to implement "Method 2: JavaScript JPEG" outlined on our blog post Adding Live Video To Any Web Page. I can't explain why the standard server-push MJPEG stream is failing in Safari, but switching to the JavaScript method hopefully won't be too difficult, and should resolve the problem.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!