Apple HTTP Live Streaming is a widely used technology for delivering video to mobile devices, which relies on simplicity, versatility and throughput. The delivery protocol uses the simplest, most accessible and proven HTTP Internet protocol, which allows you to deliver video to almost any device or software on the network.

Below, the alternative is considered under the cat - Websocket Streaming for iOS Safari and describes the testing process in detail.
')
Winning versatility, HLS technology is inferior in speed of video delivery and display. The video stream is divided into fragments (chunks), which are downloaded via HTTP as regular files, buffered and collected in a video on the player side. The main disadvantage is a large delay in video playback - 5 seconds or more.

If you have a video surveillance system or playback of a pre-recorded video, 5-10 seconds delay is not important for you. For example, if the video shows a parking lot where nothing happens, then 10 seconds doesn’t matter, except to see the same picture 10 seconds later.

Similarly with pre-recorded video: 10 seconds of buffering will not affect anything.

Another thing is when an event is broadcast in real time, for example, a webinar, where the presenter receives questions from the audience and answers them. Here an additional delay can cause some discomfort.



Here’s what the HLS player on iOS Safari looks like:



The video takes up the entire screen and there is no way to prevent this. HLS player runs separately from the browser, and it plays the video stream. Such a display is quite convenient for watching videos - turned on and watch.

Disadvantages arise when some interactivity is required from a web application. The following requirements may apply to such applications:

• video playback directly on the HTML page in the browser;
• Other elements can be placed on the same page, for example, chat.

Basically, such web-applications include webinars, video chats and broadcasts with the possibility of simultaneous discussion in the chat (for example, a sports event).

At first glance, the simplest solution is to make an iOS application for such a task, for example, broadcast + chat and send users to download the application. However, as practice shows, not all users love / know how to do additional gestures: go to the App Store, perplex security settings, download the app, launch it, and finally watch the broadcast. In this case, the way “click on the link in Safari” - “viewing the broadcast right in the browser” looks much simpler and shorter.

So, we have two requirements for iOS Safari:

1. the video should be played with minimal delay;
2. the video should be played directly in the browser using HTML5.

The best solution would be to support technology WebRTC. Indeed, the use of technology WebRTC would solve the problem of delay and allow the stream to play directly in the browser as it works, for example, in Android Chrome. Unfortunately, there is no WebRTC support in iOS Safari and the prospects for such support are currently very vague.

As usual, when there is no support from the official manufacturer, there are alternatives
one of which is video delivery to iOS Safari using the Websockets protocol and drawing this video stream by browser means.

Websockets - in this case, the only protocol available in iOS Safari that can provide fast video stream delivery. The protocol works on the basis of TCP as well as HTTP, but, unlike the latter, it is much better suited for transferring streaming data due to the fact that binary data is transmitted inside an already established connection and there are no unnecessary HTTP headers during transmission.

In this article, we will compare the classic approach using HLS with broadcasting the same live stream via Websocket on iOS Safari, for this we will configure and test both technologies.

Browser iOS Safari is not chosen by chance. IE and Mac Safari support Flash, Chrome, FF and Opera support WebRTC. And only iOS devices are limited to using HLS, an alternative to which is discussed in this article.

Video streaming via Websocket is called VoW (Video over Websockets), and the player that plays this stream is VoW-Player.

We describe in detail the testing of HLS and VoW, including the installation of all the necessary tools.

HLS - Apple HTTP Live Streaming

Create two droplets

For the purity of the experiment, we use two different virtual servers Centos 6.5 64 bit, 1 GB RAM on digitalocean .



Go to oracle.com, download, unpack and install the JDK

Oracle JDK can be downloaded here .

RPM could also be installed, but simply copying the folder also works.

tar -xvzf jdk-8u45-linux-x64.tar.gz mkdir /usr/java mv jdk1.8.0_45 /usr/java ln -sf /usr/java/jdk1.8.0_45 /usr/java/default ln -sf /usr/java/default/bin/java /usr/bin/java java -version java version "1.8.0_45" Java(TM) SE Runtime Environment (build 1.8.0_45-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.45-b02, mixed mode) 

Swing Wowza

Wowza will receive the RTMP stream and give it as HLS. Download from wowza.com . After that, you will need to get a free developer license .

Install Wowza

The installer will ask for the administrator's login and password, which can later be used to log into the admin area.

 chmod +x WowzaStreamingEngine-4.1.2.tar.bin ./WowzaStreamingEngine-4.1.2.tar.bin 

Run Wowza

The server itself and the administrative interface are started separately.

 service WowzaStreamingEngine start service WowzaStreamingEngineManager start 

Go to the admin interface Wowza

After a successful launch, the admin panel is available on port 8088.
Login and password were set during installation.



Allow connections in live> Incoming Security settings

By default, RTMP-Publishing is allowed only by password. Allowing to publish streams for everyone - option 'no authentication required'. So it will be easier to test, and later we always have time to close access.



Downloading Wirecast Live Encoder

The choice of Wirecast was due to the fact that it encodes sound well in AAC. For example, FMLE (Flash Media Live Encoder) under Windows 8 cannot do this. FMLE for Mac can encode AAC, but Mac was not at hand.

Unfortunately, Wirecast didn’t manage to capture video from a webcam on Windows 8.1 64 bit, so I had to stream the video. Below is a description of the process. At the time of this writing, the version of Wirecast-6.0.4-64-bit was used .

Download sample.mp4 file from WowzaStreamingEngine / content directory on server

A video about a hare in MPEG4 format comes with Wowza. Download it to the computer where Wirecast Encoder is installed.



Open the sample.mp4 file in Wirecast

We add a clip to Wirecast, simply by selecting it in the file system.



We start reproduction sample.mp4 in Wirecast

To put a video on playback, you need to press the button with the image of the right arrow, which is located directly under the hare. See screenshot below.



Configuring Output Settings

Now we set coding settings. With these settings, the video will be recoded and sent to the network via the RTMP protocol.

We code for mobile devices H.264 + AAC, set the resolution to 320x240.



We configure the address of RTMP-sevrera

Here we indicate the address of the droplet on which Wowza is installed. Stream name: myStream.



Start streaming stream

Click the 'Stream' button to start the process of transcoding the video and sending the RTMP stream to the server. A green connection indicator appears in the upper right corner.



Open the admin Wowza in iOS Safari, the live application

If you open the admin panel not in iOS Safari, then when you try to get URLs for playback via HLS, you will get the error 'Your device does not support HLS' or something similar, so go to the admin panel in iOS Safari, select the 'live' application and click the button 'Test Players'.





Click on the HLS-urla and start playing in Apple iPhone Safari

There was no player there, just an HTTP URL from which you can pick up video via HLS. iOS Safari browser opens this URL and enables the internal HLS Player to play the video. We get on HLS video, which stream Wirecast in Live mode.

Note that the playback delay is about 25 seconds. Surely, this can be tyunit somewhere, but out of the box we have what we have.



Thus, we obtain the following HLS broadcast scheme:

The scheme is quite simple: send a clip via RTMP and distribute via HLS.

VoW - Video over Websockets

Install the JDK on the second droplet in the same way as for Wowza

 tar -xvzf jdk-8u45-linux-x64.tar.gz mkdir /usr/java mv jdk1.8.0_45 /usr/java ln -sf /usr/java/jdk1.8.0_45 /usr/java/default ln -sf /usr/java/default/bin/java /usr/bin/java 

Install and configure Web Call Server 4

Download and install WCS4 server

 wget http://flashphoner.com/download-wcs4-server.tar.gz tar -xvzf download-wcs4-server.tar.gz cd FlashphonerWebCallServer-4.0.1212 ./install.sh 

The installer will ask two times the IP address.
You need to specify the IP address of the droplet both times.

An IP address is defined, for example, by the ifconfig command.



In our case, this is 46.101.139.106.

We get a free license and activate it after installation

 cd /usr/local/FlashphonerWebCallServer-4.0.1212/bin ./activation.sh 

Add support for AAC-codec in the settings and RTSP interleave mode

AAC is mpeg4-generic. We add 'Interleave mode' in case the Wowza server has been configured to run RTSP via TCP.

 mc -e /usr/local/FlashphonerWebCallServer/conf/flashphoner.properties 

 codecs =opus,alaw,ulaw,g729,speex16,g722,mpeg4-generic,telephone-event,vp8,h264,flv,h263,h263p,mpv rtsp_interleaved_mode=true 

We start the server

The server runs for quite some time on the virtual machine. We are waiting for 1 minute. Before starting, it is advisable to set the server’s IP address and host name in / etc / hosts. Without this, the launch may be a problem.

 hostname wcs 

 service webcallserver start 

Install and run Apache

Apache will give a page with a test player.

 yum install httpd service httpd start 

Expand the VoW Player example in the web directory

 cd /var/www/html/ wget http://flashphoner.com/download-wcs4-client.tar.gz tar -xvzf download-wcs4-client.tar.gz 

Specify the URL of the connection to the server and the stream to pick up

 mc -e /var/www/html/examples/min/vow-player-min.js 

Connect to the server via Websocket:

 var url = "ws://46.101.139.106:8080"; 

We are taking the stream from Wowza to RTSP:

 var streamName = "rtsp://46.101.139.105:1935/live/myStream"; 

Open the player in iOS Safari

A simple HTML page opens : 46.101.139.106/examples/min/vow-player-min.html

The page has a video display area, two buttons and a display area for current playback statuses.



Begin playback

Click 'Play' to start playback. We see that the internal iOS player is not connected and the video is played directly in the body of the HTML page. The 'Play' and 'Pause' controls, as well as the status block, remain in place.





This is how the video looks, stretched across the screen with your fingers:



If you open the same page in Google Chrome and use the Developer Tools, you can see the HTML5 canvas - the element where the video is drawn.



If you dig deeper and look at the 'Network' tab, you can see a lot of Websocket Binary Frames arriving at high speed — this is the video stream that we see on the HTML5 Canvas element.



Playback delay is completely different from HLS and is only about 3 seconds. The picture is clearly visible. No artifacts. Audio and video play synchronously without visible flaws.

As a result, we have the following broadcast scheme:



It would also be interesting to conduct battery consumption tests. There is reason to believe that the VoW battery sits faster than with normal use of the HLS player, if only because with HLS hardware video decoding is possible, and in the VoW player the video is decoded using JavaScript.

As a result, we will draw a table of differences in data broadcast technologies.



The complexity of setting here refers to the input of an additional link (WCS server) and the VoW Player itself, which accordingly increases the time and complexity of setting up the system.

Below I leave demo-urla with a clip about a hare for those who want to test on their own.

HLS (iOS Safari)

VoW (IOS Safari, Windows Google Chrome)

Uninterrupted work urlov not guarantee.

Special thanks to the hare Big Buck Bunny. Without him such a colorful story would not have come out.