The egBox - R&D's HTML5 Television Prototype
Over the past few months, IRFS have been working on a tool to simulate a TV set-top box using web technologies. The egBox ("example box") allows us to quickly prototype TV-oriented approaches to themes such as authentication, connected TV, companion devices (AKA "second screens") as well as key BBC strategies, such as "One Service, Many Devices". In this post, I will touch upon the motivation behind the project, explain the component technologies that make up the egBox and how they combine for a believable TV simulation. We will encounter video transcoding, HTML5, Pub-Sub messaging and NoSQL document stores along the way.
Much of our work in IRFS involves developing prototypes to test research ideas and user experiences. In the past, we have produced prototypes for web browsers, smart phones and tablets, as well as hybrid radios. In our desire to prototype for the Television, we needed to side-step the traditional set-top box development route and use the open-source web technologies we are most at home with.
In keeping with our rapid-prototyping approach, we considered what egBox's minimum viable feature set would be. The ability to view live TV is essential, as is an authentic remote control for changing channels and volume. We would also require a basic on-screen display. From this base, we would be able to explore more advanced controller devices and second screen interfaces at a later stage.
Inside the egBox
The central component of the egBox is an web server built using Node.js. This serves the Web pages that make up the TV user interface and handles input from a remote control. Node.js was chosen because its low-latency, event driven nature was well suited for dealing with asynchronous user input and multiple processes. The user interface displays a live TV stream in a Web browser, using the HTML5 <video> element.
The live TV feed is picked up from a USB DVB-T tuner, tuned to UK Freeview broadcasts. Using w-scan the DVB signal is scanned for available TV stations. Having selected a station to view, the egBox selects the appropriate DVB multiplex and demuxes the stream. The video and audio streams are extracted and passed through a GStreamer graph. This transcodes into a WebM container, using VP8 for video and Ogg Vorbis for audio. This combination of codecs provides us with a fully open-source HTML5 video stream that is supported natively by many modern browsers. The GStreamer pipeline is monitored by Flumotion, which also serves the final video stream over HTTP.
Redis is used to store both internal state information and TV metadata. Our TV Station data from w-scan is stored here, along with Programme schedules from XMLTV. A cron job is run daily to keep these schedules up to date. We use this data to implement a "now and next" EPG-style display on the TV screen.
Redis' pub/sub features are used to communicate between Node.js and connected server-side components, such as Flumotion. Channels which publish TV metadata are then bridged to the client-side pages using Socket.IO.
The TV viewer issues commands with a standard remote control, with the USB receiver connected to egBox. LIRC handles the key presses and a custom script translates each press as a HTTP request to the server. Using HTTP as a generic input method allows us to experiment with other input devices, such as tablets, using the same API. Each key press event is emitted through the system via Redis.
At this stage, we have a solid foundation of functionality. There is a video stream, supporting metadata and a notification system to send commands and keep state in sync. Now we just need to present this as a television.
An end-point on the Node.js server hosts a HTML page containing the TV stream in a <video> element, with a User Interface overlaid in CSS. Backbone.js is used to structure and manage the User Interface, creating a bridge to the asynchronous programme and channel data from Socket.IO. Remote control key presses regarding volume are routed to this page, where the <video> element's volume attribute can be updated. The UI is intentionally spartan in its features. Current channel, volume and programme information are all that can be displayed at this stage.
This concludes our overview of egBox in its alpha state. From this basis, we have already made progress prototyping in the area of TV Authentication.