Google Chrome - Mixed Content - Media Not Showing

Why do you need to sideload an APK? You should be able to view media tiles even with the Chromium 111 update, but you would need the mixed content and nip.io approach. You mentioned that things weren’t working in Fully Kiosk with nip.io, but it wasn’t clear what you had tried as that should work.

Maybe you could share some screenshots of:

  • The working media URL in a regular browser (with the URL visible)
  • The configured media URL in Fully Kiosk using the nip.io format not working in the preview in Manage Media

the only thing i havent tried is the aforementioned old apks for fully or browsers. for nip.io, the new address just didnt do anything and using that actually broke the preview within sharptools when editing the resource. i dont have access to it now, but ill post screenshots.

The only thing that passes through nip.io is the DNS request for the subdomain. The rest of the URL does not get sent to nip.io.

In other words, your browser only sends the domain name 192.168.1.50.nip.io to nip.io and nip.io responds that it’s available at the IP address 192.168.1.50. From that point forward, anything else in the URL or the request gets sent directly to the IP address (eg. your camera).

The flow looks something like the following:

  1. Your browser gets a request for http://192.168.1.50.nip.io/mycontent
  2. Your browser sees that the request is a subdomain of nip.io, so it asks nip.io where it can find the subdomain 192.168.1.50.nip.io
  3. nip.io replies that the subdomain is available at the IP address 192.168.1.50
  4. Your browser then makes the http request to the provided IP address along with the rest of the URL (eg. at this point, the full path of the URL gets sent to the IP address).
  5. Your IP camera is at the IP address, so it sees the http request (along with the full URL at this point), and is able to respond with the requested resource

Here’s a visual version of the above that I quickly put together:
(tap the right or left side to move through the slides)

DNS by Joshua Lyon
Images (tap to expand if the embed above doesn't work)

Overview

Subdomain Lookup (DNS Request)

Subdomain Response (DNS → IP)

HTTP Request (to camera)

HTTP Response (from camera)

This YouTube video explains how DNS works and might be interesting to you as well.

Interesting. Can you clarify what you mean by ‘video’? Do you mean an MJPEG stream pointing to a local IP?

Where is your MJPEG stream coming from? Directly from the camera (if so, what model) or something like TinyCam?

1 Like

16 posts were split to a new topic: Fire + TinyCam + Fully + Mixed Content

In my case, its the stream coming from tinycam that still isnt working, w/ nip.io.
maybe it needs to come direct from the camera?

No, there’s no such limitation.

I would recommend creating a separate thread and sharing the details of your configuration so we can best assist you.

:page_facing_up: Effective Ways to Seek Help and Troubleshoot

1 Like

this may be a dumb question, but does FKB act as its own browser or leverage default browser app of device? Can it call Firefox?

:point_down:

And no, you can’t have it run the Firefox engine.

1 Like

My FKB just started not loading my local lan images, thanks for the nip.io workaround! Really easy once I got my head around it lol.

1 Like

I’m on a Kindle with FK, and it does not seem to work, it does work in Chrome though. I assume that is has to do with the SSL/Mixed, even when I change the settings.

Could be… hard to tell without more details. Fully Kiosk uses the ‘webview’ bundled with the system. So if that webview is running version 85 or newer, it would be impacted by the mixed content issue (HTTP image on HTTPS page)… or if it’s running 111 or newer, it would be impacted by the local IP limitation.

Both are discussed in detail in the posts above including workarounds for both.

wanted to update; everything all of a sudden started working, including using nip.io. i didn’t touch it or change anything, and one day it started showing up. i assume something was updated on the browser side.

1 Like

Hi,

Could you give an example how the full adress should look like given my cam is at
http://192.168.1.xx/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx&st_uuid=123456

woudl it be
http://192-168-2-131.nip.io:88/cgi-bin/92.168.1.xx/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx&st_uuid=123456
thx
??

That’s close. If your original URL doesn’t have a port, then you don’t need to include a port in the wildcard DNS version either.

In your original sample URL, the port was not included and since it was an HTTP request, it would be implied to be port 80. In your sample nip.io converted URL, you had appended a port of :88. Also note that your sample nip.io URL had some weirdness where that path seemed to have extra stuff added like /cgi-bin twice and 92.168.1.xx included in the path as well.

I also suspect that the st_uuid came from the SharpTools autorefresh, so I dropped that, but if that’s something else, you could of course add it back in if needed.


So reading between the lines from your example, that would become something like the following, assuming your sample nip.io URL was the actual local IP and the port wasn’t on the original URL:

nip.io
http://192-168-2-131.nip.io/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx

Thanks a lot!
Took me a couple of days to figure it out

The links work fine on media on my PC with chrome browser.
However it doesn’t work on my android phone, nor on my android tablet which are in the same house /wifi AP “failed to load image”

any hint on how to get this working?

What browser are you using on those devices?

You may need to disable Mixed Content blocking on those browsers as well as noted in the first post of the thread.

As a first step in trouleshooting, I would also double check that those devices are able to view the media URL you are using directly in the browser – directly in the URL bar of the browser rather than embedded within a Media Item – that helps verify that they can resolve the URL as expected and communicate directly with the camera.

1 Like

Can this work for Open in Modal?

I’d like to use a lovelace dashboard as a popup, but so far without luck… I’ve disabled mixed content blocking and have sent the site through st-ip.net . It seems to launch in a new window, but won’t open in modal.

What error messages are you seeing when you review your browser console?

The message is: “The webpage does not appear to be loading. The website may block being loaded within another page. Try changing the hyperlink to open in a new window”.

If i open it as another window, it loads ok, but it gets me out of what I was trying to do on the dash.

I mean from a desktop browser you should be able to open the browser console and see if any errors were reported by the browser itself. Often times those errors are not exposed directly to the web app, so it has to guess that what is happening. But the browser logs themselves often expose interesting details. Usually accessed via F12 or your browser menu.