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
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>
