+3
Discuss & Vote

Images on media tiles are not loading

sk108 4 years ago in Media Tiles / Images updated by Alex (ActionTiles) (Co-Founder) 3 days ago 43 2 duplicates

Images on media tiles are not loading on Google Chrome browser on PC, however they load on the phone browser. When I try to edit those "Media" tiles, it says "Enter valid URL". Please note that the URL is valid and that media tile is showing correctly on the Android phone browser (Google Chrome). It is happening with all media tiles on the PC browser. It used to work fine till last week on PC as well as on phone. Please help, thanks in advance.

Answer

Answer
Discuss & Vote

All of the issues serving video streams and images are due to browsers and operating systems enforcing Mixed Content policies.

Mixed content refers to a situation that arises when a secure (HTTPS) webpage contains elements, such as video streams or images that are loaded using an insecure (HTTP) connection.

More and more web browsers enforce strict security policies to protect users' data and privacy. When a secure webpage includes insecure content, it poses a risk and compromises the integrity and security of the entire webpage.

To mitigate this risk, modern browsers typically block mixed content by default. They either prevent the insecure content from loading or display a warning to the user. To maintain a secure browsing experience, it's important to ensure that all elements on a secure webpage are loaded using secure (HTTPS) connections. This can be achieved by updating the resource URLs to use HTTPS or by hosting the resources on secure servers.

ActionTiles does not host or process your local video streams and images. It is impossible for ActionTiles to upgrade connections to HTTPS.

ActionTiles cannot affect the browser and operating system and relies on them to display the content. There's absolutely nothing that ActionTiles can do to make the browser display content that the browser does not allow.

The Mixed Content limitation that is now imposed by modern browsers is not an issue that's unique to ActionTiles. Every web page and Progressive Web App is affected by this.

There are two ways to resolve this issue:

  • Serve content over HTTPS.
  • Configure the browser to allow mixed content. There are several issues with this option, since some browsers do not have this configuration or ignore it.
Duplicates 2
Discuss & Vote

Hi,

Please check if you are able to view the images on your PC using the Chrome browser directly, rather than via ActionTiles app. It's possible that the phone and the PC have different types of access to the network resources.

Yes, I can view them directly in the same browser. Both PC and phone have same access, also they are on same wifi network.

It doesn't have any embedded credentials. However, that url fetches details from a google sheet and outputs it as an image. I am still unsure why it is working normal in another tab in the same browser, but not working on media tiles. Previously it used to work perfectly.

I was able to solve this by going in to site settings for actiontiles.com in chrome browser and by allowing "insecure content".

Could you please send me (privately) a sample of such image URL?

Previously ActionTiles was able to display "mixed content" without any issues. Mixed content are resources served over HTTP to HTTPS sites. I wonder if browser policy has now changed to disallow that.

How to share the link with you privately? Can you please elaborate so that I can share the link with you.

Solution Exists

In a move for safer web, Chrome no longer allows to display images that are served over insecure HTTP. Chrome tries to upgrade connections to HTTPS, but if the server (or camera) is not able to respond, the image will not be loaded.

This is a major problem for ActionTiles users who often use Chrome and derivative browser to stream video on local network.

The ActionTiles mobile app is not currently affected by this issue. The app is available here:

https://support.actiontiles.com/knowledge-bases/8/articles/10267-actiontiles-moble-app

Some Chrome mobile users were able to make HTTP video streams work by turning off Safe Browsing. This option is available under kebab menu (top-right) > Settings > Privacy and Security > Safe Browsing > No Protection.

Please note that this comes with all the caveats of reducing internet security.

Thanks Alex. For now I have enabled SSL certificate on my domain. Please keep us posted if you figure out something else as well.

Thanks,

Satyam

Had this cause me issues as of today, its not really a "Fix" but you can get around it by allowing mixed content for just app.actiontiles.com

Some instructions from Adobe (just do this on your action tiles web page instead) : https://docs.adobe.com/content/help/en/target/using/experiences/vec/troubleshoot-composer/mixed-content.html

Now I'm off how to find out how to upgrade my BlueIris to do HTTPS

I already did this. However, sadly there is no such option on mobile chrome browser. BTW, I have now enabled SSL certificate on my hosting.

Thanks for this!  I just ran into this very issue trying to embed images from my local WeeWX weather station server.  I marked the lone panel as mixed and bam.  Now if I can get the generated current weather RSS feed to work like the example RSS feeds..

Some users reported that mixed content sill works using the Samsung browser. To my knowledge this should also work in Firefox. For now, anyway.

This solved my embedded Media Tiles that point to my Amcrest Camera Live Video that were not showing up and appeared as a broken link. I just added 
https://beta.actiontiles.com under Settings - Insecure Content - Allow

It did not fix the link that points to my BloomSky Camera that used to work as a .php link as a Still Image or Gif within a Media Tile. I can visit this link http://bloomsky.rf.gd/bloomSkyLatest.php?i=0 in my Chrome Browser and it is displayed , however when I add it as a Media Tile it will not display. I added http://bloomsky.rf.gd in the same manner described above to allow Insecure Content , but it did not resolve it. This link used to display without issue.  

Closed: Duplicate Issue

Hi David,

This is going to be a source of heartache for many of our users.

The following thread was already started and also lists your workaround:

https://support.actiontiles.com/communities/12/topics/9592-images-on-media-tiles-are-not-loading-on-google-chrome-browser-on-pc

Fixed for my setup.

In Chrome on each device you need to use action tiles... Set this too enabled....

chrome://flags/#allow-insecure-localhost

camera views now work on my hub tablet.

I enabled that setting and still no Bloomsky! I was super hopeful that this would solve the issue though.

Thanks for the reply!

try this one..

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Nope!  Here is the link that used to display as a Media Tile after one visited the site and loaded the image once. It would then display and update within ActionTiles/ Media Tile

http://bloomsky.rf.gd/bloomSkyLatest.php?i=0

Hi, thanks for this info, I hoped it would cure things for me but didnt.

I view actiontiles on a RaspPi , it was all working fine, stupidly i ran an update and then actiontiles will not display my CCTV media feed. If I paste the CCTV snapshot URL into a different Chromium tab, i can see the CCTV snap shot no problem, so i am a bit confused why its not working in ActionTiles, I wondered if you had any ideas?

typical that i spend hours on it and then when i post in here i get it working straight away. 
I had to go into:
chrome://settings/content
and relax some settings and the camera feed appeared in Action Tiles again. :-)  

ensure you relaunch chrome as well.

I did . there is a message to the effect that one has to relaunch thier Chrome Browser.

ok. I see your trying to view a PHP script, which runs and produces an image. That's quite different from just viewing a jpg as I was doing. 

There is a topic / discussion on this here..

https://support.actiontiles.com/communities/12/topics/9439-bloomsky-current-image-display-was-working-great-but-recently-stopped-working

Yes. This method used to work and display the sky image from the BloomSky weather station as a Media Tile within ActionTiles, but something changed and it no longer works. Thanks for your help! 

Edge mobile browser is a nice stop gap, can also link to Mobile desktop.

Some Chrome mobile users were able to make HTTP video streams work by turning off Safe Browsing. This option is available under kebab menu (top-right) > Settings > Privacy and Security > Safe Browsing > No Protection.

Please note that this comes with all the caveatsof reducing internet security.

Answer
Discuss & Vote

All of the issues serving video streams and images are due to browsers and operating systems enforcing Mixed Content policies.

Mixed content refers to a situation that arises when a secure (HTTPS) webpage contains elements, such as video streams or images that are loaded using an insecure (HTTP) connection.

More and more web browsers enforce strict security policies to protect users' data and privacy. When a secure webpage includes insecure content, it poses a risk and compromises the integrity and security of the entire webpage.

To mitigate this risk, modern browsers typically block mixed content by default. They either prevent the insecure content from loading or display a warning to the user. To maintain a secure browsing experience, it's important to ensure that all elements on a secure webpage are loaded using secure (HTTPS) connections. This can be achieved by updating the resource URLs to use HTTPS or by hosting the resources on secure servers.

ActionTiles does not host or process your local video streams and images. It is impossible for ActionTiles to upgrade connections to HTTPS.

ActionTiles cannot affect the browser and operating system and relies on them to display the content. There's absolutely nothing that ActionTiles can do to make the browser display content that the browser does not allow.

The Mixed Content limitation that is now imposed by modern browsers is not an issue that's unique to ActionTiles. Every web page and Progressive Web App is affected by this.

There are two ways to resolve this issue:

  • Serve content over HTTPS.
  • Configure the browser to allow mixed content. There are several issues with this option, since some browsers do not have this configuration or ignore it.

I think I’ve read every single post about this issue with firetablets and the webview problem. I see that folk running Samsung tablets can roll back to one that worked, with fire tablets you can’t seem to do that. So then I thought I could use https with my Amcrest cameras within actiontiles but I have absolutely no clue on how to do that.

I thought I could just put https instead of http but nothing comes up. I use TinyCam monitor running the webserver and spent all night trying, changing to https within the webserver, but it didn’t work. Can someone please help me out , or is this just not going to work anymore. I also use Blueiris as well so could use that too. All I want is my Amcrest cameras to work within actiontiles again lol. 


thank you. 

I am having the same issue with my Tapo cams on my firetables. I can copy the link straight from Actiontiles and paste into firefox and it asks me to sign in and it works, but not in actiontiles. Action tiles gives a warning "Enter a valid URL to preview media."
Link in actiontiles: https://192.168.XX.XXX:8083/axis-cgi/mjpg/video.cgi?camera=1user=admin&pwd=XXXXX&fps=1&compression=80

Equipment:Actiontiles, Tapo IP Cam, Firetablet, Tinycam pro, Fully.

I don’t even think I can do that. Did you have to do anything in TinyCam pro? 

UPDATE: This
is an issue with the Tapo cameras, not Actiontiles. The setup above
worked for me after I opened the camera live view on the tapo app. It
looks like the cameras are going to sleep with no motion and dropping
off my wifi so the feed is broken.

so what exactly did you do to make https work because I’m a little lost. Is there a setting somewhere within TinyCam, or within your Tapo app to allow https or something. I’ve tried selecting https within TinyCam but that doesn’t do anything.  I’m using Amcrest cameras but I’d imagine it’s something similar. 

In Tinycam pro, I added my cameras as Camera brand = (Generic), Camera model = Generic URL.

Then set the request to rtsp://user:password@IP addres:554/stream2. The "request" is the format for the tapo cams. You can search for what yours should be. Use this website for help with that. https://www.ispyconnect.com/camera/amcrest

Protocol = RTSP over TCP

No username or password.

The other problem I am having with this set up is that I can not change the channel number for each camera in the Advanced settings.  It is greyed out. I believe that is because the camera brand is set to Generic, but no other Camera brand selections I tried would show the stream for me.

I think you already have this, but, the webserver settings, I have "Use HTTPS" checked, "PKCS12 certificate" as Default, nothing for PKCS12 certificate password or Port forwarding.

Under ADMIN, I have the Tiny cam "Username" and "Password" set. 

thanks for that. I’ll give it a try. 

are there any updates or knowledge base to get RTSP streams working using https protocol? Looks like my android device stopped working with a local http implementation.

Adam,

There's simply no way to display RTSP streams on a web pages directly. You will need to utilize some transcoding server, such as Tiny Cam, VLC or others.

thanks for the reply. There’s some posts here or there that state this isn’t an issue using the android action tiles app?

is that still true? Looks like I may have to switch from using fully if that’s the case.


anyone using tiny cam know if it’s a SaaS service where it streams to their cloud or does it convert the Android device as a transcoding server? Also confirming, does Tiny cam provide an https uri or just http?

Hi.   I've read through the thread and it's resolved some issues but i'm stuck on what I think is the last step.  I have tried both iSpy and Blue Iris, for both, I can see the camera through a static web page and I can see my camera if I add a shortcut tile.  However, if I try to add it as a "still image or GIF" option under "My Media", all I can see is a broken tile (I am using IE/Edge as my browser in all cases).

Here's what my links look like in ActionTiles:

Blue Iris:  http://username:password@IPAddress:PortNumber/image/FrontDoor?q=70&s=70

iSpy:  http://username:password@IPAddress:PortNumber/cgi-bin/snapshot.cgi

I noticed the comment in Action tile says to use HTTPS for maximum URL compatibility but also have seen people are able to get the camera to work in a tile without HTTPS.

Please refer to accepted answer. All information therein is still relevant.