Load mixed content on page load with Javascipt

Modern browsers are constantly forcing https for all situations.

Issue: Need to load mixed content

Before the https requests were being force, I could use JS to force the page to reload as http for the camera part of the page. It’s no longer working in many browsers. I have tried all of the easy basic javascript tricks but they have all failed. I’m using squarespace so I can’t override the browser requests server side.

Currently, if the page loads as http: it does the following:

displays a Image from the camera over static IP: http://96.57.87.254:91/live/1/jpeg.jpg with the option to click on a button which goes to another page that loads the RTP video stream.

My only thoughts are to

1. Force the page down to http, but the browser ignores the protocol
   and loads the page say http://google.com as https no matter what.

2. Use a CORS proxy for the http content parts? I am not sure how to get that to work with a static IP

3. Use some 3rd party webste to host it as https.

I’m hoping someone can help me solve one of these or suggest something else.

For example this fails:

<script> 
if (!(window.location.href.indexOf("squarespace") > -1) && (location.protocol == 'https:')) {
    alert("Cameras require that your browser use http connection, switching to it now");
    var URL = 'http://URL.org/'
    var httpAnchor = document.createElement('a');
    httpAnchor.href = URL;
    
    // Trigger a click on the anchor element
    httpAnchor.click();
}


</script>

This for example also fails:

    if (!(window.location.href.indexOf("squarespace") > -1) && (location.protocol == 'https:')) {
    alert("Cameras require that your browser use http connection, switching to it now");
    var URL = 'http://URL.org'
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET", URL, true);
    xmlhttp.send();
}