HTML <video> and <canvas>

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

User avatar
Xanthir
My HERO!!!
Posts: 5081
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

HTML <video> and <canvas>

Postby Xanthir » Thu Jul 08, 2010 4:58 am UTC

I just did a well-received HTML5 hack talk at Google about the magical union of <video> and <canvas>. I thought some of you guys might be interested in it. My slides consisted solely of the demos themselves and their source code, so without further ado:


I'll be writing a guest blogpost doing a code walk-through of the examples for HTML5Doctor.com tomorrow; I'll link it when it shows up. If I can find the video one dude made of the talk I'll link that too.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Patashu
Answerful Bignitude
Posts: 377
Joined: Mon Mar 12, 2007 8:54 am UTC
Contact:

Re: HTML <video> and <canvas>

Postby Patashu » Thu Jul 08, 2010 6:38 am UTC

That looks neat! And it's all html/javascript.

User avatar
DorkRawk
Posts: 51
Joined: Thu Mar 08, 2007 6:50 am UTC
Location: Chicago
Contact:

Re: HTML <video> and <canvas>

Postby DorkRawk » Thu Jul 08, 2010 3:42 pm UTC

Wow, that real-time video to ascii is amazing! I've only played around a little bit with new html5 capabilities. I'm really excited to be able to use that as well as css3 stuff in "non-experimental" sites.

Do you know much about the data storage capabilities of html5 and how developers will interface with it?

User avatar
Xanthir
My HERO!!!
Posts: 5081
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: HTML <video> and <canvas>

Postby Xanthir » Thu Jul 08, 2010 5:15 pm UTC

(Btw, just updated the demos with both webm and theora versions of the videos, so they'll work in Opera and Firefox as well.)

@DorkRawk: Check out http://diveintohtml5.org/storage.html for a decent overview and explanation of how localStorage works. As well, some browsers support WebSQLDatabase, though that's been abandoned for standardization in favor of IndexedDB.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
You, sir, name?
Posts: 6961
Joined: Sun Apr 22, 2007 10:07 am UTC
Location: Chako Paul City
Contact:

Re: HTML <video> and <canvas>

Postby You, sir, name? » Thu Jul 08, 2010 6:57 pm UTC

That's just awesome.
I edit my posts a lot and sometimes the words wrong order words appear in sentences get messed up.

User avatar
Xanthir
My HERO!!!
Posts: 5081
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: HTML <video> and <canvas>

Postby Xanthir » Thu Jul 08, 2010 7:27 pm UTC

The awesomest part of it all is how damned easy it is to write this stuff. The most complex of the demos, the video-to-ascii conversion, only takes about 40 lines of javascript.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Cleverbeans
Posts: 1378
Joined: Wed Mar 26, 2008 1:16 pm UTC

Re: HTML <video> and <canvas>

Postby Cleverbeans » Fri Jul 09, 2010 12:23 pm UTC

Xanthir wrote:Check out http://diveintohtml5.org/storage.html for a decent overview and explanation of how localStorage works.


Mark Pilgrim does it again, what a badass. I wish I had some means of shipping this guy vast sums of cash, I literally wouldn't have my job without him. Thanks for the link.
"Labor is prior to, and independent of, capital. Capital is only the fruit of labor, and could never have existed if labor had not first existed. Labor is the superior of capital, and deserves much the higher consideration." - Abraham Lincoln

User avatar
Xanthir
My HERO!!!
Posts: 5081
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: HTML <video> and <canvas>

Postby Xanthir » Fri Jul 09, 2010 3:53 pm UTC

You could buy Dive Into HTML5.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
TheChewanater
Posts: 1279
Joined: Sat Aug 08, 2009 5:24 am UTC
Location: lol why am I still wearing a Santa suit?

Re: HTML <video> and <canvas>

Postby TheChewanater » Sun Jul 11, 2010 6:45 am UTC

That realtime video-to-ascii sounds awesome, but the grayscale one is the only thing that's working for me, even if I download the page and video locally.

Code: Select all

Error: uncaught exception: [Exception... "Security error"  code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: "~/Desktop/demo3.html Line: 30"]

Useragent:

Code: Select all

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.6) Gecko/20100628 Ubuntu/10.04 (Lucid) Firefox/3.6.3


?
ImageImage
http://internetometer.com/give/4279
No one can agree how to count how many types of people there are. You could ask two people and get 10 different answers.

User avatar
Xanthir
My HERO!!!
Posts: 5081
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: HTML <video> and <canvas>

Postby Xanthir » Sun Jul 11, 2010 5:11 pm UTC

That's... weird. The grayscale and ascii ones shouldn't work at all when downloaded locally, and should throw exactly that error - they depend on actually manipulating the pixels of the video, and file:// urls are always cross-origin for this purpose. But neither should throw that error when viewed on my server.

Do the demo0 and demo1 files work when downloaded locally? Those shouldn't have any security issues.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
TheChewanater
Posts: 1279
Joined: Sat Aug 08, 2009 5:24 am UTC
Location: lol why am I still wearing a Santa suit?

Re: HTML <video> and <canvas>

Postby TheChewanater » Sun Jul 11, 2010 9:55 pm UTC

Xanthir wrote:That's... weird. The grayscale and ascii ones shouldn't work at all when downloaded locally, and should throw exactly that error - they depend on actually manipulating the pixels of the video, and file:// urls are always cross-origin for this purpose. But neither should throw that error when viewed on my server.

Do the demo0 and demo1 files work when downloaded locally? Those shouldn't have any security issues.


They seem to only work locally after refreshing a few times, except the ascii one.
ImageImage
http://internetometer.com/give/4279
No one can agree how to count how many types of people there are. You could ask two people and get 10 different answers.


Return to “Coding”

Who is online

Users browsing this forum: Demki, wurlitzer153 and 11 guests