srs 使用nginx反向代理解决chrome播放HLS的跨域问题(待测试)

最新推荐文章于 2024-04-11 08:54:55 发布

NBA_1

最新推荐文章于 2024-04-11 08:54:55 发布

阅读量3.5k

点赞数

分类专栏： srs

srs 专栏收录该内容

7 篇文章

订阅专栏

转自https://blog.youkuaiyun.com/u014016672/article/details/84551407

1：安装srs；

2：安装nginx：

https://www.cnblogs.com/wyd168/p/6636529.html

3：配置srs

修改conf/http.hls.conf

listen              1935;
max_connections     1000;
daemon              off;
srs_log_tank        console;
http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}
vhost __defaultVhost__ {
    hls {
        enabled         on;
        hls_fragment    3;
        hls_window      5;
        hls_path        ./objs/nginx/html;
        hls_m3u8_file   [app]/[stream].m3u8;
        hls_ts_file     [app]/[stream]-[seq].ts;
    }
}

4：修改nginx配置

修改conf/nginx_conf.default

    server {
        listen       80;
        server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

        location / {
            root   html;
            index index.html index.htm;
        proxy_pass http://localhost:8080;
        add_header Cache-COntrol no-cache;
        add_header Access-Control-Allow-Origin *;
        }

5：启动srs

./objs/srs -c conf/http.hls.conf

6：启动nginx

cd /usr/local/nginx/

sudo ./sbin/nginx -c conf/nginx_conf.default

7：obs直播推流，rtmp正常推流

8：chrome 播放器打开video.html 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> video </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./hls.min.js "></script>
  </head>
  <body>
        <div >
                <video id="video" controls style="width:100%;height:100%;object-fit: fill" src="" type="application/vnd.apple.mpegurl">
                    <p class="warning">Your browser does not support HTML5 video.</p>
                </video>
            </div>
            <input type="button" οnclick="testVideo()" value="测试" />
  </body>
</html>