在 HTML5 中捕获音频和视频

Capture Audio and Video in HTML5 机翻

原文：Capture Audio and Video in HTML5 - HTML5 Rocks

介绍

长期以来，捕获音频和视频的能力一直是Web开发的圣杯。多年来，您必须依靠浏览器插件（Flash或Silverlight）来完成工作。加油！

HTML5来拯救。这可能并不明显，但HTML5的兴起带来了对设备硬件的访问激增。地理位置 （GPS）、定向 API（加速度计）、WebGL（GPU）和 Web 音频 API（音频硬件）就是完美的例子。这些功能非常强大，并公开了位于系统基础硬件功能之上的高级JavaScript API。

本教程介绍 navigator.mediaDevices.getUserMedia（），它允许 Web 应用访问用户的摄像头和麦克风。

通往 API 之路getUserMedia()

如果您不知道它的历史，那么通往API的道路就是一个有趣的故事。getUserMedia()

在过去几年中，媒体捕获 API 的几种变体不断发展。许多人认识到需要在网络上访问本机设备，但这导致许多人提出了新的规范。事情变得如此混乱，以至于W3C最终决定成立一个工作组。他们的唯一目的是什么？理解疯狂！设备和传感器工作组的任务是整合和标准化大量提案。

以下是2011年发生的事情的摘要。

第 1 轮：HTML 媒体捕获

HTML Media Capture是该小组首次在网络上标准化媒体捕获。它将重载参数并为参数添加新值。<input type="file">accept

如果您想让用户使用网络摄像头拍摄自己的快照，则可以使用：capture=camera

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#89bdff"><input</span> <span style="color:#bdb76b">type</span><span style="color:#ffffff">=</span><span style="color:#65b042">"file"</span> <span style="color:#bdb76b">accept</span><span style="color:#ffffff">=</span><span style="color:#65b042">"image/*;capture=camera"</span><span style="color:#89bdff">></span></code></span></span>

相当不错，对吧？从语义上讲，这很有道理。这个特定的API不足之处在于能够执行实时效果，例如将实时网络摄像头数据呈现到并应用WebGL过滤器。HTML 媒体捕获仅允许您及时录制媒体文件或拍摄快照。<canvas>

支持

• Android 3.0 浏览器 — 首批实现之一。观看此视频，了解其实际应用。
• 谷歌浏览器安卓版 （0.16）
• 火狐移动版 10.0
• iOS 6 Safari 和 Chrome（部分支持）

回合 2：设备元件

许多人认为HTML媒体捕获太有限，因此出现了一个新的规范，支持任何类型的（未来）设备。毫不奇怪，该设计需要一个新元素，即<设备>元素，它成为的前身。getUserMedia()

Opera是最早基于该元素创建视频捕获初始实现的浏览器之一。不久之后（确切地说是同一天），WhatWG决定放弃标签，转而支持另一个新兴的，这次是一个名为的JavaScript API。一周后，Opera推出了新版本，其中包括对更新规范的支持。那年晚些时候，微软加入了这个行列，发布了一个支持新规范的IE9实验室。<device><device>navigator.getUserMedia()getUserMedia()

下面是这样的：<device>

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#89bdff"><device</span> <span style="color:#bdb76b">type</span><span style="color:#ffffff">=</span><span style="color:#65b042">"media"</span> <span style="color:#bdb76b">onchange</span><span style="color:#ffffff">=</span><span style="color:#65b042">"</span><span style="color:#ffffff">update</span><span style="color:#ffffff">(</span><span style="color:#e28964">this</span><span style="color:#ffffff">.</span><span style="color:#ffffff">data</span><span style="color:#ffffff">)</span><span style="color:#65b042">"</span><span style="color:#89bdff">></device></span>
<span style="color:#89bdff"><video</span> <span style="color:#bdb76b">autoplay</span><span style="color:#89bdff">></video></span>
<span style="color:#89bdff"><script></span>
  <span style="color:#e28964">function</span><span style="color:#ffffff"> update</span><span style="color:#ffffff">(</span><span style="color:#ffffff">stream</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
    document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">querySelector</span><span style="color:#ffffff">(</span><span style="color:#65b042">'video'</span><span style="color:#ffffff">).</span><span style="color:#ffffff">src </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> stream</span><span style="color:#ffffff">.</span><span style="color:#ffffff">url</span><span style="color:#ffffff">;</span>
  <span style="color:#ffffff">}</span>
<span style="color:#89bdff"></script></span></code></span></span>

支持：

不幸的是，没有已发布的浏览器包含 。少一个需要担心的 API。 不过，确实有两件很棒的事情：<device><device>

• 这是语义上的。
• 它易于扩展，可以支持音频和视频设备以外的更多内容。

深吸一口气。这些东西移动得很快！

第三回合：WebRTC

该元素最终走上了渡渡鸟的道路。<device>

由于WebRTC（Web实时通信）工作，寻找合适的捕获API的步伐加快了。该规范由 Web 实时通信工作组监督。Google，Opera，Mozilla和其他一些公司都有实现。

getUserMedia()与WebRTC相关，因为它是进入该组API的网关。它提供了访问用户的本地摄像头和麦克风流的方法。

支持：

getUserMedia()自Chrome 21，Opera 18和Firefox 17以来一直可用。该方法最初提供了支持，但这已被弃用。Navigator.getUserMedia()

您现在应该使用 navigator.mediaDevices.getUserMedia（） 方法，该方法受到广泛支持。

立即开始

使用，您终于可以在没有插件的情况下进入网络摄像头和麦克风输入。摄像机访问现在是一个呼叫，而不是安装离开。它直接烘焙到浏览器中。兴奋了吗？getUserMedia()

特征检测

特征检测是对是否存在以下各项的简单检查：navigator.mediaDevices.getUserMedia

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#e28964">function</span><span style="color:#ffffff"> hasGetUserMedia</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
  <span style="color:#e28964">return</span> <span style="color:#ffffff">!!(</span><span style="color:#ffffff">navigator</span><span style="color:#ffffff">.</span><span style="color:#ffffff">mediaDevices </span><span style="color:#ffffff">&&</span><span style="color:#ffffff"> navigator</span><span style="color:#ffffff">.</span><span style="color:#ffffff">mediaDevices</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getUserMedia</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#e28964">if</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">hasGetUserMedia</span><span style="color:#ffffff">())</span> <span style="color:#ffffff">{</span>
  <span style="color:#aeaeae"><em>// Good to go!</em></span>
<span style="color:#ffffff">}</span> <span style="color:#e28964">else</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
  alert</span><span style="color:#ffffff">(</span><span style="color:#65b042">"getUserMedia() is not supported by your browser"</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span></code></span></span>

访问输入设备

要使用网络摄像头或麦克风，您需要请求权限。to 参数是一个对象，用于指定要访问的每种类型的媒体的详细信息和要求。例如，如果要访问网络摄像头，则参数应为 。要同时使用麦克风和摄像头，请通过 ：getUserMedia(){video: true}{video: true, audio: true}

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#89bdff"><video</span> <span style="color:#bdb76b">autoplay</span><span style="color:#89bdff">></video></span>

<span style="color:#89bdff"><script></span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> constraints </span><span style="color:#ffffff">=</span> <span style="color:#ffffff"