There could another simpler way. NoVnc + tightpng encoding. Create and record a high framerate VNC session to desired video. Tweak no vnc to receive data from local callbacks and replay the recorded data.
iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
21–30 of 121 posts
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#22After reading this article I still don't have a clear idea of how they did the animation. It seems pretty in-depth technically, but the overall execution is still a mystery.
For example, how does the _frames array of base64 data related to the two unlock_00X.jpg files? All it says is "The "unlock_manifest.json" file specifies how the updated parts are positioned."
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#23After reading this article I still don't have a clear idea of how they did the animation. It seems pretty in-depth technically, but the overall execution is still a mystery. For example, how does the _frames array of base64 data related to the two unlock_00X.jpg files? All it says is "The "unlock_manifest.json" file specifies how the updated parts are positioned."
The image data is read from the JPEG files in order as a series of 8x8 pixel blocks (in left-to-right then top-to-bottom order). Each instruction is basically "draw the next {{length}} blocks from the JPEG files to location {{location}} on the canvas".
Surprisingly, there is no mechanism to explicitly state which blocks to get from the JPEG. Instead, it always just uses the next unused blocks. (This means that blocks from the JPEG cannot be reused.)
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#24Great analysis, very interesting.
Obviously this is absurd overengineering.
And, despite the assumed total cross-browser compatibility claimed, I found that the video wouldn't play in any browser available to me, despite pinning the CPUs on my computer while just sitting there doing nothing.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#25Man, I wish there was a library to help us normal folk do similar things. The ability to do small video on mobile would rock.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#26I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a tag.
Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012?
There is a whole pattern of similar things like this in web that is killing me a little bit every day.
Want to center a div on the page? No worries just wrap it in these 5 divs and apply these 20 css properties and you are good to go. Oh btw, IE doesn't like that, you need this.
Honestly I think we developers should stop putting up with crap like this, and accepting the burden of broken technologies using hacks, etc...
If we become less tolerant of crap, there will be less crap. As long as we accept it by using workarounds, etc... there will be more shitty things to come.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#27Speaking of Apple website updates, I am surprised that they have never offered a responsive design for their apple.com site where you buy iPhones and iPads. Every app they make is designed differently for the phone or the iPad, but not the website.
Since they have an Apple Store App that works better than the website, why would they do that?
You're 100% right, of course, it is in apple's best interest to have you use their app.
It's just that downloading a bulky app for something you'll use infrequently is a crappy way to to business.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#28Speaking of Apple website updates, I am surprised that they have never offered a responsive design for their apple.com site where you buy iPhones and iPads. Every app they make is designed differently for the phone or the iPad, but not the website.
Since they have an Apple Store App that works better than the website, why would they do that?
[deleted]
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#29This whole implementation could just have been someone's weekend hobby that made it to production. Remember how Apple got its intel based macs? http://qr.ae/8eDNG
Just want to mention it before we blurt out the obvious over-engineering argument. ;)
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#30I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a tag.
Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these…
CSS's flexible box model will eliminate that issue once it has wider support. There is a solution in the pipeline, it's just a matter of time.
Not the best link, but here's some more recent info: http://css-tricks.com/old-flexbox-and-new-flexbox/