background preloader

Input / accept

Facebook Twitter

Capturing Audio & Video in HTML5. Introduction Audio/Video capture has been the "Holy Grail" of web development for a long time.

Capturing Audio & Video in HTML5

For many years we've had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. This tutorial introduces a new API, navigator.getUserMedia(), which allows web apps to access a user's camera and microphone. The road to getUserMedia() If you're not aware of its history, the way we arrived at the getUserMedia() API is an interesting tale. Several variants of "Media Capture APIs" have evolved over the past few years. I'll try to summarize what happened in 2011... Round 1: HTML Media Capture HTML Media Capture was the DAP's first go at standardizing media capture on the web. If you wanted to let users take a snapshot of themselves with the webcam, that's possible with capture=camera: Recording a video or audio is similar: Kinda nice right?

Support: Take a breath. Form-based Device Input and Upload in HTML. Status of this Document This document is a submission to the World Wide Web Consortium from Cisco Systems (see Submission Request, W3C Staff Comment).

Form-based Device Input and Upload in HTML

This draft extends an implemented protocol for the Internet World Wide Web community. Distribution of this draft and the use of the information described herein is unlimited. This draft is intended for submission to the World Wide Web Consortium to be considered as a proposed recommendation. This document should be referred to as part of the "device-upload" submission. This document is a NOTE made available by W3C for discussion only. Copyright Notice © Copyright Cisco Systems 1999. For terms and conditions, see IPR section of the Submission Request. Contents Abstract Currently, HTML forms allow the producer of the form to request information, including files of data, from the operator using the form. Introduction Extensions. Android 3.0 Honeycomb is first to implement the Device API. I fired up the newly released Android 3.0 SDK to run some tests and found they’ve implemented part of the long-awaited Device API (aka the Media Capture API).

Android 3.0 Honeycomb is first to implement the Device API

From your browser you can now upload pictures and videos from the camera as well as sounds from the microphone. The returned data should be available to manipulate via the File API (although I haven’t yet tested this). I made a short video demo with some explanation: Here’s the code so you can play around with it for yourself!

<form enctype="multipart/form-data" method="post"><h2>Regular file upload</h2><input type="file"></input><h2>capture=camera</h2><input type="file" accept="image/*;capture=camera"></input><h2>capture=camcorder</h2><input type="file" accept="video/*;capture=camcorder"></input><h2>capture=microphone</h2><input type="file" accept="audio/*;capture=microphone"></input></form> HTML input accept Attribute.