Introduction to HTML 5

>>NEUBERG: My name is Brad Neuberg. Today,
I’m going to be talking to you about HTML 5 and giving you an introduction to the interesting
aspects of the new standard. I’m at Google’s Developer Programs specifically a group called
Open Web Advocacy. Our group is focused on helping through outreach, education, JavaScript
tool kits that help really increase the rate at which developers can use interesting new
Web technologies like HTML 5, SVG, CSS3 and more. Before jumping into HTML 5, I want to
set the context of where we are on the Web today. The last two years, we’ve really seen
the Web platform accelerate. In this graph, you see, at the bottom, sort of the Web capabilities.
And at the top you see the capabilities of native applications which have stayed roughly
the same the last few years. What’s really interesting is the last two years, we’ve seen
an acceleration of what you can do on the Web that’s starting to get close to the abilities
of native applications. We see the iPhone was a real game changer. Safari 4 really increased
capabilities. Opera has always been a leader. The Android device really opened things up
and so on with the introduction of Chrome, Firefox 3.5. And we see that over time, the
Web is getting better and better and better at having a greater degree of fidelity of
things that you want to do on the Web. And what’s really unique is that as the Web the
last few years has really accelerated with modern browsers, it’s solving real developer
challenges. And that, when we get into HTML 5, we’ll see how some of these solutions play
into these challenges. But things like, having improved graphic support in the base platform
of the Web. Being able to tie location into your Web applications. Storage means actually
being able to use the abilities of a desktop machine to do storage, so that we can treat
it as more than like a Commodore 64. We have these very powerful machines. Let’s start
using them on the Web. And finally, speed, that’s been a really key change. JavaScript
has gotten much faster and that’s a game changer. Along with this has been something that’s
really surprising. You know, when Firefox really helped create the idea of a consumer
driven open-source application, that was a new untested idea. People didn’t know it could
open-source scale into the consumer market. But I think, at this point, that’s a done
experiment. We know that it’s true, that it can happen. If you look at this, you’ll see
that it is an increasing accelerating number of developers contributing to open-source
projects, to open-source Web browsers including Chrome, Firefox, WebKit. So that’s really
going to help accelerate even more what we have. And at the same time you see a roughly
linear trend in terms of the number of users. Here we see millions of open-source browser
users that is increasing overtime. At the same time, and sort of setting the context
of where we are today, we see a tremendous improvement in JavaScript performance and
we are only at the beginning of that trend. The last two years, we’ve begun to see that.
We’ve already seen a roughly 100x improvement in JavaScript performance, really, pretty
much within about the last sort of year and a half. We’re only at the beginning of the
optimizations that are possible when you treat JavaScript as something that you can really
crank a lot of performance out of. So these trends come together, you know, the increasing
fidelity of Web applications, a greater number of open source browsers, faster JavaScript.
These come together to really kind of create the stage at which HTML 5 can really do much
more than HTML 4 which was the last major iteration of HTML, which was really in the
late ë90s. So it’s really time for a new version of HTML because we are in a different
world at this point than we were then. And this time around, I just want to sort of make
a point that let’s do it differently. One of really surprising things is most people
don’t realize that AJAX, the idea was invented by Microsoft in the late ë90s, Outlook
Web Express in 1997 was the first app to use AJAX, which at that time was the XML HTTP
request object and it really took until about 2005 for Firefox to also support that and
the other browsers, and people just sort of wake up to the fact that, ìHey, you can
combine server–background server talking to support with things like more advanced
CSS, HTML and that kind of gave us the world that we have today. But it took something
like eight years to really gain enough awareness and gain enough support for people to really
start paying attention. You know, this time around, I think people are going to notice
a lot sooner the capabilities of HTML 5, the capabilities of SVG, CSS3, faster JavaScript.
Let’s not wait us long as we did then to start really doing amazing things. And I think we’re
going to–we’re actually going to see that shift. So people are already jumping on these
things. So let’s do things differently this time around. So the structure of the talk
I’m going to do today is I want to talk about five major sections. I’m going to talk about
vector graphics on the Web including canvass and SVG, Scable Vector Graphics. I’m going
to talk about video within the HTML 5 standard. I’ll talk about geolocation. I’ll talk about
the application cache in the database and then I’ll talk about Web Workers. The HTML
5 spec includes more than this. These are five aspects of the spec that are very exciting
and very useful. We could spend the whole day talking about these aspects. There are
so many interesting things in there including new tags, sort of cleaning up, describing
how you render older content and so on. We’re going to focus on these aspects today. Each
one of the sections, I’m going to give you an introduction. I’m going to give you some
sample code and some demos. And also to talk about how this fits in to what you’re doing.
So let’s get started. Let’s jump in to vector graphics. So until recently, you really couldn’t
draw on the Web. The Web itself didn’t really provide primitives to help you actually draw
things on the screen. And the graphics–if you could, you know, kind of get some graphics
out there, they weren’t very interactive. They didn’t interface very well with JavaScript.
Now, you could sort of rely on other sort of aspects of the Web to do this, things like
Flash, Silverlight, VML which was an early vector graphics language from Microsoft. So
a lot of people would sort of do clever tricks in order to do some drawing on the Web. But
what’s really cool is if, if we can get graphics to be an intrinsic part of the Web, what you
get is things interact really well with each other and that’s what so cool about Canvas
and SVG, which I’ll talk about both of them, is they embed themselves into the Web platform.
They are part of HTML. They’re a part of the document object model. They can fit into CSS
and HTTP. And that gets really powerful. As you’ll see that lets them break out of the
box and do really cool stuff using existing Web skills. So let’s talk about both. Let’s
jump into SVG. So SVG is a, is an acronym that stands for Scalable Vector Graphics.
Really, they just give you new HTML-like tags for drawing. So to do a rectangle, you get
a rectangle tag. You can say where on the screen to put it. Here we’re putting it at
x=0, y=0. You can set a width and the height. You can add a fill and a stroke if you’re
changing the width. You know, how many crazy hacks people have done to do rounded corners?
Well, it’s really easy with SVG. There we are making some rounded corners. We say, round
the x side, round the y side by 8. Boom! You know, one line for rounded corners. That’s
nice. And then finally, you know, we–I talked about how this stuff is native to the Web
stack. So we can add an ID that will allow JavaScript to grab this. We can add a CSS
class which lets you style this with CSS if you want to control in a centralized way how
aspects of your drawing are displayed. And there, right there, is what that particular
tag would get rendered as. A blue square with some rounded corners and red outline. Now,
what you just saw surround this is at the very top, that is the HTML 5 doc type. That’s
the thing that you drop at the top of your page. And that tells the browser, ìHey,
this is HTML 5.î Now SVG is a Web standard that predates HTML 5. One of the things that’s
really unique about HTML 5 is it now says, here’s how you drop SVG right into a normal
HTML page. So it really makes SVG a core part of HTML. So right here, we see, we’ve got
some normal HTML. You say SVG and then you drop your mark up in. So that’s one of the
really cool new aspects of HTML 5 that hasn’t got as much attention as it should, ’cause
it’s something that’s really unique. We now have HTML-like tags that do drawing right
inside of HTML. Now, I mentioned that one of the unique things about these things is
they integrate well. So these aren’t just static graphics. These are graphics that you
can animate, you can interact with. Here we are using the normal document object model.
We grab our rectangle. We can use sort of the exact same way that we change the style
of HTML. There we are changing the fill to “green.” We can add interactivity, again,
the same way. There we are doing an onclick. So when you click on the rectangle, it says,
“Hello.” And that’s it, interactivity is really straight forward. This shows sort of one of
the nice benefits of what it means to have scalable graphics. On the left you see a normal
bitmap. When we change the size, it distorts. It pixelates. On the right, whether you’re
looking at an SVG image on a 40-inch monitor, or a small iphone screen which supports SVG,
it still stays beautiful and legible. That’s one of the benefits of this technology. So
let’s jump into the Canvas API. The Canvas API is–I like to think it as a scriptable
image tag. As opposed to SVG which is mark up, it’s a tree inside of your HTML. The Canvas
API is more like an image tag that you can create JavaScript that directly scripts and
draws your own custom image. So, the first thing you do to use the Canvas tag is you
drop a simple tag that say’s, “canvas” into your page, give it a width and height and
you give it an ID. Then, your JavaScript grabs that canvas tag, and gets what’s known as
the context. So we get a context which is a drawing surface area. Right here, we say
a 2D context. This is really interesting. It opens up the door to say 3D in the future
so you could possibly do a 3D drawing context. We just saw something called WebGL which landed
in Firefox 3.6 recently, which is a 3D Canvas API based on OpenGL. And that’s really exciting
work. That stuff is not formally a part of HTML 5, but it’s experimental, interesting
things that’s happening out on the edges that started to gain interaction. Once you’ve got
your contexts, you can set the fill style. Here we are saying, make anything that we’re
going to draw, fill it as red. Here we are drawing a rectangle. That’s the X, the Y,
the width and the height. Here we are adding opacity. So we say RGBA, that’s going to make
50% shaded blue rectangle. There we are drawing the rectangle. And there you go. There on
the right, you see the two things that we just drew. You see a red rectangle with the
partially opaque blue rectangle on top. So, I want to show you some demos. A lot of people
ask, how do SVG and Canvas fit together. But what’s interesting is they both fulfill different
use cases. I will touch on that. But I want to show you something really unique, a really
great way that they integrate together. This is the Mozilla Firefox download page. What
you see on this page, you see a map of the world. That map is drawn using SVG, it’s markup.
And then you’ll see occasionally a little yellow boom, dot show up in a specific location.
Those are drawn with Canvas. This page keeps the connection open to the server, so that
it has streaming events, and it records whenever anyone downloads Firefox 3.5, where in the
world are they downloading them. The thing I love about this page is it really shows
when to use either technology, and when it’s appropriate. SVG is great when you’ve got
graphical assets like a map of the world or maps in general or a drawing of a tiger for
example. That’s a really appropriate thing. And you can bring that in. Canvas is really
good when you want to add drawings on top. SVG is good for interactivity. So you can
play these things together in order to use their strengths where appropriate. This is a really cool demo of Canvas. Everyone’s
played Doom. This is not a first person player, it’s a first person gifter, as we walk around.
So this entire thing is drawn with Canvas. And you can’t see, but I’m using my keyboard
to walk around. Again, this is a really good use case that shows Canvas. It doesn’t have
mouse interactivity. Canvas is really good if you want to create games that are keyboard
driven. SVG is good if you want to create interactive mouse driven things. So Canvas
is great for creating a side-scrolling game for example. This is an interesting population demo. Over
here, we see sort of demographic information showing the sort of the number of men and
women in Germany. Now, this right here is SVG. This is normal HTML. This shows them
integrated together. The SVG is right in the page using HTML 5. What’s really cool is what
makes this, and you see as we run over, this is just using JavaScript that adds itself,
just like you saw with the samples on mouse over, to show further information there going
in. What’s interesting that makes this unique is in real time we can change the language
of the image. So if you were to push down a static image, you couldn’t dynamically change
the language of the page and the data. And you also couldn’t do the interactivity. So
this shows one of the strengths of SVG, you can think of them as, as, information-dense
data that you can push down. That, those are really a unique way to use SVG. Another great
example of Canvas
is Bespin. This is a graphical developer’s editor created from Mozilla that allows you
to do all sorts of interesting collaboration, social sharing right within. The whole thing
does all of its drawing through Bespin. A really, really cool use case. And finally,
I want to show you one last demo of these two technologies. This is an atlas that shows all of the results
of the German election. It’s information dense. We can drag it around. We can zoom in. Again,
on the right here is HTML, on the left here is SVG, that’s natively integrated. Of course,
as we go over it, we can update what’s going on in the HTML. We can break this down by
different political parties. So here you go. You get kind of a sense of both technologies.
So a really natural question is when Canvas or SVG? When should you use one or the other?
So SVG is actually what’s known as a retained-mode API. In graphics, you have retained-mode APIs
and immediate-mode APIs. And you need both for different situations. SVG is higher level.
You want to use it when you need import and export, like I said, of graphical assets.
You can load in the Illustrator and the Inkscape. Whenever you want to create easy user interfaces,
because SVG is a retained-mode API, that means there’s a tree of everything that you’ve added
to the screen. So it’s really easy to do hit detection and adding events to things ’cause
you can just add your listeners somewhere in the tree. It’s interactive. It’s good for
medium animation and it gives you a tree of objects. So when should you use Canvas? Well,
Canvas is a lower level and depending on your project, that’s a strength or a weakness.
It’s really good when you don’t need that tree; when you don’t have mouse interaction;
when you have just keyboard interaction like with a game. When you have a tremendous amount
of high animation, especially if it’s not interactive, Canvas is a really good choice
because the tree just gets in your way. You don’t need collision detection. It’s JavaScriptcentric.
It requires some more bookkeeping in order to do what you need to do, but that can be
a strength depending on your application, and it’s really pixel-oriented. So really
depending on your application, you need to ask yourself, what am I trying to do, and
you need to use the right one. If you have something that’s sort of mark-up appointed,
that it needs to be interactive and you end up using it on Canvas, you’re going to rebuild
the lot of infrastructure that SVG gives you and vice versa. If you try to do a thousand
bouncing balls that aren’t interactive or a side-scrolling game with SVG, you’re going
to fail. So choose the right one. We need both. So where is this supported? Well, both
Canvas and SVG have excellence support across all the modern open-source browsers. And something
that’s really cool. I want to briefly touch on over at Google, we’re working with others
in open-source community to create a drop in JavaScript Library called SVG Web that
brings SVG to Internet Explorer so that you can now deploy SVG to close to 100 percent
of the installed base. I want to play a very short video that sort of shows you SVG Web.
It’s one minute. I just want to mention, actually, in just about two weeks, the SVG Open Conference
will be talking more about SVG Web. We’re working with Wikipedia. They’re doing some
very cool SVG work. They’ll also be using SVG Web Toolkit to have these images work
on IE. And so keep this in your radar, some interesting things, we’re doing some interesting
things there. So let’s talk about HTML 5 video. So currently video is complicated and it’s
outside your control. So at this point, I like to say in 2009, video really should be
a part of the browser. You know, multimedia is obviously here to stay on the web. It’s
an integral part. It needs to be a part of the basic web platform at this point. What’s
so cool is that HTML 5 now gives you a video tag that really works very similar to the
image tag. You don’t have to have really complicated objects or plug-ins; video just works. So
let’s look at some example markup and what that looks like. So you have a new video tag
and there you point to your video file and you can add attributes. There we’ve added
the controls attribute, which will cause the browser to give a nice little sort of control
bar with play and stop. You can drop fallback content on the inside if your, if that browser
doesn’t support the video tag. Now, what’s really interesting is, oh, one second. Technical
difficulty. Lights went out in this room. What’s really interesting is the different
browsers that support HTML 5 video support different codecs. So at this time, you generally
need to provide an Ogg [ph] version and what’s called an H.264 version and that’s straightforward.
You just drop in what are called two different source files, and you can give the type. What’s
really cool is that again this stuff is a native part of the browser. To script it is
really straightforward. There we are grabbing the video tag from the page and playing it.
And there’s a whole host of APIs around video. You can have call backs when different events
happen. You can draw on to the video element in order to add your own custom interactivity.
You can do all sorts of cool stuff. And I will show you some of that. This shows right there, you see there’s the
browser control that it added. This is an Ogg video showing a FireFox promotional video
that’s in Ogg using the video tag. Now what’s really cool. as I said, this stuff jumps outside
the box. So as it’s playing, we can use JavaScript to rotate and change what’s going on. That’s
what’s cool when things are a part of the browser. This is a mockup of YouTube using
the video tag, the HTML 5 video tag. Now, what’s cool is right here, this is HTML 5
video. It’s not any other plug-ins. And each of these little thumbnails is the HTML 5 video
tag as well. And what’s cool is they just have some little JavaScript on them that says,
“On mouse over, play,” like you saw; “On mouse out, stop.” So we have some small thumbnails.
And if, and I actually like to crack open this page because I think it’s a great example
of a lot of different HTML 5 things going on. So let’s look at the source of this page.
At the top, we see the HTML 5 doc type. We see the HTML 5 header tag. This actually allows
you to define a header, sort of something at the top of your page. Here we are just
sort of saying what the page is. We’ve got the new HTML 5 nav element. This says that
the following things are navigation and so we fill that out. And then we’ve got the HTML
5 article tag. The article tag says that here is where the real content of the page starts.
So that helps search engines. That can help anyone who wants to script a page and sort
of understand it. So the article tag surrounds where the real content is and then the header,
the nav, that allows you to say, “Oh, that’s the chrome of the page.” Within an article
you can have various sections. So here’s the HTML 5 section tag. So our main video on the
page is one section. Our list of thumbnails is another section. Here we are, we see the
HTML 5 progress tag. That allows you to show as you’re loading something how much is loaded.
Here’s the meter tag. So that helps with the common use case of having little stars to
rate something, which we you see all over the web. So that’s a way to actually do that
with less scripting and less custom code. And let’s find one of these video tags. Here’s
one of our thumbnails. So auto buffer says, “Hey, start loading this in the background
even if we don’t play it, that’s going to make the performance better when you run the
mouse over.” Loop says, “Just keep playing this over and over, and over in a loop.” There
we are providing the source and so on. So this is the, I just like this page, they’re
just using a lot of different HTML 5 elements, it’s a good showcase. And I think they use
the footer tag as well at the bottom. So just like the header tag, the footer tag is where
you can put copyright information, other aspects of things that aren’t part of the article.
So the video tag is well supported, it shows up in Firefox 3.5; it’s in Chrome; it starts
in Safari 4; it’s in Opera. The one thing right now is there’s essentially two codecs.
Let’s put this one known as the Ogg, sort of Vorbis codec. And then there is H264. At
this time the safest thing is just produce both videos in both formats. There’s open
tools that can easily do that, it’s a pretty straight forward process. So let’s look at
the Geolocation. So Geolocation, this is one of the things I’m really excited about. On
this page, you see all sorts of things that are possible once you have Geolocation. You
can do CRM systems, social applications become really, really interesting with the location.
Ads of course, games, people haven’t really tapped into that one yet. That one is going
to be really amazing especially when you combine augmented reality, photos, and so on. Now,
what’s interesting is, most of the HTML 5 Geolocation back ends don’t just use GPS and
don’t just use IP. They also tend to try to grab the Cell ID and the WIFI to bring in
more data. So having all three of these, you only need one really to get location. They
help you kind of trade off different design constraints to get the location. But that
actually happens in the background, you don’t have to be as concerned about that. So what’s
really cool is we now finally have browsers that are location enabled. The latest rev
of the iPhone OS has geolocation, Firefox does and so on. It’s now in enough places
to do some really cool stuff. So let’s look at the API. I love this API. It’s so straight
forward. You get a new object called geolocation that lives in the navigator object. And you
call get current position, and you give it a call back that will receive the location
when it’s ready and you get a position object, and this object is really straightforward.
You can grab the coordinates. There we grab the latitude. We grab the longitude. And then
you can pass that to some method that can do something with that. Here we have a show
location method that might show it on a map for example. Now what’s really cool is there’s
actually lots of other things on here, you can find out, you know, what’s the degree
of reliability of that, sort of what’s the resolution so you could draw a circle, depending
on how well you know the location and so on, but the basic use is really straightforward.
I want to show you a prototype of Google Maps that uses this API. Here at the top, here’s
how we see how it becomes secure. No website obviously should be able to reach your location
unless you give permission. So it says, “Hey, this website wants to show your location.”
You can give permission or not and you can remember it. It thinks a little while and
boom, it figures out where I am and that is where I am, I’m downtown in San Francisco
right now. So where is this supported? It’s in all the browsers. For Safari, it’s on the
iPhone currently but it’s not yet on Safari desktop. Now, let’s look at the app cache
in the database. So Web apps, if we really want to keep them evolving, they really need
to be able to work everywhere. You don’t want to use your web-based word processor or web-based
address book only when you have a network connection. It’s important to be able to use
it on airplanes, when you have a spotty internet connection, perhaps you’re overseas. Maybe
you’re in a dead zone where there’s no WIFI or cellular connection. So when you really
critically need your Web App, it needs to be available. The HTML 5 database and app
cache work together to help provide offline Web access. So before I show the code, I want
to show you a cool demo of both of these together. Here are some old messages, actually, they
were already saved. We can add messages. We can make new notes and delete notes. And then,
if we quit the browser and come back, we will see our latest data. And that is all being
saved into the local database.
So let’s look at this. So the first aspect is what’s known as the application cache.
This is what I like to call, it’s a super browser cache. We can’t depend on the browser
cache to have everything we need for our web application for a number of reasons. One,
things may have timed out and there may not be stuff in there that we need. Maybe the
user never went to some aspect of an application, but you still want to go to it when you’re
offline. So the application cache, think of it as a super browser cache that you control
as the application writer, and it’s really straight forward to use. The first thing is
you create a special file where the first line says cache manifest and then you provide
all of the resources, the HTML, the CSS, the images that you want to take offline. And
here we have all the things for that sticky notes demo you saw. Then, in your HTML on
the body tag, you add a new attribute, you say manifest equals and then you point to
your cache manifest. The one other thing that’s not shown here is on your web server, you
make sure to have the cache manifest have a certain mind type that’s unique, that just,
that’s for this offline app cache manifest. And that’s it, that’s really straight forward.
At that point, when the browser first sees this, it will take those resources, bring
them locally, and then automatically in the background, periodically see if they’ve updated
to pull down the fresh version. And now they are available for the user to actually see
your user interface because the files are available locally. So let’s look at the database.
That’s the other major aspect of the HTML 5 offline abilities. What’s really cool is,
this is a real relational database so you can do some cool stuff with it. To use, the
first thing is you open a database. So here we see, you give a database a name, you give
it a version so that you can know what version you’re working with if you need to migrate
data. You give it a title. Here we say, “Example database.” This would be shown to a user if,
in Safari 4 for example, a user can go and pull up a list of all their databases through
the preferences or through the developer tools. And then, you provide an estimated size at
the very beginning of how big your database is, and here we say 200K. When that happens
by the way, the first time, a user will be prompted, do you want to allow this website
to store up to 200K of data and they’ll give permission or not. Then, let’s look at an
example sort of save-me method. Here we are, we’re taking, sort of, everything we need
to save in one of these nodes. So we take an ID, some texts, a time stamp of when it
was made, where it is on the screen, and the z-index of how it’s stacked. So the first
thing is, once you’ve opened your database, you get a database object, you need to do
everything as a transaction. And you call a db dot transaction, and you give it a call
back function that will be called when the transaction is ready to go. The reason you
need to do this is because the web is a very unforgiving environment. Users could quit
your application right in the middle. They could crash their browser. This isn’t–this
is a tougher environment than a traditional desktop application. If you put everything
into a transaction, you’re already set up to make things more reliable. Once you’re
inside the transaction, then you can actually execute SQL by calling the execute SQL method,
and you provide normal SQL. Here we are, we are saying insert into a table called WebKitStickyNotes
we made. There’s the columns, and then we provide the values. One of the–you provide
all your values where you want them to plug-in, you put a question mark, and then you provide
an array that will fill in any of the new values, and there we go. One of the other
things I should mention is not only are the transactions asynchronous in order to help
in a more unforgiving environment, it also helps performance. It means that the browser
can execute the sequel away from the user interface thread to keep things from locking
up, and really give a better experience. And this one is in all the modern open-source
browsers. It’s currently only on Opera mobiles, not the desktop edition yet. Now, Web Workers–so,
sort of, using all this JavaScript, it’s kind of a double-edged sword, right? We can do
more but that also means we can end up not writing apps great that end up, sort of, freezing
the browser, causing it to run slowly. If you have a lot of JavaScript,JavaScript runs
in the same thread as the user interface of the browser. So as it’s sitting there running,
the browser won’t respond to the user clicking around or if they want to go to another tab.
So as things get more powerful, we can end up hosing the browser. So what’s really cool
is HTML 5 gives you something called Web Workers, and this lets you run JavaScript in the background
in such a way that it won’t hose or kill the browser. I want to show you an example that
really illustrates this. Nothing really shows us more than trying to find prime numbers.
The field of cryptography is really based on the fact that prime numbers are hard and
computationally intensive. I want to show a sample that tries to find prime numbers
using traditional JavaScript without Web Workers. We click “Go”, and you’ll see that the browser
is totally locked up. As a matter of fact, it doesn’t even report a prime number yet,
it’s still working. Things are bad. And I literally, have to kill the browser. That’s
bad. We don’t want to do that. Let’s look at good primes; this is using the HTML 5 Web
Workers API. We click “Go” and we see primes coming in, things are still responsive, we
can still interact with the browser, and it’s very fast and responsive. Very cool! Now,
all these pieces come together, again, that’s what’s so cool. You’re going to see these
things don’t just live in a box. You’re going to–I want to show a really cool sample that
brings together HTML 5 video, and the Canvas tag, and Web Workers to do something that
literally, a year ago, if you’d ask me, “Would people do this on the web?” I’d say, “You’re
crazy.” But someone did it on the web and it works well. Okay. So what you’re looking
at here, is I’m going to play some video in JavaScript running on a Web Worker, is going
to get the pixels from the HTML 5 video; process where people are moving; and then use the
Canvas tag to draw bounding boxes over them. So you’re going to see someone walk across.
And you see the green and red, that is doing bounding box calculations. It’s figuring out
where people are. I just think that’s amazing. As someone moves, it’s been motion-tracking.
And of course, it could stay responsive as the video comes through by using Web Workers.
All right, so now that you’ve seen this being used, let’s actually look at using Web Workers
in your code. So the first thing is, you have to put all of your Workers into a separate
file, and you ìinstantiateî a new Worker like this. The thing to know about Workers
is they need to be siloed from the rest of your JavaScript because they will run in a
different context. They can’t access the screen. So they can just do work. They can–they actually
can do XML HTTP request calls. They can access the database, and you actually pass the data
back and forth for them to work with, and they hand you the data back. And the way you
do that is you set on message events. So over on the browser side, you see worker.onmessage
and you give a function that will get called when the worker talks back to you. And here
we are grabbing the event and I’ll put in the data. You could imagine taking that data,
such as, from that video tracking, and that data may be, here are the coordinates of where
the person is. And you could use–and then use the Canvas tag to draw on the video. Over
on the Worker side, you just provide JavaScript. Here we are, we have a find primes method.
We would plug a prime number algorithm in here. And once we found a prime number, we’re
going to send the message over to the JavaScript side, and post message is a magic method that
lives, that allows you to send something over to the browser. So it’s really straightforward.
You just sort of toss these events back and forth. And this one is well-supported as well
on Opera, and it’s only on the mobile edition, but Web Workers are already across Chrome,
Firefox, and Safari. So that brings us to the end of our training today. This is really
just–just the start. Like I said, HTML 5 has all sorts of interesting things. You got
a taste of that with seeing some of the mark-up of the YouTube prototype. And so I encourage
you to begin working with these things, create really cool demos and sites. And thank you
so much for your time.


Add a Comment

Your email address will not be published. Required fields are marked *