HLS Server set up

Posted by On 9月 24, 2017 0 Comment

HLS

Http Live Streaming is streaming technology with http by Apple.
To realize streaming environment, we need to use streaming protocol(RTMP etc…) and special server.
It cost a lot and preparation is also complicated.

Ref

Technology details are Apple Developer
Good explanation (Japanese) HTTP Live Streamingで動画を配信してみる

Support

HLS is from Apple, iOS and Mac OS Safari supports. iOS native app is also supported.
Android and Windows Edge support HLS but, Chrome does not support(2017/09/24) by default.

But using video.js, chrome browser can support HLS.
To use HLS, we can support Streaming easily.

HLS conversion

To use HLS, we have to convert not hls file to hls support file.
The easy way is to convert mp4 file to hls.
MP4 is container format. MP4 uses H.264, MPEG-4, MPEG-2 as video codec,
AAC, MP3, MPEG-4 for audio codec.

Apple provides tool to convert mp4 to hls.
Donwload from HTTP Live Streaming(HLS)

Install this, you installed following

  • Media Stream Segmenter
  • Media File Segmenter
  • Media Subtitle Segmenter
  • Variant Playlist Creator
  • Media Stream Validator
  • HLS Report
  • ID3 Tag Generator

Commands are following under /usr/local/bin

  • mediastreamsegmenter
  • mediafilesegmenter
  • mediasubtitlesegmenter
  • variantplaylistcreator
  • mediastreamvalidator
  • hlsreport.py
  • id3taggenerator

Sample Video

There is a good example from Apple Website.
And Sample Videos provides good sample for test.

Download one of them and convert using mediafilesegmenter

Format Check
Before starting, we can check format

mediafilesegmenter -V <filename>

Convert

mediafilesegmenter -f <dirname> -i <m3u8filename>.m3u8 -B <tsfile-prefix> <filename>

dirname : Output directory
m3u8filename : m3u8 filename
tsfile-prefix : Output ts file name prefix
filename : Target file

Apache Set Up

To provide HLS streaming video, we need some set up for Apache.

Env

In this time, I use apache in Mac.

We need to add mime type to handle m3u8, and ts.
Mac apache has mime.types file under /etc/apache2

video/mp2t					ts
application/vnd.apple.mpegurl			m3u8
application/x-mpegurl				m3u8

Copy hls files into apache document root.
File location

/Library/WebServer/Documents
|- video.html          : This is for iOS and Mac
|- videochrome.html    : This is for Chrome
|- videos
|   |- iframe_index.m3u8
|   |- sample.m3u8
|   |- media-0.ts
|   |- media-x.ts

Source code

Show video using HTML video tag.
For Safari, it’s simple
video.html

<!DOCTYPE html>
<div>
	<h2>HTTP Live Streming</h2>
	<video src="./videos/sample.m3u8" controls></video>
</div>
</html>

To support Chrome and other browser, use video.js.
videochrome.html

<!DOCTYPE html>
<head>
<link href="http://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<div>
	<h2>HTTP Live Streming</h2>
	<video class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
	<source src="./videos/sample.m3u8" type="application/x-mpegURL">
	</video>
</div>
</html>

Next time, I will try Simple Native Player to use HLS.

TOPICS