HTML and CSS Reference
In-Depth Information
} else {
heading.textContent =
“Native web camera streaming is not supported in
¬ this browser!”;
}
</script>
Once you've done that, you can manipulate the video as you
please. Rich Tibbett wrote a demo that copies the video into
canvas (thereby giving you access to the pixel data), looks at
those pixels to perform facial recognition, and draws a mous-
tache on the face, all in JavaScript (see
Figure 4.7
).
FIguRE 4.7
Remy Sharp, with
a magical HTML5 moustache.
(Photo by Julia Gosling)
Norwegian developer Trygve Lie has made demos of
getUserMedia
that use Web Sockets (see Chapter 10) to send images from an
Android phone running the experimental Opera Mobile build to a
desktop computer. See
https://github.com/trygve-lie/demos-html5-
realtime
for the source code and a video demonstrating it.
Obviously, giving websites access to your webcam could create
significant privacy problems, so users will have to opt-in, much
as they have to do with geolocation. But that's a UI concern
rather than a technical problem.
Ta k i n g t h e c o n c e p t e v e n f u r t h e r, t h e r e i is a l is o a Pe e r - t o - Pe e r A P I
being developed for HTML, which will allow you to hook up your
camera and microphone to the
<video>
and
<audio>
elements
of someone else's browser, making it possible to do video
conferencing.
