Example: Very Limited iPad SageTV (or HTML5 video element viewer)

voidpt · #1 05-09-2010, 06:42 AM

Short Intro

I'm afraid I have to start by saying that this is not a user-friendly solution to setup. It is more of a simple setup I made for myself to quickly get usage of my iPad in relation to recordings in SageTV. But instead of hiding it away I hope it can give others ideas or some sample code to look at. Goal is more to kick-start some discussion around HTML5 video solutions for SageTV.

What is VLiPad?

VLiPad is just my internal name for some PHP code on an Apache web server I have on the same machine running SageTV at my home. Together with some batch jobs that are kicked off through the SJQ plug-in, the following happens on my server:

» Recording of TV show is finished in SageTV
» Batch job is run to recode recording to optimal MP4/H.264 for iPad
» Resulting MP4 file and a tag (.vli) file is placed in a web directory
» The PHP code will generate an UI of recordings that can be played on iPad

Main Screen:

Play Screen:

For me this enough to make my iPad work as a (limited) remote TV viewer in my home. I do not get realtime TV, but I seldom watch that anyway. But with optimal recoding, viewing video on iPad is really good. Because it is all done through the web-browser on iPad there are no Apple restrictions. All video storage is on my server, 4000GB vs 16GB on my iPad

No need to sync through iTunes, just view it when recoding is finished.

Limitations of VLiPad

There are many. Just to make it clear again, this is a hack & slash solution to just barely be able to view my SageTV recordings on iPad. I do not get bookmarks (fixed in v0.02), chapters, comskip, sort, watched status, and the list goes on. Not to say it is impossible to implement. A lot of it is. No time for now though.

Possibilities of HTML5 video on iPad

Some stuff I have observed for now. Solution looks to work ok remotely, if you have enough upload bandwidth. The recoded clips are around 2.5Mb/s (you could choose lower quality). I have 5Mb/s upload through my ISP, so it is possible for me the use it when on the run. Though for me it is primarily for use in my home.

In v0.02 I used the currentTime video element attribute to implement a bookmark functionality. The <body> tag has a onunload="saveBookmark()" JavaScript callback that saves the current time position. This is read back when opening the same show again. Through some trick in the timeupdate event on video element, it works surprisingly good. Still possible to seek manually through the playback controls that iPad gives for HTML5 video element, when needed.

When it comes to comskip my first thought was that it might be possible to do something through chapter support in the MP4 container. Now though I think it's better to look at the possibility to use the currentTime video element attribute. Then construct some creative navigation elements in HTML outside the video element (based on EDL file for show).

Also in v0.02 I made a play/buffer progress bar. Got good examples from "Skip forward, please" section in this Opera article, and "Adding a Styled Progress Bar" section in Apple article. Opera shows a sample using the new <input type="range" ...> tag. Gives user seek ability on the controller itself. Unfortunately is not supported on iPad Safari yet. So had to fallback to the visual depiction of Apple sample. Bonus is that you get the buffer status too. Can be practical sometimes. Result though is that with creative construction of HTML hotspots on progress bar and visual indicators, together with currentTime video element attribute. It should be possible to make navigation in video possible in many ways (chapters, comskip, bookmarks, ...).

The MP4 container does support multiple audio tracks and subtitling (text, not graphics). Not tested it enough. But here is a screenshot showing the option:

Important User Tip: When you have the HTML5 video playing back in the web browser. Single-tap the video. Then press the <-/-> symbol in bottom-right corner. It will open the video in the standard video viewer of iPad. You can jump back and forth between web-browser viewer and standard viewer. But the standard video viewer gives you a few more options. Among them, the audio/subtitling selections shown above. Also possible to use pinch-zoom gesture to do the same.

Rotatation of iPad works ok. As long as you lock the web page to 1024 in width, and include this line in HTML code:
» <meta name="viewport" content="width=1024" />
Safari on iPad will then zoom automatically to width of its own screen both landscape and portrait. So no need to adjust zoom yourself.

As more and more standard PC browsers gets HTML5 video implemented. I will be able to reach this solution remotely from standard PCs. It is only a standard HTML5 web page. Not really bound to either SageTV or iPad.

Other possible solutions

I did look at other possible solutions. The Air Video app for iPod/iPhone is mentioned a lot. From what I can understand it is a server/client solution where the server does realtime recoding of media you have on a server, as you play it in the client (iPod/iPhone). Even though they look to be making their app iPad compatible. I do not think the quality of realtime recoding would be good enough for me. I want the recording to look as good as possible on the iPad. And even with SD video (MPEG2/576i), recoding through HandBrake/x264, H.264 High@L3.0, is just about realtime on my 4 CPU cores. If I want optimal quality.

The ultimate solution would of curse be a native iPad app by SageTV. With the full interface, plug-ins, and whatnot. But I think we all know that will not come, although I would love to be proven wrong. There are so many elements to make that work. Would also be unfair to people who would like to use other devices than the ones made by Mr. Apple.

What I would love to see from SageTV, would be an official HTML capable frontend. Yes, there are several custom variants already. But if SageTV made a HTML client (I would happily pay for it like Placeshifter), that exposed all that is possible through HTML (there would be limits). Also if the browser was HTML5 compatible it could serve video to a certain degree. You could tell what formats/devices you would have SageTV recode to. HTML5 should support streaming also, so realtime viewing is not out of the question. Point of it all is, it would expose SageTV to a whole range of clients that are not possible today.

Resources for HTML5 video

Official W3C HTML5 video element (working draft)
Apple Safari Reference on Audio and Video HTML
Introduction to HTML5 video (by the Opera browser guys)
Everything you need to know about HTML5 video and audio (by the Opera browser guys)

HTML5 video & Theora vs H.264 vs VP8

Not going to touch this much. Yes, there is a fight going on for what codec, or codecs, are going to be standard for HTML5 video element. Result is not easy to predict. But from my point of view, I do not care. I'll recode my video in the optimal format for my device. And if I'll end up having more devices. I'll recode them twice. This issue is not that relevant for iPad anyway. From what I understand, with its hardware accelerated decoding of H.264, it is already locked into H.264 format. Wouldn't get much battery life if it was software decoding.

<eof>

Much other stuff I could have included here, not enough time. I have what I need, now you go and make what you need

Not saying I will not come back with some updates. But for now I have other projects that needs work

I'll monitor this thread though, and try to answer any questions, if I can.

voidpt · #2 05-09-2010, 06:43 AM

Sample Code / Download

Again. These are not files that are user-friendly to setup. For now this solution will require you to understand the PHP code to a certain degree, and modify it yourself to suit your needs (if needed). You will also need to make your own batch solution to serve recoded files to the web directory with PHP code. If/when I get time I will describe how I have setup my own recode solution.

Here's the ZIP'ed file that contains the PHP solution:
Download: VLiPad_PHP_v0.02.zip
(License: Look license.txt in ZIP file, Summary: I'm not responsible for anything)

Here's a ZIP'ed file with sample HTML (no PHP) to show logic:
Download: VLiPad_PHP_v0.02_PlainHTML_Sample.zip
(Info: The dynamic PHP/HTML stuff is lost here. But it makes it easier for those who just want to look at the plain HTML5/JavaScript code. You can even place these files on a web server, replace the dummy .mp4 file, and make it play)

Basic Instructions

If you are just out to get a feel of it. To see how it works. You have a web server with PHP and some knowledge. It is relatively easy to setup. I have made the ZIP file above exactly how you would place this stuff in a directory on a web server. Unzip ZIP file (with directories). Copy all contents of the .\VLiPad_PHP\ directory to a directory on your web server. Then browse your Safari on iPad to that directory (as long as index.php is a valid index file). Then you should get this (if you expand the first TV Shows entry):

One thing that probably needs editing in index.php, index_play.php & index_sbmark.php files, is the following line:
» date_default_timezone_set("Europe/Oslo");
You should find it nearly at the start of the code. Set it to your own timezone. You can find a list of valid values here.

That's really what it is all about. If you now take a look in the directory you will see the dummy sample .vli, .mp4, .m4v files. The .mp4 & .m4v files do not contain real video (would take too much space). So you will need to replace them with some stuff you got yourself to test out playing them. The reason for the .mp4 vs .m4v is just because I use this difference in my recode solution to differentiate what files are TV Shows what are Movies. Both are using the identical MP4 container.

What the index.php script is doing is parsing all files in its own directory, and then picking out the .vli files, reading the text content. Here is how the TVDummy01-123456-0.vli contents look like:
» MP4File: TVDummy01-123456-0.mp4
» Channel: CHL1
» Title: Dummy Show 01
» Time: 1272917400000
» Type: TV
» Status: Done
Should be easy to guess what it means. The name of the MP4 file to use. The channel identifier to show PNG logo (exactly 64x45) in .\ChannelLogos\ directory. Friendly title of show. The timestamp for airing of the show from SageTV. Type of video (TV or Movie). Status of recoding (Done). If we take the MovieTest02.vli file that represents the Test Movie 02 entry (still indicated as recoding), it looks like this:
» MP4File: MovieTest02.m4v
» Title: Test Movie 02
» Type: Movie
No channel or timestamp entry (not needed for movie entries). And no status yet. Meaning, it will show as recoding until it gets Done. You will also see this entry after you play a file through index_play.php:
» Bookmark: 123
It was implemented in v0.02. When navigating away from web page showing a video the <body> tag has a onunload="saveBookmark()" JavaScript callback. It reads the currentTime video element attribute, and writes the result to the .vli file. This is read back when starting to play show again. Video then jumps to last position through some trick in the timeupdate event on video element. Would have liked to do it some other 'official' way. But this was the only way I could make it work. Looks stable and works pretty consistent. At least on iPad, other devices/browsers might need other tuning.

My recoding job is just using the SJQ plug-in to kick some batch jobs away (with parameters that give enough info about tv show). The batch files then echo's info to a .vli file. Recodes the movie. Does a final echo with done status. And thats about it. I also have a "remove video if not in SageTV anymore" logic. Will describe it when I get time.

voidpt · #3 05-09-2010, 06:44 AM

* Reserved post, possible future use *

voidpt · #4 05-09-2010, 06:45 AM

Revision History

Version 0.02:
» Added Skip buttons (-5min, -1min, +1min, +5min) to HTML navigation area (look screenshot in first post)
» Added play/buffer progress bar to HTML navigation area (look screenshot in first post)
» Made automatic bookmark functionality to restart playback on shows at last played position
» Rewrote how parameters are passed between php files (used .vli file instead of video file directly)
» Added a VLiPad_PHP_v0.02_PlainHTML_Sample.zip attachment to make it easier to rip sample stuff
» Updated text/screenshots in posts to reflect changes, new ideas and so on

Version 0.01:
» First release

White94Cobra · #5 05-10-2010, 09:51 PM

I'm using Air Video with GREAT results. The quality is extremely good on both my iPhone and iPad. Pointed my non-Sage PC to the UNC recording and video paths on my Sage box. Even 1080p mkv files recode real time in amazing quality.

voidpt · #6 05-11-2010, 02:22 AM

Quote:

Originally Posted by White94Cobra

I'm using Air Video with GREAT results. The quality is extremely good on both my iPhone and iPad. Pointed my non-Sage PC to the UNC recording and video paths on my Sage box. Even 1080p mkv files recode real time in amazing quality.

I don't doubt it. It's more of an idealistic standpoint (mine that is), from a bit's & bytes perspective. Compared to individual perceived quality, which I agree counts more in most cases. But I like the bits & bytes perspective

So I'll continue using the x264 encoder engine. Makes it possible to tune and choose exactly what the resulting stream becomes.

I haven't tested Air Video myself yet. Might do an experiment of it. Because I would be more than a little impressed if Air Video could do realtime recoding of 1080p m2ts Blu-Ray streams to iPad video size. At the same time giving the quality I would be looking for. Because when I do recode of (legally bought) 1080p m2ts Blu-Ray streams down to 1024x576 (H.264 High@L3.1). That result looks absolutely stunning on the iPad when shown 1:1 pixel. As told though, that software recode taxes all my 4 CPU cores, and gives about 10-15 fps recode speed. Again, it would be me, myself & I doing pixel peeping. Not a very neutral opinion

vividweb · #7 05-11-2010, 07:37 AM

Very good idea and a good start. I wonder if this could be combined with the other web interfaces that are already out there.

voidpt · #8 05-11-2010, 07:57 AM

Quote:

Originally Posted by vividweb

Very good idea and a good start. I wonder if this could be combined with the other web interfaces that are already out there.

Shouldn't be a problem. Technically the PHP part is just because I had a server up and running with PHP. What solution you use to generate the dynamic HTML/JavaScript code through HTTP is irrelevant for the iPad browser. Be it CGI or JavaServer Pages (JSP), or something else. This is just a way for me to experiment the limits or possibilities of the HTML5 video element on iPad. And anyone is free to rip out whatever part of my code. It is not complex, and the HTML generated is very simple.

One extra thing to my post above about Air Video. I might come through as being against realtime recoding. I'm not. Won't take long before even recoding from 1080p to the iPad is not that taxing on CPU's (even if software recode & high quality). And already today, recoding for lower resolutions than iPad is probably no problem. But if this is going to be done through HTML5 video element there might be a few hurdles, and possible limitations, compared to a serving already finished recodes. Seeking & other stuff. But realtime recoding would be much more dynamic, so I am all for it where it works.

jreichen · #9 05-13-2010, 07:26 AM

voidpt, I like what you're doing here. Eventually it would be nice to have this functionality in both web interfaces. You got it right when you said real-time streaming will have its own hurdles. A released plugin also has to support many different desktop and mobile browsers, which can add a significant amount of time and energy (that's why I like your approach of starting with a prototype that has known limitations).

If you're interested in writing a Jetty web app and integrating with SageTV's APIs feel free to contact me. If you want to continue using PHP, you might take a look at Quercus, a Java implementation of PHP. I haven't tried it so I don't know what it would take to get it working in Jetty.

voidpt · #10 05-15-2010, 08:14 AM

@jreichen

Thanks for the comments. As you pointed out so correctly. I am looking at this as more of prototyping / proof of concept. For me it solves a practical problem with my new device. Getting recordings automatically available without having to press a key / sync / or do anything. Long live laziness

I appreciate the offer on the Jetty web app. I think I'll pass for now. Just don't have the time. I'm about to try to wrap my head around a hobby project on making an app for iPhone/iPad (its not SageTV related I'm afraid). And that environment (new to me) with its Objective-C language + IDE + compilers and so on, takes a lot of time.

But I'll keep on putting out stuff here as I implement a few new things. Just implemented simple skip buttons, and a play/buffer progress bar. ComingSoon™

voidpt · #11 05-17-2010, 01:36 PM

Updated to v0.02

Look this post for changes.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
iPad anyone?	stuckless	General Discussion	100	07-06-2010 09:03 PM
Sagetv via iPhone/iPad thoughts/discussion	2002cbr600f4i	Hardware Support	23	05-09-2010 01:19 PM
Got an iPad and its cool!	heffneil	The SageTV Community	50	04-19-2010 08:36 PM
Table is missing one element?	tmiranda	SageTV Studio	2	11-10-2009 06:27 AM
ERROR:Root element is missing.	enterpryse	SageTV EPG Service	3	01-22-2009 12:47 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)