Introduction

In this part of the tutorial, you will discover interactive examples (you will be able to change the code and see the results interactively) of HTML features. Some APIs or features are not yet available on every web browser, so you may need to try switch from one browser to another in order to run all the examples.

A link to an interesting example that shows how to generate automatically a table of content from the new structural elements. Just a few lines of KavaScript to include in your document and you are done ! http://blog.tremily.us/posts/HTML5_outlines/

Selecting files and directory

Use of the new "multiple" attribute for selecting several files at a time. In addition, uses the HTML5 File API for reading pictures and preview them : http://jsbin.com/abelak/edit#html,live

Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit#html,live Note that in the example the attribute is named "webkitdirectory" instead of "directory" as this is still an experimental implementation.

Instant preview of dropped images

Same example but this time we added two input fields : one for selecting multiple files (<input type="file" multiple/>) and one for selecting a directory (Webkit only). Notice that both dropped files or selected files can be processed by the same piece of code for instant preview : http://jsbin.com/orurip/11/edit#html,live

Stack canvases in layers

This example shows how we create two canvases one on top of another. Mouse draws in the canvas at the back, while the mouse position is displayed in the front canvas. Each the mouse moves, the front canvas is cleared before redrawing the mouse position, while the back canvas remains intact. Try it : http://jsbin.com/ogehin/2/edit#html,live

Draw a canvas into other canvases (use of drawImage with a canvas instead of an image)

Access pixels inside a canvas

The Pixstatic library uses canvases content to apply filters to images. They draw images in a canvas, then apply filters, then getCanvas content back to the image src. See : http://briangrinstead.com/canvasslides/photos4.html for a demonstration + link to the pixstatic lib.

Canvas drawing modes

Canvas modes are "global" settings that decide how the things you draw will be merged with the actual canvas content. Default is "added" : you draw a red line, result will be a red line ! Some modes are very useful like "destination-out" that makes transparent eveything you draw : draw a red line, il will erase the canvas with the shape of the line !

Rotating video : http://jsbin.com/unaqej/4/edit#html,live , this example draws in real time each video frame into a canvas, rotate the canvas,draw again into another canvas. The video and first canvas are offscreen, only the last destination canvas is visible.

Video special effects : incrustation / blue screening

Most of these special effects consist in drawing the current image from the <video> element into a <canvas>, then grab the canvas content, modify it in real time, then draw in another canvas or set the canvas content as the source of an <img>.

Take a snapshot from the live webcam stream

Other demos

The paint program proposed in the "geek path" of this tutorial shows a Paint Program in which you can paint with your live picture coming from the webcam stream while sending it through WebSockets to other people using the program at the same time : http://mainline.essi.fr

Generate synthetic sound

Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)

Chrome latest of Safari nightly build only !

Nice demo (with downloadable sources) by master students from the university of Nice, France. This demo takes some time for loading a song (about 1 minute if slow bandwith, take your time...), then displays real time animation based on the analysis of the sound + adds reverb and delay effects. : http://goo.gl/92REu.

Real time mixing 12 tracks at the same time

A very impressive demo. Loads in Ajax 12 sound files, then mixes them using different audioContext nodes (for panning, volume, etc.). Takes a long time to load, if slow bandwidth, try this at home ! http://kevincennis.com/mix/

WebSockets

In order to test how WebSockets work, you need a WebSocket server and some code on the server. Some examples run on a very simple online WebSocket server and do not need any installation.

Check if your browser supports WebSockets

Simple example

Use the "view plain menu" in the top left of the small windows that shows hightlighted code below, copy the source in a testWebSocket.html file, open it in your browser. It will send a message to html5rocks.websocket.org/echo (WebSocket server that echos messages it receives) and display some alerts to check if WebSockets are supported, if the message has been correctly sent or received as an echo.

High level library over WebSockets

A more complete example involving real use cases is proposed in the "advanced tutorial for geeks" : A multi-participant Paint in HTML5 that proposes to install the NodeJS server + some additional modules that ease the development of multi-participant applications over WebSockets. This tutorial uses the NowJS library that provides ditributed JavaScript objects + session and group management over WebSockets.

Popular libraries for NodeJS, like socket.io, propose fallback mecanisms in case the web browser used by a participant does not support WebSockets (while your code remains unchanged, the lib will switch from WebSockets to Flash WebSockets or Ajax Long Calling...), handle deconnexions, etc.

NowJS is built upon socket.io and proposes remote function/method calls and shared objects between client and server code. Such libraries dramatically reduce the amount of code necessary to write classic use cases for multi-participant sofware.

A real time action game that uses WebSockets, canvas, Box2D.js for physics

Developped by master students from University of Nice, France, during the HTML5 course. Use NodeJS + socket.io + NowJS + Bow2D.js. The game uses the Box2D.js lib for physic simulation (same used by Angry Birds) both on client and server side. A NodeJS Server application written in JavaScript is doing all physics computations and clients use the same library locally. When messages take too long to arrive to clients, objects follow predicted trajectories. Two players can play at the same time, others are spectators. try it there : http://futchball.madjawa.net/Sources downloadable from game page.

Mobile devices: using gestures

Device Orientation and Acceleration

Beware : all following examples must be run on a device with an orientation sensor and/or with an accelerometer. Furthermore, Chrome/Safari and Mozilla supports these API, Opera mobile not yet at the time of this writing. Users of old Chrome versions (old Androids) may be unable to run the examples too.

Basic example that displays the euler angles when you change the orientation of a device that supports the orientation API: http://jsbin.com/ozatid/3/edit