Using Webcams for Product Presentations in HTML5

Abstract

The Media Capture and Streams API ("getUserMedia API") enables plug-in free webcam support in HTML5. This opens new ways of interacting with visualisations using open web standards. In this work, two techniques are proposed that employ the user's webcam for interactive product presentations on websites. The first technique tracks the user's face and uses its position to create the impression of a user-controlled rotation of a product by displaying a sequence of product images for different view points. The second technique uses photographs of a product with reflections of coloured patterns to render the user's webcam stream as a reflection in the product presentation. Thus, users in front of a webcam are able to see their virtual reflection in a picture of a real product in real time. Our implementation of two prototypes shows that it is technically possible to implement these features with HTML5 and JavaScript only.