SRS 分发HLS 跨域问题

 

一、SRS 分发

 1、通过修改配置 usr/local/srs/conf：的srs.conf,增加如下配置，开通srs的hls功能。

 http_stream     注释： //srs 版本不一样 配置信息头可能不一样

{

    enabled        on;

    listen         8080;

    dir          ./objs/nginx/html;

}

 

stats {

    network         0;

    disk            sda sdb xvda xvdb;

}

 

vhost __defaultVhost__ {

  hls {     

        enabled         on;      

        hls_path        ./objs/nginx/html;     

        hls_fragment    10;   

        hls_window      60;     

        hls_on_error    ignore;

}

 

2 打开防火墙firewall-cmd –zone=public –add-port=8080/tcp –permanent 8080端口

3 、重新启动SRS，选用的配置文件是你修改的文件。

4、通过VLC测试看到视频，视频地址是：http://XXX.XXX.XXX:8080/live/1615279268011.m3u8

 

二、HLS跨域

1、修改服务端配置

       后端启动 nginx 做反向代理。启动nginx

server {

        listen       80;     #前端的网址不需要加8080端口了。访问的时候直接去端口，默认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;     #代理到8080.

            add_header Cache-Control no-cache;

            add_header Access-Control-Allow-Origin *;

         }

 

        location ~* \.m3u8 {

         proxy_pass   http://localhost:8080;

         root /usr/local/srs/objs/nginx/html/;

         add_header Access-Control-Allow-Origin *;

      }

 

       location ~* \.ts {

       proxy_pass   http://localhost:8080;

       root /usr/local/srs/objs/nginx/html/;

       add_header Access-Control-Allow-Origin *;

       }

}

 

2、test.html(前端用可通过html5解封包播放(hls.js))

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

<video id="video"></video>

<script>

 if (Hls.isSupported()) {

            var config = {

                autoStartLoad: true,

                capLevelToPlayerSize: true

            };

            let video = document.getElementById('video')

            let hls = new Hls(config)

            hls.attachMedia(video

            hls.loadSource('http://XXX.XXX.XXX/live/1615517176700.m3u8')，这里需要nginx代理监听80，所以端口不要写8080

            hls.on(Hls.Events.MANIFEST_PARSED, function () {

                console.log("加载成功");

                video.play()

            })

        

            hls.on(Hls.Events.ERROR, (event, data) => {

                console.log(event, data);

               // console.log("加载失败");

            });

        }

 

</script>