HTML and CSS Reference
In-Depth Information
The real benefit of using the
download
attribute is when working with the
canvas
element or binary objects
(BLOB) and leveraging the File System API. This will allow users a way to download the content within your ad
that could be created by the user. A very good example of this can be found at
http://html5-demos.appspot.com/
WebRTC
Web Real-Time Communications (WebRTC) is the initiative for using communication means like camera and
microphone access without the need of third-party plug-ins like Flash. The mission is to use the browser natively and
leverage simple JavaScript APIs and HTML5 to create interactive and live experiences. WebRTC allows for video chats,
recorders, and much more. Its core features under the hood use echo-cancelation, noise reduction, automatic gain
control, and network management. This is really useful if you want a user to upload their own personalized video of
your brand or service or allow a user to control features of an ad unit using their microphone. Give users real-time
feedback on how they can interact with your ad content. Think about the possibilities of using real-time capture of
your audience and including them as part of the ad experience. Capture the video onto a
canvas
element or even
apply CSS transformations and animations. Anything is possible! Listing 12-8 shows how to work with WebRTC by
using the getUserMedia API.
Listing 12-8.
WebRTC Example
<html>
<head>
</head>
<body>
<video autoplay></video>
</body>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.getUserMedia({audio: true, video: true}, function(stream) {
document.querySelector('video').src = window.URL.createObjectURL(stream);
}, function(e) {
console.log(e);
});
</script>
</htmls>
In Listing 12-8, you can see you create an HTML5
video
element, and the rest of the magic happens in the
JavaScript API. The first thing you do in the JavaScript is request the getUserMedia API through the browser's
navigator object. You do this by passing the audio and video into the first parameter and creating a method to handle
the stream in the second parameter. You handle the stream by grabbing a reference to your
video
object in your
document and setting the source of the video to the stream through the
createObjectURL
method. The first thing
you'll notice from Figure
12-9
is that you prompt the user and ask to use their camera. Once they “allow,” you can
show the video stream. (I even pointed out what the video's source is set to!)
