HTML5 Tutorial

Introduction

We split this tutorial in two paths that eventually will share a common part.

1. One path for people mostly interested in discovering HTML5 features, playing with small bits of HTML/JavaScript code, tweak them, see interactively the results... No real expertise is required.
2. Another path that present step by step a Paint application, starting from a very simple project to a full multi-participant application that uses WebSockets and transfert pictures from a real live video stream (your webcam).

The second path will need you to download some files, have a minimum expertise in JavaScript (with a bit of jQuery), and will make you install the (small) NodeJS web server on your machines with a few additional modules. You will run and study an application that involves WebSockets real time transfer, and learn how to set up a WebSocket server as well.

Discovery path

We prepared simple examples, organized by category and pasted in the online HTML/Javascript IDE jsbin.com so that you can interact with the sample codes and see the result of your modifications rapidly. Some of them are variation of well known samples from popular sites.

• Link to this tutorial : HTML5 discovery tutorial

Path for geeks: multi-participant Canvas + WebSockets + NodeJS complete application

You can try the application we will study here : http://mainline.essi.fr

In order to see the webcam stream you will need a browser that supports it. See how to get a browser that supports the getUserMedia API.

This tutorial is divided in several steps. You can go quickly through steps 1 to 6 if you are fluent in JavaScript. Steps 7 and 8 deal with WebSockets, you will need to install the NodeJS web server (with modules for adding WebSockets support) in order to run the application on your computer.

• Link to this tutorial : multi-participant Paint in HTML5 !