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.
I used VLC to play our video stream, which could also be positive for a small native deployment however is not very sensible on a big scale. First, your viewers have to make use of VLC, and RTMP streams can present inconsistent playback. This is the place Video.js comes into play! Video.js is an open supply JavaScript framework for creating customized HTML5 video gamers. Video.js is extremely highly effective, and it is utilized by a bunch of very talked-about web sites—largely because of its open nature and the way simple it’s to rise up and operating.
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:
mkdir /mnt/hls
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:
utility stay
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.
server
hear 8080;location /
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) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
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).
<physique>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="600"
top="600"
poster="BEASTIE-TUX.jpg"
data-setup=""
>
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" />
<p class="vjs-no-js">
To view this video please allow JavaScript, and contemplate upgrading to a
internet browser that
<a href="https://videojs.com/html5-video-support/" goal="_blank"
>helps HTML5 video</a
>
</p>
</video>
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
document all;
record_path /mnt/recordings/;
record_unique on;
Make certain that record_path exists and that Nginx has permissions to write down to it:
chown -R www:www /mnt/recordingsDown 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.
