How to use HolaCDN to load share from multiCDN

In my previous post I showed how to use HolaCDN to improve the performance of a mp4 video which is already accelerated using CDN service.

This time I would like to show how to use HolaCDN MultiCDN feature to improve the performance of a multi-birate HLS video. HolaCDN MultiCDN will automatically measure performance of multiples CDNs (defined by user) and select the optimal CDN to use.

In this demo, HolaCDN will select among the customer origin, a 3rd party CDN and HolaCDN.

In the screen capture below, Chrome Developer Tools shows the HolaCDN JS client loads video chunks from serveral hosts: s3video.cheungwaikin.com (customer origin), dc7tqspqe5l18.cloudfront.net (a 3rd party CDN) and 76.73.18.98 (a HolaCDN server).

chrome-network

The following picture shows the result generated by the command hola_cdn.get_stats() in the Chrome Develop Tools Console: 20% of traffic is from the customer origin, 18% from the 3rd party CDN, and the remaining is from HolaCDN.

chrome-console.png

How to set up HolaCDN MultCDN feature in this demo?
Step 1: create a new Zone named “hlsmulti” by defining the Page URL as http://aws.cheungwaikin.com/video-hls-flowplayer-cloudfront-hola-origin.html.

Step 2: in the MultiCDN selection algorithm, I input the $0.5 as the cost of HolaCDN and $0.05 as the cost of “My existing CDN”. Doing so to instruct HolaCDN to use My existing CDN unless HolaCDN improve performance (better video start/seek time, less buffering, higher video quality/bitrate).

Step 3: for demo purpose, HolaCDN will take actions – collects QoE statistics and deliver video content – if the user is using Chrome browser. For every 100 pageviews from Chrome users, all will colllect QoE statistics, and HolaCDN will try to deliver video content in 90 pageviews.

Step 4: define “My existing CDN”. In this demo, the are two “CDNs” – dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com.

Step 5: I use Static MultiCDN switching mode. If HolaCDN finds dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com perform better than HolaCDN, then 50% possibility that video will be retrieved from dc7tqspqe5l18.cloudfront.net and 50% possibility that video will be loaded from s3video.cheungwaikin.com.

holacdn-conf.png

That’s all.

In other to do a control experiment, I use Firefox to browse the demo page. Based on my setup, HolaCDN will do nothing and the browser will get all HLS TS chunks from the host defined in the html source code. Here is the result from Firefox + Firebug:

firefox-net.png

Want to try it yourself? Go to apply a HolaCDN free trial account now!

Advertisements

How to use Hola!CDN for MP4 progressive download

Hola is a Spanish word meaning Hello.

Hola! is a startup headquartered in Netanya, Israel. Hola!’s goal is to make the web faster, more open and cheaper to operate.

Hola!CDN is the first CDN purpose built for video. It is developed and operated by Hola!. Hola!CDN makes Internet video delivery Faster, Cheaper and More Reliable.

It is my pleasure to share with readers that I am now working at Hola!CDN!

In my last blogpost I talked my first Israel visit. The main objective of the trip was to attend Hola!CDN training.

The unique Hola!CDN architecture makes it possible to do Five things that other CDNs cannot do:

  1. Significantly speeds up your video delivery (start time, buffering, seek time, bit rate, failure rate)
  2. Provides accurate statistics on your viewers’ quality of experience
  3. Enables mid stream switching of multiple CDNs (configure Hola!CDN’s dashboard to work with several CDNs, taking each video chunk from the fastest and cheapest)
  4. Reduces video delivery cost substantially, with same low cost from first byte, to anywhere in the world
  5. Keeps your existing CDN – Hola will only participate where its faster and cheaper

The new architecture is comprised of a client side JavaScript code that manages the video delivery from the viewers’ browser. The integration of the Hola!CDN client side module with the Hola!CDN server module creates a fast, seamless user experience, and a low cost of delivery.

Detail Hola!CDN implementation guide can found at GitHub:  https://github.com/hola/cdn/blob/master/install.md

In this blogpost I would like to SHOW how to implement Hola!CDN in a webpage with MP4 progressive download.

Step 1: apply a Hola!CDN account account. We offer 14-day free trial account at holacdn.com

Step 2: configure Hola!CDN service. The minimum step is to add your Video Source(s). Video Source is the hostname of the CDN or customer origin that your video is cached/stored.

Hola!CDN customer portal

Hola!CDN customer portal

Step 3:  insert the codes in the header section to instruct the browser to downland the Hola!CDN JavaScript client with your specific configuration, and insert another codes at the end of the body section to instruct the browser to download the Hola!CDN JavaScript client asynchronously

HTML codes to implement Hola!CDN

HTML codes to implement Hola!CDN

Three steps. That’s all. No DNS change is required!

 

Below is the screen shot of Chrome DevTools of the original page:

Chrom DevTools of original page

Chrome DevTools of original page

This is the screen shot of Chrome DevTools of the page implemented Hola!CDN:

Chrome DevTools of the page implemented Hola!CDN

Chrome DevTools of the page implemented Hola!CDN

There are 6 HTTP requests in the original page and 65 in the page implemented Hola!CDN. Why?

Let’s talk more next time.


Hi Year of Monkey! Hi MSE!

Gong Xi Fa Cai! Wish everyone has a happy and healthy Year of Monkey.

It is the fifth day of the new Chinese New Year. It is time to write something new.

I am studying Media Source Extensions (MSE) recently. In a nutshell, MSE enables browsers to play streaming media without plugins.

What is MSE?
-W3C: MSE is a W3C specification that allows JavaScript to send byte streams to media codecs within web browsers that support HTML5 video. The first public draft was released in Jan 2013. Among other possible uses, this allows the implementation of client-side prefetching and buffering code for streaming media entirely in JavaScript.

-Microsoft: build custom adaptive streaming solutions using MSE. Such an adaptive streaming solution would look for the optimal bit rate based on network bandwidth and CPU utilisation to provide the highest quality streaming experience. For example, if the network bandwidth drops, you can use MSE to programmatically switch the video stream to a lower bit rate. This reduces the quality of the image, but allows the video to keep playing without interruptions.

-Netflix: This makes it possible for Netflix to download audio and video content from our content delivery networks and feed it into the video tag for playback. Since we can control how to download the audio/video content in our JavaScript code, we can choose the best HTTP server to use for content delivery based on real-time information, and we can implement critical behaviour like failing over to alternate servers in the event of an interruption in content delivery. In addition, this allows us to implement our industry-leading adaptive streaming algorithms (real-time selection of audio/video bitrates based on available bandwidth and other factors) in our JavaScript code. Perhaps best of all, we can iterate on and improve our content delivery and adaptive streaming algorithms in JavaScript as our business needs change and as we continue to experiment.

More and more video providers are moving away from browser plug-ins to MSE. Youtube and BBC are two examples.

Not all browsers are created equal. At the moment Chrome v34 (both desktop Android 4.4+ versions) and IE 11 on Windows 8 are the best browsers supporting MSE.

Safari on iOS does not support MSE.

Maybe I need an Android tablet.

Ref:
HTML5 Video at Netflix | Netflix

The Current State of Media Source Extensions | Wowza

The State of HTML5 Video | JW Player

How to Build a Streaming HTML5 Video Player | streamingmedia.com

PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.


Use VyprVPN to connect to Hong Kong and watch World Cup from overseas

Most of us are busy watching World Cup 2014 this early summer.

TVB gets the sole TV distribution in Hong Kong of this soccer event in Brazil. 22 out of the total 64 games will be available on TV for free. For the other 42 games, Hongkongers either subscribe paid service from TVB or NowTV. Subscribers can watch all the games via TV, computer, smartphone and tablet. The mobile device app myWorldCup is great and provides both live game and goals/goal attempts replay. The app is geo-restricted to be functional for Internet users in Hong Kong only.

I am one of the subscribers and I watch the games mainly on my iPad. It is HD video. I can watch it anywhere, provided my device IP address is a routable IP address in Hong Kong.

The World Cup lasts about one month and it happens that I’m not in Hong Kong sometime during the period. I need a VPN to connect my iPad/iPhone to Hong Kong!

My VPN requirements, in descending order, are:
1.with VPN servers in HK
2.good connection performance
3.with VPN servers in many Asia countries
4.multiple concurrent connections
5.easy to use software

After doing some studies, especially reviews from VPN Creative and BestVPN, I made my short list of VPN providers. I tired to try the VPN services before I purchase because good VPN performance – high speed/capacity and reliability – is not something written on websites but real experience. Finally I subscribed VyprVPN Pro service. My reasons:
-VyprVPN offers free trial and I can try before I buy
-VyprVPN is one of the VPN providers with good VPN server coverage in Hong Kong and Asia.
-VyprVPN connection performance is great. (Will talk more later.)
-VyprVPN price is reasonable. Support multiple connections. The bundled Dump Truck storage is a nice plus!
-VyprVPN interface, both web GUI and PC/mobile app, are very user friendly
-VyprVPN supports both L2TP/IPSEC and OpenVPN protocols

I prefer to use OpenVPN because the VPN connection setup is faster than L2TP/IPSEC. From my experience OpenVPN and L2TP/IPSEC connection speeds are similar. The OpenVPN app provides more information than the VyprVPN app.

Form my viewing experience on iPad and iPhone when I was not in Hong Kong and using VyprVPN, the live videos were HD, smooth, clear and very detail. Below are some screen captures of a live game on iPad:

20140624-161259-58379274.jpg

The live games were streamed via HLS and it was likely that the maximum bitrate was market standard 2Mbps. I found VyprVPN supported more than 2Mbps connectivity between my devices and the Internet in Hong Kong. I used Speedtest with test server in Hong Kong and most of the results were more than 60% of the broadband speeds! Based on the OpenVPN app, there was about 2GB data transmitted via the VPN in two hours, so we have the HLS bitrate at 2GB/2hr = (2048*8Mb)/(2*60*60sec) = 2.28Mbps.

20140624-161403-58443472.jpg

It is explicitly listed on the VyprVPN official website that multiple concurrent connections are supported. VPN software is available on most common platforms. The support page is written very clearly and it is very easy to follow the instructions to set up OpenVPN. All this well written information make me find that VyprVPN provides good services and customer supports.

Good companies help their customers to do businesses with them and use their products/services.

Cheers! Enjoy the World Cup!

Remarks:
a.OpenVPN is an SSL VPN implementation and is not compatible with IPSec, L2TP, or PPTP. See OpenVPN.net.
b.The iOS OpenVPN client uses PolarSSL and is not vulnerable to the Heartbleed OpenSSL bug.
c.VyprVPN users are safe from Heartbleed bug.
d.[update] It is a surprise to me that I received a thank you email from VyprVPN after a few hours this blogpost was published! Anyone who read this blogpost can get a 50% discount for the first month from VyprVPN by clicking the banner below! Cool!!


CDN video: HLS performance measurement

HTTP Live Streaming

The recent Devoncroft’s 2013 Big Broadcast Survey (BBS) shows multi-platform content delivery is the most important trend considered by the broadcast industry. It is not a surprising news when we review how much time we spend viewing videos on non-TV devices.

Video streaming on iOS devices is supported by HLS (HTTP Live Streaming). HLS democratises video streaming: everyone can now easily stream adaptive bit-rate videos to iOS devices by using a low cost HTTP servers.

In comparison, it is much more challenging to stream videos to other mobile platforms. Here is a good reference article from LongTail: The Pain of Live Streaming on Android

We can easily stream videos to iOS devices. How do we measure the video performance? How do we validate HLS videos delivered from CDN are much better than those from customer origin? Which adaptive bit-rate video stream in my demo page – HLS Performance Measurement – provides better experience?

HLS Performance Measurement by PocketProbe

Rather than subjective measurement by our eyes (目測法), PocketProbe Free from Bridge Technologies provides an objective measurement of HLS video experience.

PocketProbe

I did some PocketProbe tests around 12:30pm 20130626 HKT. Left is the test result of stream from customer origin (CO) and right is from CDN respectively.

PocketProbe test results

Analysis:
1.CDN stream was delivered more frequently at higher speed than the CO stream.
2.CDN stream was retrieved much faster than CO stream.
3.CDN stream was delivered constantly at the highest bit-rate while CO stream switched to lower bit-rates during the delivery.

We can SEE the CDN stream picture resolution and quality are better too.

iOS a great platform for video streaming. PocketProbe is a cool app for video streaming performance measurement.

Easy. Low cost.


EdgeCast Live Video Streaming

CDN video: Live Streaming

TV Live video streaming, I finally cracked it!

Video delivery is a big use case of CDN. Especially for live video, because for live video a huge number, abnormal from the normal level, of viewers are expected to watch it at the SAME time. It is not likely that a typical company will over-provision its own system capacity to handle this kind of abnormal and non-frequent high traffic volume, unless it is a CDN.

My partners ask me a lot of questions about EdgeCast video streaming solution for live event. I tested/demonstrated it many times, but I did not set up a demo page for it. Why? It is because I didn’t have good live video source! What I have is a MacBook Air, iPhone and iPad. Only MBA can take a video encoder role. Capturing myself by the MBA FaceTime camera and streaming “I’m typing on my notebook” in live is not something I find very interesting and attractive. It is like a still picture rather than live video!

A partner asked me again about live streaming solution last week. It is too costly to explain to each partner one-by-one and set up an ad-hoc demo on-demand every time. It is much more effective and efficient to support my partners if there is a demo page. I always think this way. And finally I make it this time.

What about the live video source?

Well, every tomorrow is a better day. I found last weekend a new, great and free iOS app – OS Broadcaster by Olobon Soft – a video and audio encoder. It turns the iDevice into a mobile video encoder!

I can send live video, via RTMP, from OS Broadcaster to EdgeCast publishing points and then EdgeCast streaming services send the video instantaneously to users all over the world. I find myself become a (potential) TV channel which can provide live videos to thousand of thousand of people! I can share, anywhere and anytime, with the audiences interesting things around me, esp. those in HK, in the most entertaining format – video!

I found yesterday another great and free software – CamTwist for Mac – which can capturing things on desktop and become a video source for Adobe Media Live Encoder. With these tools I can now live stream anything on my screen (such as youtube content, TED talks or my own videos) through EdgeCast CDN to people anywhere who have PCs via RTMP and iDevices via HLS.

How to Stream Your Mac Desktop Live is a great tutorial on youtube showing how to use CamTwist as well as other great tools!

To see is to believe.

Please try yourself: 16th demo – CDN video: Live Streaming

The Journey is the Reward.