如何在使用 https 的 React 應用程序中調用 hls 服務器

Question

因此，我有一個通過 nodejs 服務器構建和運行的 React 應用程序。 此 nodejs 服務器與處理證書的 nginx 一起運行。 這個 react/nodejs 服務器也在運行一個 RTMP 服務器這個 RTMP 服務器正在運行一個 hls 服務器。

所以，基本上該網站有證書並運行在 https:// 上。 我需要知道采取什么方法來調用 hls 服務器以在網站上顯示 stream。 問題是我正在使用“節點媒體服務器”的 package 沒有明確說明如何將 http 轉換為 https，因此當我從 React 應用程序調用 url 時，我得到一個“（阻塞：混合-內容）”錯誤。 當我調用 the.m3u8 文件時。 所以 React 應用程序將調用 url“http://website.com/live/stream/index.m3u8”。 我需要將此 hls stream 轉換為 https 嗎？ 如果是這樣，我該怎么做？ 也許我需要更改我的 nginx 配置？

下面是我的 nginx 配置。

upstream socketio {
#       ip_hash;
        server 127.0.0.1:8174;
}

upstream reactserve {
        server 127.0.0.1:3000;
}


upstream hls {
        server 127.0.0.1:8179;
}

#server {
#       listen          80;
#        server_name     www.idealgambler.com;
#       rewrite         ^(.*)   https://$host$1 permanent;


#}

server {

        listen                  443 ssl;
        ssl                     on;
        server_name             idealgambler.com www.idealgambler.com;

        access_log              /var/log/nginx/access-ssl.log;
        error_log               /var/log/nginx/error-ssl.log;


        location / {
        #       include proxy_params;
                proxy_pass              http://socketio;
                proxy_next_upstream     error timeout invalid_header http_500 http_502 http_503 http_504;
                proxy_redirect          off;
                proxy_buffering         off;

                proxy_set_header        Host                    $host;
                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header        X-Forwarded-Proto       $scheme;
                proxy_set_header Access-Control-Allow-Origin *;
                add_header              Front-End-Https         on;
                add_header              Access-Control-Allow-Origin *;
        }

        location /socket.io/ {
                proxy_pass              http://socketio;
                proxy_redirect off;

                proxy_http_version      1.1;

                proxy_set_header        Upgrade                 $http_upgrade;
                proxy_set_header        Connection              "upgrade";

                proxy_set_header        Host                    $host;
                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header Access-Control-Allow-Origin *;
                add_header              Access-Control-Allow-Origin *;
        }

        location /hls {
                proxy_pass              http://hls;
                proxy_redirect off;
                proxy_set_header        Host                    $host;
                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header Access-Control-Allow-Origin *;
                add_header              Access-Control-Allow-Origin *;
        }


    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


    ssl_certificate /etc/letsencrypt/live/idealgambler.com-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/idealgambler.com-0001/privkey.pem; # managed by Certbot

}

這是nodejs中的NodeMediaServer代碼：

require("./Casino/CasinoRouters/client-connected")(app, io);

const NodeMediaServer = require("node-media-server");
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30,
  },
  http: {
    port: 8179,
    mediaroot: "./media",
    allow_origin: "*",
  },
  log_file: "./logs/nms.log",
  trans: {
    ffmpeg: process.env.FFMPEG_PATH,
    tasks: [
      {
        app: "live",
        hls: true,
        hlsFlags: "[hls_time=2:hls_list_size=3:hls_flags=delete_segments]",
        hlsKeep: true, // to prevent hls file delete after end the stream
        dash: true,
        dashFlags: "[f=dash:window_size=3:extra_window_size=5]",
        dashKeep: true, // to prevent dash file delete after end the stream
      },
    ],
  },
};

var nms = new NodeMediaServer(config);
nms.run();

所以我嘗試更新 nginx 文件，並將 nodemediaserver 的配置更改為 https。在配置中將 http 更改為 https 的問題是節點媒體服務器的 https 中不存在密鑰“mediaroot”。 我得到的錯誤是在 express 應用程序中將其更改為 https 時找不到文件“./media”。 所以基本上 https hls 不會運行，只有 http 會運行。 也許有一個不同的配置可以通過 https 運行它。

我嘗試將 hls 添加到 nginx 配置，但我認為這沒有任何作用。

Answer 1

理想情況下，您應該嘗試修復 URL 並使其與應用程序方案相匹配（即永遠不要將 http:// 與 https:// 混合使用），或者如果 URL 來自外部來源，則讓應用程序檢測並更正它。

如果它不可行，您可能會嘗試回退到在 HTTP 響應標頭中插入Content-Security-Policy: upgrade-insecure-requests 。 這將使瀏覽器自動將所有 http:// 轉換為 https://，就好像后者最初是由應用程序請求的一樣。 您似乎可以控制部署，因此這可以在 Nginx 配置中完成。 或者，可以將 header 添加到 HTML 頭部，如本答案所示。

還要注意 WebSockets。 安全的 (wss://) 可能需要根據RFC6455由代理傳遞Sec-WebSocket-*標頭。 Nginx 默認不這樣做。 您可能希望將以下行添加到配置中：

location /socket.io/ {
    # ...

    # pass client-to-server Sec-WebSocket-* headers
    proxy_set_header Sec-WebSocket-Key        $http_sec_websocket_key;
    proxy_set_header Sec-WebSocket-Version    $http_sec_websocket_version;
    proxy_set_header Sec-WebSocket-Extensions $http_sec_websocket_extensions;
    proxy_set_header Sec-WebSocket-Protocol   $http_sec_websocket_protocol;
}