So now that you have that magical UDP stream going, what to do with it? Why not a DASH stream using the HTML5 Shaka Player? DASH is D)umb A)ss S)treaming H)ibbtyjibbty also known as the Hard Drive Killer. Cause you ain’t gunna be doing this on a mechanical drive for very long. Who thought the idea of creating millions of tiny files constantly was a good idea? We totally needed a new wheel worse than the one before it, right? I mean, who wants to install various different media players when you now can install various different browsers. Anyways, on to the show!
This is relatively straight forward with a lot of ambiguity. The path of the stream is as follows; Liquidsoap output MPEGTS via UDP into Shaka Packager. Shaka Packager encapsulates the MPEGTS stream into a DASH stream for playback via a web server and HTML5 clients and other media players that support DASH (such as VLC). You will want to download the Shaka Packager and Shaka Player. This is a bit beyond the scope of this article oh how to get the Shaka Player compiled, but just trudge through it.
Liquidsoap Configuration
First part we need to configure Liquidsoap. This will be a basic configuration with the key parts being the output settings. Most notably and very important is that the Shaka Packager does not support the RTP container so it’s MPEGTS flat out.
set("log.stdout",true)
set("log.level",5)
set("gstreamer.debug_level",2)
set("frame.video.width",512)
set("frame.video.height",384)
set("frame.video.samplerate",25)
set("gstreamer.add_borders", true)
# The input file,
# any format supported by liquidsoap
input = single("/home/user/Videos/Test/video-720x576-25fps.ogv")
#MPEGTS via UDP Streaming (Shaka Packager doesn't support RTP container).
output.gstreamer.audio_video(
video_pipeline=
"videoconvert ! x264enc pass=qual quantizer=20 tune=zerolatency ! video/x-h264,profile=baseline ! queue ! muxer.",
audio_pipeline=
"audioconvert ! fdkaacenc bitrate=128000 ! queue ! muxer.",
pipeline=
"mpegtsmux alignment=7 name=muxer ! queue ! udpsink host=127.0.0.1 port=5000 sync=true",
mksafe(input))
The Shaka Packager doesn’t support MPEGTS in RTP via UDP. If you encapsulate your MPEGTS stream via RTP you will get this error from packager.
[0522/093109:INFO:demuxer.cc(89)] Demuxer::Run() on file 'udp://127.0.0.1:5000?interface=127.0.0.1'.
[0522/093109:INFO:demuxer.cc(161)] Initialize Demuxer for file 'udp://127.0.0.1:5000?interface=127.0.0.1'.
[0522/093116:ERROR:demuxer.cc(207)] Not implemented reached in shaka::Status shaka::media::Demuxer::InitializeParser()
[0522/093116:ERROR:packager_main.cc(477)] Packaging Error: 4 (UNIMPLEMENTED): Container not supported.
Shaka Packager
The Shaka Packager is just a fairly simple program. I just downloaded the binaries and put them in my /home/user/bin/.
In this scenario and since we are using UDP as the transport, the Shaka Packager will need to be started first and listening for the MPEGTS stream packets BEFORE Liquidsoap starts. This is an important and key step in this.
For this example we will start the Shaka Packager program in the root web directory of our website the DASH manifest and media files will be created in this directory.
[/var/www/html/]$packager \
'in=udp://127.0.0.1:5000interface=127.0.0.1,stream=audio,init_segment=audio_init.mp4,segment_template=audio_$Number$.m4s' \ 'in=udp://127.0.0.1:5000interface=127.0.0.1,stream=video,init_segment=h264_384p_init.mp4,segment_template=h264_384p_$Number$.m4s' \
--mpd_output h264.mpd
The Shaka Packager is fairly straight forward. Since the Audio and Video is in a single stream we call both streams for our audio and video. It will create all the necessary media files and the MPD manifest file in the current directory. Once Shaka Packager is running it will just print out that it’s initialized the demuxer for input from the UDP stream. It is now time to start Liquidsoap.
Once you start Liquidsoap, the Shaka Packager doesn’t announce anything so it is difficult to know that it is working. With this current setup after about a minute or two the Shaka Packager will spit an error similar to this.
[0522/095415:WARNING:representation.cc(384)] Found a gap of size 343 > kRoundingErrorGrace (5). The new segment starts at 324900702 but the previous segment ends at 324900359.
If you get this error then you know it’s working. As long as the gap size doesn’t grow the stream should be good.
Shaka Player
So now that you got the stream files all going, you could point VLC to the http://localhost/h264.mpd file and VLC should be happy to play the DASH stream. But now onto the Shaka Player. It is beyond the scope of me to tell you how to install it. But I feel you.
Following the basic guide for the Shaka Player, just copy the shaka-player.compiled.js script into the same directory as the media files. Then create a simple index.html file.
<!DOCTYPE html>
<html>
<head>
<!-- Shaka Player compiled library: -->
<script src="shaka-player.compiled.js"></script>
<!-- Your application source: -->
<script src="myapp.js"></script>
</head>
<body>
<video id="video" width="640" poster="//shaka-player-demo.appspot.com/assets/poster.jpg" controls autoplay></video>
</body>
</html>
Then you will want to create the myapp.js file which is essentially a kind of configuration and initialization file for the Shaka Player. This is the file that points to the DASH manifest (MPD) file that the Packager has created.
// myapp.js
var manifestUri = '//localhost/h264.mpd';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
// Create a Player instance.
var video = document.getElementById('video');
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
}).catch(onError); // onError is executed if the asynchronous load fails.
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
You should now have a functioning DASH stream with Liquidsoap. This is a basic example and can be expanded on with enough CPU resources and x264 hardware encoding via GStreamer. The idea of DASH is to have multiple bit rates at various frame sizes so that you can cover a wide variety of client types and connectivity. I haven’t tested this out, but you could start with a larger frame size setting in Liquidsoap then create multiple video outputs with the various frame sizes. You will only need one audio output.
Have fun!
