首页 > 编程 > HTML > 正文

使用HTML5捕捉音频与视频信息概述及实例

2019-10-26 17:42:03
字体:
来源:转载
供稿:网友

本文概述
长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。
在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。
本文介绍一种新的API,该API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力。

捕捉媒体数据的技术发展历史
在过去几年里,开始出现了在Web应用程序中访问客户端本地设备的需求,因此,W3C组织决定组织一个DAP(Device APIS POLICY)工作小组,来为该需求的实现制定一个统一的标准。
接下来让我们来看看在2011年发生了哪些事情:

在HTML页面文件中实现媒体数据的捕捉
DAP工作小组的第一个要制定的标准就是如何在Web应用程序的HTML页面中实现媒体数据的捕捉。他们决定重载类型为file的input元素(<input type="file">),并且为accept属性添加一个新的属性值。
如果开发者想实现用户通过摄像头进行拍照的功能,可以书写如下所示的代码。

复制代码
代码如下:
<input type="file" accept="image/*;capture=camera">

录制视频数据与音频数据的代码与之类似:

复制代码
代码如下:
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

在这些代码中,只需使用file控件(类型为file的input元素)即可完成拍照或录制媒体数据的功能。但是在因为这些代码中尚缺乏一些实现与之相关的需求(例如在canvas元素中渲染捕捉到的视频数据,或者对捕捉到的视频数据应用WEBGL滤镜)的能力,所以没有得到开发者的广泛应用。
支持浏览器:
Android 3.0浏览器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
如果使用file控件,则捕捉媒体数据后对其进行处理的能力是非常有限的,所以出现了一种新的可支持任何设备的标准。该标准使用device元素。
Opera浏览器是第一个通过device元素实现视频数据捕捉的浏览器。几乎在同一天,WhatWG组织决定使用navigator.getUserMedia()方法来捕捉媒体数据。一个星期后,Opera推出一个新的支持navigator.getUserMedia()方法的浏览器。后来,Microsoft工具推出支持该方法的IE 9浏览器。
device元素的使用方法如下所示。

复制代码
代码如下:
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选