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 Βι¶ΉΤΌΕΔ strategies, such as . 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 . 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 . 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 graph. This transcodes into a container, using for video and 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 , which also serves the final video stream over HTTP.
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 . A 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' 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 .
The TV viewer issues commands with a standard remote control, with the USB receiver connected to egBox. 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. 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 .