Introduction
Beginning with LIR V3.0, LMR V4.3 and LCR V7.4, the Liberty Recorder supports streaming of the audio/video data using HTML5 with MSE and HLS technologies.
MSE is an acronym for Media Source Extensions. MSE defines an HTML5 stream format for audio/video data that can be sent to a browser. The Liberty Recorder programs encode an H.264+ACC stream into a sequence of small files, according to MSE specifications and writes these files into a folder on the recording PC. Custom Javascript code (provided with the Recorder) imbedded into a webpage and implemented thru IIS or a suitable webserver, monitors the folder receiving the stream-files and presents the audio/video stream to users accessing the webpage. Alternatively, the stream-folder on the recording PC may be monitored by an automated program, and the streamed files may be automatically copied (ftp, MSN or other) to a folder on a server where a similar webpage can make the media available to the users.
HLS is an acronym for HTTP Live Streaming. HLS defines a stream format for audio/video data that can be used on iOS devices from Apple Inc. Similar to MSE, the Liberty programs encode a sequence of small files according to the HLS protocol and writes these small files into a folder on the recording PC. Again, Javascript code imbedded into a webpage implemented thru IIS or a suitable webserver, monitors the folder receiving the stream-files and presents the audio/video stream to users accessing the webpage. Alternatively, the stream-folder on the recording PC may be monitored by an automated program, and the streamed files may be automatically copied (ftp, MSN or other) to a folder on a server where a similar webpage can make the media available to the users.
Some client platforms (Windows, Android, iOS and so on) and some browsers can only support MSE, or only HLS, or some may support both, or sometimes neither of the technologies. Javascript code in the web page tries to automatically select and use the correct, supported technology. If neither MSE nor HLS is supported, the user must try and make use of another browser. Reviewing the most popular modern browsers only Microsoft Explorer on Windows 8 and older does not support MSE and HLS. On Windows 7 and Windows 8 clients can use Firefox, Chrome, Opera or other browsers with the included webpage.
Install and Configure IIS to send the HLS and or MSE Streams to a Webpage
The most basic implementation to provide the HLS and MSE streams to a small group of users, is to configure IIS on the recording PC and install the webpage and Javascript code into this IIS server. Alternatively, a folder may be defined on the recording PC and the streaming-files must automatically be copied from that folder, to a folder on a webserver, where the webpage and the appropriate Javascript code must reside. In such a case, the files must be moved from the recording PC to a folder on the webserver computer. The following steps relate to the configuration of IIS on the recording PC. Similar steps must be taken on the webserver, if a separate server is used.
Basic IIS Install and Configuration
Install and activate IIS by going to the Windows “Control Panel -> Programs and Features -> Turn Windows features on or off” and check the checkbox for Internet Information Services. Reboot the PC after changing this setting.
Create Folder Structure
Installation and activation of IIS will have created a directory named:
“C:\inetpub\wwwroot”
Create a subfolder of the “wwwroot” directory called “DcrWebBroadcast”
Create a further subfolder in the “DcrWebBroadcast” directory called “MediaFiles”
You will be provided with a zip folder containing the required custom html pages and Javascript code. Extract these files into the “DcrWebBroadcast” directory.
At minimum, the “DcrWebBroadcast” directory must contain the following files:
“C:\inetpub\wwwroot\DcrWebBroadcast\DcrBroadcast.js”
“C:\inetpub\wwwroot\DcrWebBroadcast\DcrLiveList.htm”
“C:\inetpub\wwwroot\DcrWebBroadcast\DcrLivePlayer.htm”
“C:\inetpub\wwwroot\DcrWebBroadcast\DcrBaseScripts.js”
“C:\inetpub\wwwroot\DcrWebBroadcast\DcrStyles.css”
Add the Required MIME Settings, if not Already Configured
If they do not already exist, add the following MIME settings in
“Control Panel ->Administrative Tools ->Internet Information Services(IIS) Manager”:
“.m3u8” – “application/x-mpegURL”
“.mp4” – “video/mp4”
“.ts” – “video/MP2T”
Configure the Recorder
In the Liberty “Options -> Broadcast”, Broadcast on Web settings, specify
Folder for Broadcast => “C:\inetpub\wwwroot\DcrWebBroadcast\MediaFiles”
The sub-folder “MediaFiles” must exist and the Recorder program must be provided with read/write/delete access authority to the folder.
The subfolder “MediaFiles” may be used for broadcasting from several rooms or you can create a separate media folder for each room.
Testing the Webpage
Re-boot the PC to initialize all of the components, then start the Liberty Recorder program and begin Broadcasting. You can confirm that Broadcasting is active by the icon in the Recorder’s Status Window.
Open a browser session and go to:
http://127.0.0.1/DcrWebBroadcast/DcrLiveList.htm
Further Testing
The first page is a very basic webpage that should contain links to the pages for each room being streamed. Choose a room to test and click on that room. Click the Play button to begin playback, and the Stop button to stop the stream.
If two or more streams, from different video cameras, are available on the page simultaneously, then one of them will play in the larger window, and other streams in the smaller windows. You can click on any stream window to make this stream the larger window.
If MSE is used, you can select the radio button for “One” or “All”. If “All” is selected, then all the streams will play simultaneously. If “One” is selected, then only one stream will play. The other stream windows will be gray and you can switch between streams by clicking the desired stream window. This mode should be used if your mobile phone or tablet computer is not capable of simultaneously playing all of the streams at once. If only one stream is played, or if HLS is used, the One/All state settings do not affect playback. HLS always only plays one stream and the other windows show static pictures.
If you encounter a problem during playback, click the Refresh button to try and restore the playback stream(s).
Customization
The default webpages are very basic and have a minimalist view. The basic html should be updated by the end-user as desired. The html files include the following files:
- DcrLiveList.htm is the homepage with the list of rooms. It must be changed to add all of the rooms and provide a custom first page. If only one room is being broadcast, then this page is not required and you can use a direct link to DcrLivePlayer.htm, with parameters as in DcrLiveList.htm.
- DcrLivePlayer.htm is the page to view the broadcast from the room. The only changes to this page should relate to the basic html user to control the text on the page and to improve the “look” of the page.
- DcrStyles.css is a table of common styles for the previous two pages. It can be changed by the user only to improve the visual look of the pages.
- DcrBaseScripts.js contains common Javascript functions. This file must not be modified.
- DcrBroadcast.js contains Javascript code. This file must not be modified.