---
title: "Camera and Microphone Access with HTML5"
description: "Plugin-free access to camera/microphone with HTML5! Welcome to the post-flash revolution. Practical notes and code examples."
url: "https://h3manth.com/scribe/camera-and-microphone-access-with-html5/"
canonical_url: "https://h3manth.com/scribe/camera-and-microphone-access-with-html5/"
markdown_url: "https://h3manth.com/scribe/blog/camera-and-microphone-access-with-html5.md"
publishDate: "2012-07-01T00:00:00.000Z"
author: "Hemanth HM"
category: "javascript"
tags: ["javascript","html5"]
word_count: 161
reading_time_minutes: 1
x_markdown_tokens: 473
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Camera and Microphone Access with HTML5

> Plugin-free access to camera/microphone with HTML5! Welcome to the post-flash revolution. Practical notes and code examples.

Yes, Plugin-free access to camera/microphone with HTML5!

Welcome to the post-flash revolution aka smartphone development. Flash isn't even available on Android 4.1.

AFAIK Ericsson labs were first to experiment on handling devices with HTML5, now with the `navigator.getUserMedia` we can handle both camera and microphone devices with ease.

It's important to note that this works with Chrome 18.0.1009.0 with the **--enable-media-stream** flag set, Firefox nightly and Opera 12.

In Chrome type `chrome://flags` in your address bar. Find 'Enable MediaStream' and enable it.

**Simple code to capture voice and video:**

```javascript
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

window.URL = window.URL || window.webkitURL;

navigator.getUserMedia({audio: true, video: true}, function(stream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(stream);
}, function(e) {
  console.log(e);
});
```

**DEMOS:**

- [Photo booth](http://html5-demos.appspot.com/static/getusermedia/photobooth.html)
- [Live Effects](http://neave.com/webcam/html5/)
- [Augmented Reality](http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/)
- [WebGL Live TV](http://learningthreejs.com/data/live-video-in-webgl/)
- [Instant Camera](http://people.opera.com/danield/webapps/instant-camera/)
- [Explode Video](http://people.opera.com/danield/html5/explode/)

This was much awaited HTML5 feature from most of devs, hope this will be shipped as a default API soon! Kudos HTML5!