Overview and examples of capturing audio and video information using HTML5

This article mainly introduces the overview and examples of using HTML5 to capture audio and video information. It has certain reference value. Now I share it with you. Friends in need can refer to

Audio and video information Capture has always been a difficulty in web development. Here we introduce a new API that allows web applications to have the ability to access the user's camera and microphone devices by using the navigatior.getUserMedia() methodOverview of this article

For a long time, capturing audio and video information has been a difficulty in Web development. For many years, we have relied on browser plug-ins to fulfill this need.
In HTML 5, there are many APIs that can access hardware devices, such as the Geolocation API that accesses GPS devices, the Orientation API that accesses accelerometer devices, the WebGL API that accesses GPU devices, the Web Audio API that accesses audio playback devices, etc. . These APIs are very powerful because developers can directly access the underlying hardware devices by writing JavaScript script code.
This article introduces a new API that allows web applications to have the ability to access the user's camera and microphone devices by using the navigatior.getUserMedia() method.
Technology Development History of Capturing Media Data
In the past few years, the need to access client local devices in web applications began to appear, therefore, the W3C organization decided to organize a DAP ( Device APIS POLICY) working group to develop a unified standard for the realization of this requirement.
Let's take a look at what happened in 2011:

Capturing media data in HTML page files
The first standard to be developed by the DAP working group is how Capture media data in HTML pages of web applications. They decided to overload the input element of type file () and add a new attribute value to the accept attribute.
If the developer wants to implement the function of users taking pictures through the camera, they can write the code as shown below.

Copy code

The code is as follows:

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

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

Copy code

The code is as follows:

<input type="file" accept="video/*;capture=camcorder"> 
<input type="file" accept="audio/*;capture=microphone">

In these codes, just use the file control (Input element of type file) can complete the function of taking pictures or recording media data. However, because these codes still lack the ability to implement some related requirements (such as rendering captured video data in canvas elements, or applying WEBGL filters to captured video data), they have not been widely used by developers. application.
Supported browsers:
Android 3.0 browser
Chrome for Android (0.16)
Firefox Mobile 10.0
device element
If you use the file control, capture the media data and process it Processing capabilities are very limited, so a new standard emerged that could support any device. This standard uses the device element.
Opera browser is the first browser to capture video data through the device element. Almost on 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, Microsoft Tools launched the IE 9 browser that supports this method.
The device element is used as follows.

Copy code

The code is as follows:

<device type="media" onchange="update(this.data)"></device> 
<video autoplay></video> 
<script> 
function update(stream) { 
document.querySelector(&#39;video&#39;).src = stream.url; 
} 
</script>

Supported browsers:
Unfortunately, no official version of the browser supports the device element so far.
WEBRTC
Recently, due to the emergence of WebRTC (Web Real Time Communication: Web real-time communication) API, media data capture technology has made great progress. Google, Opera, Mozilla and other companies are working hard to implement it in their browsers.
WebRTC API is an API closely related to the getUserMedia method, which provides the ability to access the client's local camera or microphone device.
Supported browsers:
So far, in the Chrome 18 version of the browser, WebRTC can be used after setting it in the chrome://flags page. In the Chrome 21 version of the browser, this API is used by default. , no more settings required. WebRTC API is supported by default in browsers above Opera 12 and Firefox 17.
Use getUserMedia method
By using the getUserMedia method, we can directly access the client's local camera device and microphone device without relying on plug-ins.
Detecting browser support
You can use the method shown below to detect whether the browser supports the getUserMedia method.

Copy code

The code is as follows:

function hasGetUserMedia() { 
//请注意:在Opera浏览器中不使用前缀 
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasGetUserMedia()) { 
alert('您的浏览器支持getUserMedia方法'); 
} 
else { 
alert('您的浏览器不支持getUserMedia方法'); 
}

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示：

复制代码

代码如下:

<video autoplay id="video"></video> 
<script> 
var onFailSoHard = function() { 
alert(&#39;设备拒绝访问&#39;); 
}; 
//不使用供应商前缀 
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { 
var video = document.getElementById(&#39;video&#39;); 
video.src = window.URL.createObjectURL(localMediaStream); 
//请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件 
video.onloadedmetadata = function(e) { 
//后续代码略 
}; 
}, onFailSoHard); 
</script>

在这段代码中,结合了video元素的使用。请注意我们没有使用video元素的src属性值,而是为video元素指定了一个引用媒体文件的URL地址,同时将代表了从摄像头中所获取到的视频数据的LocalMediaStream对象转换为一个Blob URL。
在这段代码中,同时为video元素使用autoplay属性,如果不使用该属性,则video元素将停留在所获取的第一帧画面处。
请注意：在Chrome浏览器中,如果只使用{audio:true},则引发BUG,在Opera浏览器中,同样不能使用audio元素。
如果你想让多个浏览器同时支持getUserMedia方法,请使用如下所示的代码：

复制代码

代码如下:

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia; 
var video = document.getElementById('video'); 
if (navigator.getUserMedia) { 
navigator.getUserMedia({audio: true, video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
}, onFailSoHard); 
} 
else { 
alert('您的浏览器不支持getUserMedia方法'); 
}

安全性
在有些浏览器中,当调用getUserMedia方法时,显示一个提示窗口,询问用户是否允许或拒绝访问他们的摄像头或麦克风。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法将video元素中的某一帧画面输出到canvas元素中。当然,既然我们已经将捕捉到的用户摄像头中的图像信息输出到video元素中,当然也可以将图像信息通过video元素输出到canvas元素中,即实现实时拍照功能,代码如下所示。

复制代码

代码如下:

<video autoplay></video> 
<img  src="/static/imghwm/default1.png"  data-src="" id="  class="lazy"   id="img"  alt="Overview and examples of capturing audio and video information using HTML5" ></img> 
<canvas style="display:none;" id="canvas" ></canvas> 
var video = document.getElementById(&#39;video&#39;); 
var canvas = document.getElementById(&#39;canvas&#39;); 
var ctx = canvas.getContext(&#39;2d&#39;); 
var localMediaStream = null; 
function snapshot() { 
if (localMediaStream) { 
ctx.drawImage(video, 0, 0); 
document.getElementById(&#39;img&#39;).src = canvas.toDataURL(&#39;image/png&#39;); 
} 
} 
video.addEventListener(&#39;click&#39;, snapshot, false); 
//不使用供应商前缀 
navigator.getUserMedia({video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
localMediaStream = stream; 
}, onFailSoHard);

应用CSS滤镜
目前为止,可以在Chrome 18以上版本的浏览器中使用CSS滤镜。
通过CSS滤镜的使用,我们可以对video元素中捕捉的视频添加各种图像滤镜效果。

复制代码

代码如下:

<style> 
#video3 { 
width: 307px; 
height: 250px; 
background: rgba(255,255,255,0.5); 
border: 1px solid #ccc; 
} 
.grayscale { 
-webkit-filter: grayscale(1); 
} 
.sepia { 
-webkit-filter: sepia(1); 
} 
.blur { 
-webkit-filter: blur(3px); 
} 
... 
</style> 
<video id="video" autoplay></video> 
<script> 
var idx = 0; 
var filters = [&#39;grayscale&#39;, &#39;sepia&#39;, &#39;blur&#39;, &#39;brightness&#39;, &#39;contrast&#39;, &#39;hue-rotate&#39;, 
&#39;hue-rotate2&#39;, &#39;hue-rotate3&#39;, &#39;saturate&#39;, &#39;invert&#39;, &#39;&#39;]; 
function changeFilter(e) { 
var el = e.target; 
el.className = &#39;&#39;; 
var effect = filters[idx++ % filters.length]; // loop through filters. 
if (effect) { 
el.classList.add(effect); 
} 
} 
document.getElementById(&#39;video&#39;).addEventListener(&#39;click&#39;, changeFilter, false); 
</script>

相关推荐：

html5+canvas动态实现饼状图步骤详解

HTML5声音录制/播放功能的实现代码

The above is the detailed content of Overview and examples of capturing audio and video information using HTML5. For more information, please follow other related articles on the PHP Chinese website!