Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use HTML5 to capture audio and video information". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In HTML 5, there are many API that can access hardware devices, such as Geolocation API of GPS devices, Orientation API of accelerometer devices, WebGL API of GPU devices, Web Audio API of audio playback devices, and so on. These API are very powerful because developers can access the underlying hardware devices directly by writing JavaSccript script code.

This article introduces a new API that gives Web applications the ability to access users' cameras and microphone devices by using the navigatior.getUserMedia () method.

The Development History of Technology for capturing Media data

In the past few years, there has been a need to access client-side local devices in Web applications, so the W3C organization decided to organize a DAP (Device APIS POLICY) working group to develop a unified standard for the implementation of this requirement.

Let's take a look at what happened in 2011:

Capture media data in HTML page file

The first standard to be developed by the DAP working group is how to capture media data in the HTML pages of Web applications. They decided to overload the input element () of type file and add a new attribute value for the accept attribute.

If the developer wants to enable users to take pictures through the camera, they can write the code shown below.

Copy the code

The code is as follows:

The code for recording video data and audio data is similar:

Copy the code

The code is as follows:

In this code, you only need to use the file control (the input element of type file) to complete the function of taking pictures or recording media data. However, due to the lack of some related requirements in these codes (such as rendering captured video data in canvas elements, or applying WEBGL filters to captured video data), it has not been widely used by developers.

Support browsers:

Android 3.0 browser

Chrome for Android (0.16)

Firefox Mobile 10.0

Device element

If you use the file control, the ability to capture media data and process it is very limited, so a new standard has emerged that can support any device. The standard uses the device element.

The Opera browser was the first browser to capture video data through the device element. On almost the same day, the WhatWG organization decided to use the navigator.getUserMedia () method to capture media data. A week later, Opera launched a new browser that supports the navigator.getUserMedia () method. Later, the Microsoft tool released an IE 9 browser that supports this approach.

The use of the device element is as follows.

Copy the code

The code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.