If you have ever seen the video overlay linear TV channels use to promote other program, mostly series and wanted to do that for yourself?
Everyone who has been reading my blog about writing a Tivo remote control Tivo Remote (sorry, that particular blog is written in Swedish) might have heard my view on linear tv and my prediction that linear will have plenty of years to come. Based on that I’ve decided to investigate how the linear experience could be enhanced.
I had a simple goal in mind – Be able to watch linear tv in the same manner I watch OTT services.
Today all linear services are digital, and everything is written in software. However none of the TV receivers (top set boxes etc.) are user friendly, including tivo and others. The user experience is very “laggy” and quickly changing between two channels is not as quick as analogue TV was. Of course there are some reasons behind that, firstly MPEG based encoding requires some time to build a complete image and rendering GUI on a top set box that does not have advanced hardware decoding/encoding will make things slow.
Beating Tivo
Being able to switch channels quickly based on what’s showing currently and what’s next was archived with my Remote Control web application. I never touch my remote as my “companion” app gives me all the benefits over the regular remote and GUI.
The next task would be to get recommendations on what’s on next to make sure I don’t miss any of my favourite shows. This would be easiest translated into Tivo’s recommendation engine. However Tivo’s main feature is to record a lot of stuff and hope that you like once of them. Tivo does not give you hints about upcoming linear shows at all.
Write our own stuff
As always when your not happy with status quo you just need to get your hands dirty. This hack has been possible thanks to the NeTV board that allows for passthrought of a HDMI signal (in/out) with the benefit of overlaying a web browser for example. The included application is quite nice, allows you to place a “ticker” on the screen showing your latest twitter flow or your latest SMS messages. However I’m only using the web browser.
The web browser can be called with an API call that loads an URL of your choosing. For my example this would be perfect as it allows be to build my code using HTML instead of having to write Flash (Natively build into NeTV).
Instead of just showing a static webpage I’ve decided that I want some animations. CSS/JS has plenty of animation libraries and I decided to use GSAP that contains a rich framework. The demo below is my first trial but you can do most effects that you would normally see broadcasters use today, but be far more flexible as you are dealing with Javascript code only.
So what’s the magic behind the overlay? Well as most genlocks you need a Chroma key and NeTV has decided to use a pink overlay (#F000F0) so you only need to fill the webpage with the above as background and the whole webpage will be transparent when it’s triggered. Sweet 🙂
So now we have a library to generate animated text and images, we have the background set, all we need to do now is to write some code. I’ve decided to, once again write the front-end in PHP as it’s my main language. I’ve updated my database to include a selection of shows that I like. Currently that list is static but I have added a button on my Remote Control GUI that allows me to “Like” shows that will be added to my favourites list.
A database query will just find any program that’s start time is within the next 10 minutes and contains a wildcard of any title that’s in my favourites database. One found it will trigger the animate library and show it. The actual data is contained in the same EPG database that I’m using for my app. That means that I only trigger programs that are run on channels that I’m subscribing to, or actually a subset of channels as I don’t watch all of them.
Currently I’m calling the API to my NeTV once every minute using a crontab entry on a virtual machine (server) but I’m planing to rewrite the front-end to be ajax or web-sockets based so I can trigger events from the back-end instead and having the browser to always be active. Now the browser time outs after 30 sec, that works well as I don’t have to animate an “fade-out” entry.
Below is an example of a event. This particular one was taken during testing so the time is incorrect (I only trigger events for programs that is due to for the next 10 minutes, not 23).
