HLS is not a supported 'stream' type in OBS; however you can configure it to record in HLS format.
The trick is to map your website as a network drive so it appears just like another local disk to OBS.
Video explanation
Youtube: https://youtu.be/Qlsbr-OD3o8
In HLS format on simple web server: http://thelatinway.co.uk/obs_hls_howto_stream.html
What is HLS?
HLS allows you to stream live on any website; the website does not require special streaming server software to be installed. HLS was designed to enable big live sporting events to be streamed on content delivery networks, which only supported simple static file serving. It is also useful if you have a website on very simple cheap shared hosting and can't install a streaming server.
How does HLS work? The streamer breaks the video into lots of small segments, which are uploaded as separate files. It also frequently updates a .m3u8 playlist file which contains information about the stream and the location of the last few segments. JavaScript in the viewer's web browser downloads the segments in turn and stitches them together to play back seemlessly. The web browser repeatedly downloads the .m3u8 file to discover new segments as they appear.
How do you configure your website?
Look in your website's control panel or web hosting provider's documentation for how to map or mount your files on another machine. In cpanel it is called "Web Disk". If they provide a WebDAV URL to configure manually you can use "Map Network Drive" in windows. Once mapped check that you can copy a file to it as if it was a local disk with a drive letter.
You will also need to upload a webpage containing an HLS player. I suggest copying the getting started example from https://github.com/video-dev/hls.js/ in an HTML file. You just need to change the videoSrc to point to your m3u8 file (which will have the name you select in OBS with .m3u8 appended.)
If your website provider has a caching then you may like to disable caching for the stream files to avoid problems if you stop and restart a stream, overwriting the old one. On Apache web servers one can disable caching by creating a file named .htaccess in the directory that will contain the stream. Put in that file:
#Disables GZIP
SetEnv no-gzip 1
#Turns off the expires headers for Apache
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
# Disable Caching
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
AddType video/MP2T .ts
How to you configure OBS?
In the settings dialog go to Advanced and set the recording filename. The default includes the current time; which would mean you wouldn't know where to point the HLS player JavaScript before you start streaming. Choose something without any special % time values. You may also like to enable Overwrite if file exists.
In the Settings Dialog go to Output, set output mode to Advanced and go to the recording tab. Here you set type to "Custom Output (ffmpeg)" and set container format to "hls". Set the file path to a folder on your mapped drive.
One more option that you may wish to change is the Keyframe interval. In video compression, a keyframe is a frame that encodes a complete picture; other frames only encode what has changed since the previous frame. Playback can only start at a keyframe. Lower values reduce latency for viewers but may affect quality/filesize. I found that streaming at 30 frames per seconds with the default of keyframe interval of 250, viewers playback was about 30 seconds behind live, but by changing it to 70 the latency was reduced to about 10 seconds. FFmpeg will start a new HLS segment at the first keyframe after 2 seconds have passed so there is no benefit to setting it lower than your framerate times 2.
You may tune the bitrates as you desire. However, I have found that disabling video altogether doesn't work. In theory HLS supports audio only streams; but OBS doesn't want to do it. If you wish to tweak how the HLS works you may try custom muxer settings; the settings available are documented here: https://www.ffmpeg.org/ffmpeg-formats.html#hls-2 .
Don't change the codecs or it might not work in all web browsers. However, swapping libx264 with a different h264 encoder should be okay (e.g. to use NVIDIA's hardware accelerated nvenc).
How to stream
Counterintuitively, stream using the "Start Recording" button in OBS.
Check the output on your web page. If you have streamed previously with the same filename you will need to press F5 (refresh) in the browser to get the new stream and not just the end of the previous one.
Can I save the recording to view later?
After the stream you can merge all the segments into a single file simply by concatenating them in order. On Linux/Unix:
ls demo*.ts | sort -V | xargs cat > name.ts
The file can be played in VideoLAN; but you might like to convert to a format more widely compatible:
sudo apt install ffmpeg
ffmpeg -i name.ts -bsf:a aac_adtstoasc -acodec copy -vcodec copy name.m4v
(Windows users might like to install Debian or Ubuntu from the Windows store to do this; though there probably is a much simpler way)
Another option to allow playing the full video on the website at least is to edit the .m3u8 playlist and put the complete list of .ts files in it, not just the latest few. This simple script will generate one (assuming fixed segment size of 2 seconds):
ls demo*.ts | sort -V | awk 'BEGIN { print "#EXTM3U"; print "#EXT-X-VERSION:3"; print "#EXT-X-TARGETDURATION:2"; } {print "#EXTINF:2.0,"; print $0} END{print "#EXT-X-ENDLIST"}' > demo.m3u8
(Replace demo with the your filename.)
You can view a replay of my explanatory video using this playlist here, which will playback:
http://thelatinway.co.uk/obs_hls_howto_stream.html
The trick is to map your website as a network drive so it appears just like another local disk to OBS.
Video explanation
Youtube: https://youtu.be/Qlsbr-OD3o8
In HLS format on simple web server: http://thelatinway.co.uk/obs_hls_howto_stream.html
What is HLS?
HLS allows you to stream live on any website; the website does not require special streaming server software to be installed. HLS was designed to enable big live sporting events to be streamed on content delivery networks, which only supported simple static file serving. It is also useful if you have a website on very simple cheap shared hosting and can't install a streaming server.
How does HLS work? The streamer breaks the video into lots of small segments, which are uploaded as separate files. It also frequently updates a .m3u8 playlist file which contains information about the stream and the location of the last few segments. JavaScript in the viewer's web browser downloads the segments in turn and stitches them together to play back seemlessly. The web browser repeatedly downloads the .m3u8 file to discover new segments as they appear.
How do you configure your website?
Look in your website's control panel or web hosting provider's documentation for how to map or mount your files on another machine. In cpanel it is called "Web Disk". If they provide a WebDAV URL to configure manually you can use "Map Network Drive" in windows. Once mapped check that you can copy a file to it as if it was a local disk with a drive letter.
You will also need to upload a webpage containing an HLS player. I suggest copying the getting started example from https://github.com/video-dev/hls.js/ in an HTML file. You just need to change the videoSrc to point to your m3u8 file (which will have the name you select in OBS with .m3u8 appended.)
If your website provider has a caching then you may like to disable caching for the stream files to avoid problems if you stop and restart a stream, overwriting the old one. On Apache web servers one can disable caching by creating a file named .htaccess in the directory that will contain the stream. Put in that file:
#Disables GZIP
SetEnv no-gzip 1
#Turns off the expires headers for Apache
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
# Disable Caching
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
AddType video/MP2T .ts
How to you configure OBS?
In the settings dialog go to Advanced and set the recording filename. The default includes the current time; which would mean you wouldn't know where to point the HLS player JavaScript before you start streaming. Choose something without any special % time values. You may also like to enable Overwrite if file exists.
In the Settings Dialog go to Output, set output mode to Advanced and go to the recording tab. Here you set type to "Custom Output (ffmpeg)" and set container format to "hls". Set the file path to a folder on your mapped drive.
One more option that you may wish to change is the Keyframe interval. In video compression, a keyframe is a frame that encodes a complete picture; other frames only encode what has changed since the previous frame. Playback can only start at a keyframe. Lower values reduce latency for viewers but may affect quality/filesize. I found that streaming at 30 frames per seconds with the default of keyframe interval of 250, viewers playback was about 30 seconds behind live, but by changing it to 70 the latency was reduced to about 10 seconds. FFmpeg will start a new HLS segment at the first keyframe after 2 seconds have passed so there is no benefit to setting it lower than your framerate times 2.
You may tune the bitrates as you desire. However, I have found that disabling video altogether doesn't work. In theory HLS supports audio only streams; but OBS doesn't want to do it. If you wish to tweak how the HLS works you may try custom muxer settings; the settings available are documented here: https://www.ffmpeg.org/ffmpeg-formats.html#hls-2 .
Don't change the codecs or it might not work in all web browsers. However, swapping libx264 with a different h264 encoder should be okay (e.g. to use NVIDIA's hardware accelerated nvenc).
How to stream
Counterintuitively, stream using the "Start Recording" button in OBS.
Check the output on your web page. If you have streamed previously with the same filename you will need to press F5 (refresh) in the browser to get the new stream and not just the end of the previous one.
Can I save the recording to view later?
After the stream you can merge all the segments into a single file simply by concatenating them in order. On Linux/Unix:
ls demo*.ts | sort -V | xargs cat > name.ts
The file can be played in VideoLAN; but you might like to convert to a format more widely compatible:
sudo apt install ffmpeg
ffmpeg -i name.ts -bsf:a aac_adtstoasc -acodec copy -vcodec copy name.m4v
(Windows users might like to install Debian or Ubuntu from the Windows store to do this; though there probably is a much simpler way)
Another option to allow playing the full video on the website at least is to edit the .m3u8 playlist and put the complete list of .ts files in it, not just the latest few. This simple script will generate one (assuming fixed segment size of 2 seconds):
ls demo*.ts | sort -V | awk 'BEGIN { print "#EXTM3U"; print "#EXT-X-VERSION:3"; print "#EXT-X-TARGETDURATION:2"; } {print "#EXTINF:2.0,"; print $0} END{print "#EXT-X-ENDLIST"}' > demo.m3u8
(Replace demo with the your filename.)
You can view a replay of my explanatory video using this playlist here, which will playback:
http://thelatinway.co.uk/obs_hls_howto_stream.html
