DASH Tutorial – #2 Display DASH Stream

DASH Tutorial – #2 Display DASH Stream
on Dash, Technology by

This is the second part of the tutorial on how to work with DASH-Streams. For more information about how to create and encode content for DASH, look at the first part of the tutorial here.

In this part, we will look at different video players that can display DASH content. We will only focus on web-players and not applications like VLC. The video players I will discuss are the following:

  • dash.js
  • Shaka-Player

Tutorial overview

You can find a complete overview of the tutorial with all the resources and examples mentioned in the posts here: http://halcyon.ch/halcyon_dash/

dash.js

Introduction to dash.js

This is a very basic video player and doesn’t require a lot of time to set up. With this player, we simply want to test if the stream we created in the first part of the tutorial works. You can find the GitHub repository here: https://github.com/Dash-Industry-Forum/dash.js/

(more…)

DASH Tutorial – #1 Getting started with DASH

DASH Tutorial – #1 Getting started with DASH
on Dash, Technology by

I recently read about DASH (Dynamic Adaptive Streaming over HTTP) and an implementation of this standard in a video player from google here. If you haven’t heard of DASH before, check out this intro video (until 1:31). So I made it my goal for one day to learn as much about it as possible. I came quite far and reached the goal I set myself for this one day. It turned out, that even though it’s widely used, there is little documentation for real beginners. This is one thing that I want to change with my posts.I will now try and explain how you can get a good start into the DASH-Environment. As there is so much to talk about, I had to split my small guide/tutorial/howto into two parts:

Tutorial overview

You can find a complete overview of the tutorial with all the resources and examples mentioned in the posts here: http://halcyon.ch/halcyon_dash/

#1 – Get started with DASH [LINK]
In this part of the tutorial, we take a closer look at what DASH is and how we work with it. We then will mainly set up the DASH environment. We also take a look on how to install MP4Box and x264. We then encode our first video to the DASH-Format and make it available as a stream.

#2 – Display a DASH stream (Shaka-Player) [LINK]
In the second part, we will take a closer look on how we can access these streams. We will do this with the dart.js and the Shaka-Player.

Introduction

Summarized, the DASH standard gives the opportunity that the client can switch automatically between the representation of the video. So the client can easily switch between the codec and the language for example. This is as mentioned in the video above very important when you don’t have a stable data connection so. So the quality and the codec of the video can be dynamically changed by the client (the video player). For this to work you have to encode the content in different resolutions and bitrates.

bbb_screengrab

An example of a DASH Stream. (Frame from the Youtube-Video mentioned above)

The documentation gives the following examples for resolutions and bitrates:

  • 1920×1080, 5.0 Mbit/s
  • 1920×1080, 3.0 Mbit/s
  • 1280×720, 2.0 Mbit/s
  • 1280×720, 1.0 Mbit/s
  • 854×480, 750 kbit/s
  • 640×360, 350 kbit/s

To encode your content in these different resolutions and bitrate you can use DASHEncoder or x256 (ffmpeg). To make your content ready to stream, you then have to generate a DASH manifest and the actual segments. You could use the DASHEncoder for that as well, but I’m going to use MP4Box in this tutorial.

If you think, that you already heard of such a standard, you’re not wrong. Last year Apple announced that their approach for this problem is Apple HLS. This is already implemented in the modern web browsers like Chrome, Microsoft Edge or Safari.

The goal of this two-part tutorial will be different video players that handle our own DASH-Stream. (more…)

Compile and install GPAC/MP4Box on Mac [Updated 2017]

Compile and install GPAC/MP4Box on Mac [Updated 2017]
on Dash by

This is a small step-by-step guide on how to download, compile and install GPAC and especially MP4Box on a Mac environment. I suppose most of it could be done with Linux in a very similar manner. There is an official guide for this, and it helped me quite a lot, but it was missing some (for me) crucial steps. That’s why I’m summarizing my steps I did to install GPAC.

#1 Clone GitHub

You can find the GPAC repository here: https://github.com/gpac/gpac

Create a new folder locally and then clone the repo normally:

git clone https://github.com/gpac/gpac.git

#2 Installing GPAC extra libs

Now it starts to get very interesting. You need some additional libraries so that GPAC works properly. To get them they use MacPorts in the official guide for this. If you haven’t installed MacPorts yet (as me) then you need to follow the steps on the MacPorts page here. I can only recommend using the package installer because that’s way easier than the other way (with Xcode etc.). But your choice.

If you have already installed MacPorts

If you have updated your operating system since you’ve last used MacPorts, then it is very likely that you have to update MacPorts again. You will get messages like:

Error: Current platform "darwin 15" does not match expected platform "darwin 14"
Error: If you upgraded your OS, please follow the migration instructions: https://trac.macports.org/wiki/Migration
OS platform mismatch
    while executing
"mportinit ui_options global_options global_variations"
Error: /opt/local/bin/port: Failed to initialize MacPorts, OS platform mismatch

Just go to the install page and get your appropriate “macOS Package (.pkg) Installer” from there. Then install it and continue with the following steps,

When you successfully installed MacPorts you then update MacPorts itself with:

sudo port -v selfupdate

After that, you can install all the libraries needed for GPAC via MacPorts:

sudo port install pkgconfig freetype libpng jpeg spidermonkey185 libsdl ffmpeg faad2 libmad xvid libogg libvorbis libtheora a52dec openjpeg

If you get the warnings about not having installed the Xcode Command Line Tools:

Warning: The Xcode Command Line Tools don't appear to be installed; most ports will likely fail to build.
Warning: Install them by running `xcode-select --install'.

Then just do as told and run

xcode-select --install

Error: Port libsdl-devel not found

This was an error that occurred while trying to install “libsdl-devel”. This library simply isn’t available anymore. But that’s no problem, as this was the development version anyway. Just use “libsdl” instead.

For my installation, I skipped the steps Setting up UPnP (Optional) and Setting up OpenSVCDecoder (Optional).

#3 Compile/Build the code

To configure the installation use the following command:

./configure

Then you can build GPAC with the normal make command:

make

The build process should work without problems now.

#4 Install GPAC/MP4Box

Now after the build was successful, you have two options to install GPAC. You can create a DMG-file or install it directly with:

sudo make install

Even though I made this and restarted everything MP4Box wasn’t still working and I had to manually copy the files to the system. I used the following commands for that:

cd bin/gcc/
cp libgpac.dylib /usr/local/lib/
cp libgpac.dylib /usr/local/include/
cp MP4Box /usr/local/bin/

After that MP4Box should work properly:

MP4Box -version
android-square-progressbar v.1.6.0

android-square-progressbar v.1.6.0
on Android, square-progressbar, Technology by

After I got some feedback and new ideas from the GitHub repository, I implemented the following features for the 1.6.0 build. Additionally, I finally rewrote most of the logic of the SquareProgressBar drawing method. Together with a new icon and some changes to the UI, I just released the new major version 1.6.0. Get it via gradle:

dependencies {
    compile 'ch.halcyon:squareprogressbar:1.6.0'
}

indeterminate feature

Suggested on GitHub (issue #26) was an indeterminate ProgressBar that always runs around the image to visualise a progress for which we don’t know the final duration or the current progress. You still can customise the SquareProgressBar with colours, size, opacity and so on. All these settings still work with this indeterminate ProgressBar. To activate this, simply set the following flag on the SquareProgressBar :

squareProgressBar.setIndeterminate(true)

After this is set the SquareProgressBar will behave like shown in the following video:

 

center line featureCENTER-LINE

This is a very small addition to the style settings. It simply displays a small line in the middle of the path that the SquareProgressBar has to go. You can simply set this via the following line of code:

squareProgressBar.drawCenterline(true)

You can see an example of the center line setting on the right side.

getImageView

Another request (issue #34) was to provide a getter method for the ImageView. There are android-libraries that need the ImageView to do some async loading of the images or something else. So this is available now as well on the SquareProgressBar class:

/**
* Returns the {@link ImageView} that the progress gets drawn around.
*
* @return the main ImageView
* @since 1.6.0
*/
public ImageView getImageView(){
    return imageView;
}

small changes

There are also some smaller changes to the UI. For example, there is a new image that is considerably bigger than the others in the example application. But this isn’t shown in the application anymore because the bug where the big images make the SquareProgressBar behave strangely is finally resolved. I already fixed part of the problem back in 2014, but I recently came across the right XML-setting to remove the blank spaces around an ImageView, when the Image is wider than the screen of the phone. You can see the change here commit: 513b45b. The trick was to add the following line to the XML:

android:adjustViewBounds="true"

Future changes

One thing that I want to make much simpler in the next version is the usability of text in the SquareProgressBar. I already have a good idea on how I want to achieve that, but that has to wait until I finished some other projects.

You can find the repository on GitHub as usual: android-square-progressbar

The library is available on Bintray: squareprogressbar

Categories

My apps

Recent Comments

Archives