Embedding user media using HTML5 and gUM

This blog is about how can we read the usermedia like webcam,microphone… using HTML5 gUM

Unlike many of the APIs that are erroneously called “HTML5”, there’s an excuse with getUserMedia – it started life as the HTML5 <device> element before becoming renamed and then hived off to the W3C’s WebRTC suite of specifications.

gUM (as we shall now call it) allows access to a user’s camera and microphone. I mentioned that it’s part of the webRTC suite of specifications, which will enable peer-to-peer in-browser video conferencing. As gUM has other uses, too, it’s separated out.

Camera access is implemented in Opera 12 final on Android, in Opera Desktop Labs and in Google Chrome Canary builds. Neither Opera nor Chrome yet implements microphone access.

The specification is still being worked on, so Opera and Webkit have different syntaxes, but a small JavaScript snippet called The gUM Shield can normalise those –Thanks to getUserMedia.

Once video is streaming from the device, it can be made the source of a <video> element, which can be positioned off-screen if necessary, and then copied into <canvas> and manipulated as required. Paul Neave’s HTML5 webcam toy copies the streaming data into WebGL in order to manipulate it .

gUM goes a long way to giving web apps the same functionality as native apps. Trying Neave’s gUM and WebGL demo on Opera Mobile 12 feels as responsive and snappy as platform-specific apps. As the functionality becomes widespread in production browsers, I predict lots of web-based QR code-readers and augmented reality apps.Image