Last 12 months, I wrote about creating a video streaming server with Linux. That undertaking makes use of the Real-Time Messaging Protocol (RMTP), Nginx internet server, Open Broadcast Studio (OBS), and VLC media participant.
Get began with Video.js
This undertaking relies off of the video streaming undertaking I wrote about final 12 months. Since that undertaking was set to serve RMTP streams, to make use of Video.js, you will must make some changes to that Nginx configuration. HTTP Live Streaming (HLS) is a extensively used protocol developed by Apple that can serve your stream higher to a large number of units. HLS will take your stream, break it into chunks, and serve it by way of a specialised playlist. This permits for a extra fault-tolerant stream that may play on extra units.
First, create a listing that can home the HLS stream and provides Nginx permission to write down to it:
chown www:www /mnt/hls
Next, fireplace up your textual content editor, open the Nginx.conf file, and add the next below the utility stay part:
Take notice of the HLS fragment and playlist size settings. You might need to alter them later, relying in your streaming wants, however this can be a good baseline to start out with. Next, we have to be certain that Nginx is ready to hear for requests from our participant and perceive easy methods to current it to the person. So, we’ll need to add a brand new part on the backside of our nginx.conf file.
Visit Video.js’s Getting started web page to obtain the most recent launch and take a look at the discharge notes. Also on that web page, Video.js has a terrific introductory template you should utilize to create a really fundamental internet participant. I will break down the vital bits of that template and insert the items it’s essential to get your new HTML participant to make use of your stream.
The head hyperlinks within the Video.js library from a content-delivery community (CDN). You also can decide to obtain and retailer Video.js domestically in your internet server in order for you.
<!-- If you'd prefer to help IE8 (for Video.js variations previous to v7) -->
Now to the true meat of the participant. The physique part units the parameters of how the video participant will likely be displayed. Within the video aspect, it’s essential to outline the properties of your participant. How huge would you like it to be? Do you need it to have a poster (i.e., a thumbnail)? Does it want any particular participant controls? This instance defines a easy 600×600 pixel participant with an applicable (to me) thumbnail that includes Beastie (the BSD Demon) and Tux (the Linux penguin).
Now that you’ve got set the way you need your participant to look, it’s essential to inform it what to play. Video.js can deal with numerous completely different codecs, together with HLS streams.
<supply src="http://MY-WEB-SERVER:8080/hls/STREAM-KEY.m3u8" kind="application/x-mpegURL" />
internet browser that
<a href="https://videojs.com/html5-video-support/" goal="_blank"
>helps HTML5 video</a
Record your streams
Keeping a duplicate of your streams is tremendous simple. Just add the next on the backside of your utility stay part within the nginx.conf file:
# Enable stream recording
Make certain that record_path exists and that Nginx has permissions to write down to it:
chown -R www:www /mnt/recordings
Down the stream
That’s it! You ought to now have a spiffy new HTML5-friendly stay video participant. There are a number of nice sources on the market on easy methods to increase all of your video-making adventures. If you might have any questions or strategies, be happy to succeed in out to me on Twitter or depart a remark under.