SRS+OBS实现网页HLS直播功能

SRS+OBS实现网页HLS直播功能

过程简述：OBS获取场景和源录像，将其以rtmp标准上传至SRS服务器，SRS服务器处理将其转换，以hls标准存储在服务器中，前端页面通过访问其URL获取资源，实现直播功能。

SRS配置

1、下载SRS的windows版本，地址：https://ossrs.net/releases/download.html ，找到 “Windows(Cygwin)安装包”点击即可下载

2、安装后编辑conf文件夹下的http.hls.conf文件：其中hls_fragment为切片的时长，推荐为10，不过延迟较大，可根据实际情况调整

# the config for srs to delivery hls
# @see https://github.com/ossrs/srs/wiki/v1_CN_SampleHLS
# @see full.conf for detail config.

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    5;
        hls_window      60;
        hls_path        ./objs/nginx/html;
        hls_m3u8_file   [app]/[stream].m3u8;
        hls_ts_file     [app]/[stream]-[seq].ts;
    }
}

3、返回上一页，创建bat文件运行，也可以直接运行

objs\srs.exe -c conf\http.hls.conf
cmd

OSB设置

下载地址：https://obsproject.com/download

安装后运行，选择 设置-推流

服务选择 “自定义”

服务器设置为 rtmp://127.0.0.1/live

串流密钥为自定义的，此处设置为livestream

点击开始推流，右下方出现绿色方块和速率即代表推流成功

展示

可使用SRS播放器播放：
打开安装目录下的srs-home文件，选择srs播放器
在URL中输入 http://127.0.0.1/live/livestream.m3u8

网页展示：
添加html：

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'
	style='width: 700px;height: 400px'>
	<source id="source" src="http://127.0.0.1/live/home.m3u8" type="application/x-mpegURL"></source>
</video>

<script>
		var myVideo = videojs('myVideo', {
			bigPlayButton: true,
			textTrackDisplay: false,
			posterImage: false,
			errorDisplay: false,
		})
		myVideo.play()
		var changeVideo = function(vdoSrc) {
			if (/\.m3u8$/.test(vdoSrc)) {
				myVideo.src({
					src: vdoSrc,
					type: 'application/x-mpegURL'
				})
			} else {
				myVideo.src(vdoSrc)
			}
			myVideo.load();
			myVideo.play();
		}
</script>

问题事项

端口问题

配置文件中listen是1935，表示监听1935端口，即推流时端口为1935（rtmp的默认端口），所以推流时
rtmp://127.0.0.1/live也可写作rtmp://127.0.0.1:1935/live
配置文件中http_server中listen为8080，表示访问服务使用8080端口，即拉流时使用8080端口，播放时
http://127.0.0.1/live/livestream.m3u8也可写作http://127.0.0.1:8080/live/livestream.m3u8

如果同时运行其他程序发生冲突，可相应的修改端口

延迟问题

hls_fragment 5; 表示切片时长
hls_window 60; 表示总时长
播放时会读取每一个切片，如果切片时长比较大，则运行过程较为流畅，但是延迟比较大，切片时长过小，延迟小，但播放时可能会产生卡顿，这和设备硬件与网络是有关系的，并且使用hls始终存在较大的延迟，可能需要硬件和其他技术加持才能减小