imclab / demos-html5-realtime

HTML5 demos of clients interacting with each other in real-time

What?

These are small demos using two or more (browser) clients interacting with each other in real time. Most demos have a remote and a receiver. The remote is used as a "remote control" to control what's going on on the receiver. These demos does show some new and experimental parts in browsers using native implementations so each demo might require different browser versions / experimental browser builds.

Getting started

For clients to communicate with each other most demos rely on a WebSocket connection. Iow; a server is needed. These demos come with a very simple server which uses ws for WebSockets so Node.js is needed.

Installation:

• Download and install Node.js 6.x or later
• Install ws: npm install ws

Starting the server:

• In the demos-html5-realtime directory: cd www
• Start the server: node server.js
• The server should now be running at: http://localhost:8080/

Enable WebSockets

These demos use native WebSockets in modern browsers. At the time of writing, WebSockets are implemented or available in most modern browsers but due to a security issue they are disabled in some browsers:

Opera 11.xx (desktop) and Opera Mobile 11.xx:

In the address bar, write opera:config and then go to User Prefs. Set Enable WebSockets to true.

FireFox 4.x:

In the address bar, write about:config and then set network.websocket.enabled to true. Do also set to network.websocket.override-security-block to true.

Chrome:

Should be enabled by default.

Safari 5.x:

Should be enabled by default.

IOS 4.2:

Should be enabled by default.

IE9:

IE has no support for WebSockets but the IE team has released a prototype which will extend IE with WebSockets.

Enable Device APIs

Different Device APIs are fairly new and just starting to occur in browsers. Some of these demos rely on beta and lab releases so do expect specific browser versions to run some of these demos. Please see the description of each demo if any specific browsers or configuration has to be used or performed.

Opera Mobile 12

Opera Mobile 12 for Android has native camera access and orientation events.

Firefox Mobile Nightly

Firefox Mobile nightly has Vibration API implemented.

Demos

These are the current demos:

Demo I - Simple chat:

A very simple chat client just passing messages between attached clients. Should be able to run in all WebSocket enabled browsers.

Demo II - Instant Camera:

A remote / receiver demo based on access to the camera on the device. The remote will display the video from the camera in a HTML5 video tag on the device which acts as a remote. A snapshot can then be taken on the remote device by clicking on the video and the snapshot will instantly be transferred to the receiver and displayed.

Screencast: http://www.youtube.com/watch?v=jqXo-AEVhK4

NOTE I: This demo requires the Opera Mobile 12 for Android which gains native access to the web camera. WebSockets must be enabled as described above in this document.

NOTE II: To be able to grab a image from the video stream and transfer it over the wire a security change must be applied to the browser. In the address bar, write opera:config, select Security Prefs and set Allow Camera to Canvas Copy.

Demo III - Remote Rotation:

A remote / receiver demo based on orientation events in a device. The remote will capture the orientation events from a device and transfer these over a WebSocket to the receiver and create a rotating image in the receiver. The image in the receiver will rotate depending upon how the remote is rotated.

Screencast: http://www.youtube.com/watch?v=x2T4BJwPRnQ

NOTE: This demo requires the Opera Mobile 12 for Android which gains native access to orientation events. WebSockets must be enabled as described above in this document.

Demo IV - TV Remote:

A remote / receiver demo where a remote (handheld) device with touch events control playback, volume and switching between videos on a receiving device. Touch and click events are captured on the remote device and transferred trough a WebSocket to the receiving device.

Click the screen on the remote to start and stop playback. Swipe up to increase the volume. Swipe down to decrease the volume. Swipe to the right to switch to the next video and swipe to the left to switch to the previous video.

Screencast: http://www.youtube.com/watch?v=3e18_qX8vok

NOTE: This demo requires a device with touch events to act as a remote. The receiver must be able to play HTML5 video and have support for Ogg Theora. Both devices need WebSockets enabled.

Demo V - Remove Vibration:

A remote / receiver demo where a remote (handheld) device with support for device orientation acts as remote to trigger the Vibration API in a receiver (handheld) device. Shake the remote device and the receiver device will vibrate according to the shaking...

NOTE I: This demo requires the Firefox mobile nightly to act as the receiving part.