浏览器强制HTTPS下加载HTTP摄像头混合内容的技术求助

现代浏览器正强制在所有场景使用HTTPS，导致原本通过JavaScript切换到HTTP加载摄像头内容的方法彻底失效。站点基于Squarespace搭建，无法从服务器端修改请求协议。

当前可用场景（仅HTTP页面下） #

• 可通过静态IP加载摄像头图片：http://96.57.87.254:91/live/1/jpeg.jpg
• 可点击按钮跳转至加载RTP视频流的页面

已尝试的无效方案 #

1. 通过JS创建<a>标签触发HTTP站点跳转：浏览器会强制重定向回HTTPS，无法生效
2. 通过XMLHttpRequest请求HTTP站点：同样被浏览器的HTTPS强制策略拦截

待落地的思路 #

• 强制页面切换到HTTP（已被浏览器拦截）
• 使用CORS代理加载HTTP内容（不确定如何配合静态IP实现）
• 第三方HTTPS托管相关内容

可行解决方案 #

方案1：搭建HTTPS反向代理 #

这是最直接的解决方式，通过一个HTTPS代理服务器中转请求，把摄像头的HTTP资源转换成HTTPS返回给Squarespace站点。
推荐用Nginx快速搭建，配置示例如下：

server {
    listen 443 ssl;
    server_name your-proxy-domain.com;

    # 配置SSL证书（可使用Let's Encrypt免费证书）
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 映射摄像头图片路径
    location /camera-image/ {
        proxy_pass http://96.57.87.254:91/live/1/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 若需代理视频流，添加对应路径配置
    location /camera-stream/ {
        proxy_pass http://96.57.87.254:91/[视频流路径]/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # 视频流需开启长连接支持
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

配置完成后，在Squarespace页面中使用https://your-proxy-domain.com/camera-image/jpeg.jpg即可加载摄像头图片，视频流同理使用对应代理路径。

方案2：用无服务器函数做代理（无需自建服务器） #

比如使用Cloudflare Workers，编写简单的代理代码即可实现中转：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  // 把请求路径映射到摄像头的HTTP地址
  const cameraResourcePath = url.pathname.replace('/camera-proxy/', '')
  const cameraUrl = `http://96.57.87.254:91/live/1/${cameraResourcePath}`
  
  const response = await fetch(cameraUrl, {
    headers: {
      'User-Agent': request.headers.get('User-Agent')
    }
  })

  // 返回响应并配置CORS，允许你的Squarespace域名访问
  return new Response(response.body, {
    headers: {
      'Access-Control-Allow-Origin': 'https://your-squarespace-domain.com',
      'Content-Type': response.headers.get('Content-Type'),
      'Cache-Control': 'no-cache' // 避免缓存旧的摄像头画面
    }
  })
}

部署后，通过https://your-worker-domain/camera-proxy/jpeg.jpg访问摄像头资源，即可在HTTPS的Squarespace页面中正常加载。

方案3：修改摄像头的访问协议（若设备支持） #

如果你的摄像头设备支持配置HTTPS，直接在设备后台开启HTTPS服务，配置SSL证书（自签证书需用户首次访问时确认信任），之后就能直接在Squarespace的HTTPS页面中加载摄像头的HTTPS资源，无需额外代理。

内容的提问来源于stack exchange，提问作者Mike Q