Sales:
(847)-707-9621

Support:
(847)-798-4024

blog
My Cart

HTML5 Media Capture: Media capture in mobile browsers

What is HTML5 Media capture?

Definition (W3C)

The HTML Media Capture specification defines an HTML form extension that facilitates user access to a device’s media capture mechanism, such as a camera, or microphone, from within a file upload control.

Introduction
Media Capture is one of the most interesting features in web applications, especially for mobile devices. It allows you to access the camera and the microphone of the device. Surprisingly capturing media on the spot is quite a new thing for browsers in general, until recently always being delegated to browser plugins such as Flash or Silverlight.

HTML5 has brought a surge of access to device hardware. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system’s underlying hardware capabilities.

HTML Media Capture supported browser:

  1. Safari and Chrome Mobile for iOS 6+
  2. Chrome Mobile for Android OS 3+
  3. Firefox Mobile for Android OS 3+
  4. Opera 16 for Android OS 3+

HTML Media Capture Example

The examples demonstrate how to give hints that it is preferred for the user to capture media of a specific MIME type using the media capture capabilities of the hosting device. Both simple declarative examples using an HTML form, as well as a more advanced example including scripting are presented.

Capture Image: HTML for image capturing:

<input type=”file” accept=”image/*” capture>

<input type=”file” accept=”image/*” capture=”camera”>

image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Capture Video: HTML for video capturing:

<input type=”file” accept=”video/*” capture>

<input type=”file” accept=”video/*” capture=”camcorder”>

 

video

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Capture Audio: HTML for audio capturing:

<input type=”file” accept=”audio/*” capture>

<input type=”file” accept=”audio/*” capture=”microphone”>

 

audio

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Benefits

-          Easy to Implement- User just need to add the defined tags of media capture and no need to write long codes to run exe or other installation files for camera.

-          Elements can support: Support images, audio and video capturing via phone or pc camera.

-          Add on: No need to install extra software for calling/commanding attached camera.

-          User friendly- Front end user just needs to click on “capture” button to start the camera or they can upload the images/video from the phone/PC.

-          No need of separate app –There will be no need to build an apps to implement this functionality.

References

http://www.w3.org/TR/html-media-capture/

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

http://dev.opera.com/articles/view/media-capture-in-mobile-browsers/

http://anssiko.github.io/html-media-capture/

http://daker.me/2014/02/on-using-the-html-media-capture-in-mobile-browsers.html

Leave a Reply

CAPTCHA Image
*

Current day month ye@r *

To Top
|   Copyright © 2017 Avion Technology.
Designed & Developed by: Avion Technology Inc.