在 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">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">:</span> <span style="color:#e28964">true</span><span style="color:#ffffff">,</span>
<span style="color:#ffffff">};</span><span style="color:#e28964">const</span><span style="color:#ffffff"> video </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">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">constraints</span><span style="color:#ffffff">).</span><span style="color:#ffffff">then</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">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </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:#89bdff"></script></span></code></span></span>

好。这到底是怎么回事呢？媒体捕获是 HTML5 API 协同工作的一个完美示例。它与您的其他HTML5伙伴和.请注意，您不会设置属性，也不会在元素上包含元素。您从网络摄像头为视频提供，而不是媒体文件的 URL。<audio><video>src<source><video>MediaStream

您还告诉 to ，否则它将冻结在第一帧。添加也像您预期的那样工作。<video>autoplaycontrols

设置媒体约束（分辨率、高度和宽度）

该参数 to 还可用于指定对返回的媒体流的更多要求（或约束）。例如，除了仅基本访问视频（例如），您还可以要求流为 HD：getUserMedia(){video: true}

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#e28964">const</span><span style="color:#ffffff"> hdConstraints </span><span style="color:#ffffff">=</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> width</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> min</span><span style="color:#ffffff">:</span> <span style="color:#3387cc">1280</span> <span style="color:#ffffff">},</span><span style="color:#ffffff"> height</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> min</span><span style="color:#ffffff">:</span> <span style="color:#3387cc">720</span> <span style="color:#ffffff">}</span> <span style="color:#ffffff">},</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">hdConstraints</span><span style="color:#ffffff">).</span><span style="color:#e28964">then</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">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> stream</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">});</span></code></span></span>

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#e28964">const</span><span style="color:#ffffff"> vgaConstraints </span><span style="color:#ffffff">=</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> width</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> exact</span><span style="color:#ffffff">:</span> <span style="color:#3387cc">640</span> <span style="color:#ffffff">},</span><span style="color:#ffffff"> height</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> exact</span><span style="color:#ffffff">:</span> <span style="color:#3387cc">480</span> <span style="color:#ffffff">}</span> <span style="color:#ffffff">},</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">vgaConstraints</span><span style="color:#ffffff">).</span><span style="color:#e28964">then</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">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> stream</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">});</span></code></span></span>

如果当前所选摄像机不支持分辨率，则会被拒绝，并且系统不会提示用户授予访问其摄像机的权限。getUserMedia()OverconstrainedError

有关更多配置，请参阅约束 API。

选择媒体源

该方法提供有关可用输入和输出设备的信息，并可以选择摄像头或麦克风。（该 API 已被弃用。navigator.mediaDevices.enumerateDevices()MediaStreamTrack.getSources()

此示例使用户能够选择音频和视频源：

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#e28964">const</span><span style="color:#ffffff"> videoElement </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:#e28964">const</span><span style="color:#ffffff"> audioSelect </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">"select#audioSource"</span><span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> videoSelect </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">"select#videoSource"</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">enumerateDevices</span><span style="color:#ffffff">()</span><span style="color:#ffffff">.</span><span style="color:#e28964">then</span><span style="color:#ffffff">(</span><span style="color:#ffffff">gotDevices</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">then</span><span style="color:#ffffff">(</span><span style="color:#ffffff">getStream</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">catch</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleError</span><span style="color:#ffffff">);</span><span style="color:#ffffff">audioSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onchange </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> getStream</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
videoSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onchange </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> getStream</span><span style="color:#ffffff">;</span><span style="color:#e28964">function</span><span style="color:#ffffff"> gotDevices</span><span style="color:#ffffff">(</span><span style="color:#ffffff">deviceInfos</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#e28964">for</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">let i </span><span style="color:#ffffff">=</span> <span style="color:#3387cc">0</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> i </span><span style="color:#ffffff">!==</span><span style="color:#ffffff"> deviceInfos</span><span style="color:#ffffff">.</span><span style="color:#ffffff">length</span><span style="color:#ffffff">;</span> <span style="color:#ffffff">++</span><span style="color:#ffffff">i</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#e28964">const</span><span style="color:#ffffff"> deviceInfo </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> deviceInfos</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">];</span><span style="color:#e28964">const</span><span style="color:#ffffff"> option </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createElement</span><span style="color:#ffffff">(</span><span style="color:#65b042">"option"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">option</span><span style="color:#ffffff">.</span><span style="color:#ffffff">value </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> deviceInfo</span><span style="color:#ffffff">.</span><span style="color:#ffffff">deviceId</span><span style="color:#ffffff">;</span><span style="color:#e28964">if</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">deviceInfo</span><span style="color:#ffffff">.</span><span style="color:#ffffff">kind </span><span style="color:#ffffff">===</span> <span style="color:#65b042">"audioinput"</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">option</span><span style="color:#ffffff">.</span><span style="color:#ffffff">text </span><span style="color:#ffffff">=</span><span style="color:#ffffff">deviceInfo</span><span style="color:#ffffff">.</span><span style="color:#ffffff">label </span><span style="color:#ffffff">||</span> <span style="color:#65b042">"microphone "</span> <span style="color:#ffffff">+</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">audioSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">length </span><span style="color:#ffffff">+</span> <span style="color:#3387cc">1</span><span style="color:#ffffff">);</span><span style="color:#ffffff">audioSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">appendChild</span><span style="color:#ffffff">(</span><span style="color:#ffffff">option</span><span style="color:#ffffff">);</span><span style="color:#ffffff">}</span> <span style="color:#e28964">else</span> <span style="color:#e28964">if</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">deviceInfo</span><span style="color:#ffffff">.</span><span style="color:#ffffff">kind </span><span style="color:#ffffff">===</span> <span style="color:#65b042">"videoinput"</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">option</span><span style="color:#ffffff">.</span><span style="color:#ffffff">text </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> deviceInfo</span><span style="color:#ffffff">.</span><span style="color:#ffffff">label </span><span style="color:#ffffff">||</span> <span style="color:#65b042">"camera "</span> <span style="color:#ffffff">+</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">videoSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">length </span><span style="color:#ffffff">+</span> <span style="color:#3387cc">1</span><span style="color:#ffffff">);</span><span style="color:#ffffff">videoSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">appendChild</span><span style="color:#ffffff">(</span><span style="color:#ffffff">option</span><span style="color:#ffffff">);</span><span style="color:#ffffff">}</span> <span style="color:#e28964">else</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#65b042">"Found another kind of device: "</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> deviceInfo</span><span style="color:#ffffff">);</span><span style="color:#ffffff">}</span><span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span><span style="color:#e28964">function</span><span style="color:#ffffff"> getStream</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">window</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">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stream</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getTracks</span><span style="color:#ffffff">().</span><span style="color:#ffffff">forEach</span><span style="color:#ffffff">(</span><span style="color:#e28964">function</span> <span style="color:#ffffff">(</span><span style="color:#ffffff">track</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">track</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stop</span><span style="color:#ffffff">();</span><span style="color:#ffffff">});</span><span style="color:#ffffff">}</span><span style="color:#e28964">const</span><span style="color:#ffffff"> constraints </span><span style="color:#ffffff">=</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">audio</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">deviceId</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> exact</span><span style="color:#ffffff">:</span><span style="color:#ffffff"> audioSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">value </span><span style="color:#ffffff">},</span><span style="color:#ffffff">},</span><span style="color:#ffffff">video</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">deviceId</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> exact</span><span style="color:#ffffff">:</span><span style="color:#ffffff"> videoSelect</span><span style="color:#ffffff">.</span><span style="color:#ffffff">value </span><span style="color:#ffffff">},</span><span style="color:#ffffff">},</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">constraints</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">then</span><span style="color:#ffffff">(</span><span style="color:#ffffff">gotStream</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">catch</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleError</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span><span style="color:#e28964">function</span><span style="color:#ffffff"> gotStream</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">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stream </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> stream</span><span style="color:#ffffff">;</span> <span style="color:#aeaeae"><em>// make stream available to console</em></span><span style="color:#ffffff">videoElement</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </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:#e28964">function</span><span style="color:#ffffff"> handleError</span><span style="color:#ffffff">(</span><span style="color:#ffffff">error</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">error</span><span style="color:#ffffff">(</span><span style="color:#65b042">"Error: "</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> error</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span></code></span></span>

查看Sam Dutton关于如何让用户选择媒体源的精彩演示。

安全

getUserMedia()只能从 HTTPS URL 或本地主机调用。否则，来自调用的承诺将被拒绝。也不适用于来自 iframe 的跨域调用。有关更多信息，请参阅弃用跨域 Iframe 中的权限。getUserMedia()

所有浏览器都会在调用时生成一个信息栏，使用户可以选择授予或拒绝对其摄像头或麦克风的访问权限。以下是来自 Chrome 的权限对话框：getUserMedia()

Chrome 中的权限对话框

此权限是持久的。也就是说，用户不必每次都授予或拒绝访问权限。如果用户以后改变主意，他们可以从浏览器设置中更新每个来源的相机访问选项。

主动使用相机，这会占用资源并保持相机打开（并且相机灯亮起）。当您不再使用轨道时，请呼叫以关闭摄像机。MediaStreamTracktrack.stop()

截取屏幕截图

API 的方法使得将帧绘制到变得轻而易举。当然，现在您已经通过视频输入了，创建带有实时视频的照相亭应用程序也同样容易：<canvas>ctx.drawImage(video, 0, 0)<video><canvas>getUserMedia()

<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"><img</span> <span style="color:#bdb76b">src</span><span style="color:#ffffff">=</span><span style="color:#65b042">""</span><span style="color:#89bdff">></span>
<span style="color:#89bdff"><canvas</span> <span style="color:#bdb76b">style</span><span style="color:#ffffff">=</span><span style="color:#65b042">"</span><span style="color:#e28964">display</span><span style="color:#ffffff">:</span><span style="color:#ffffff">none</span><span style="color:#ffffff">;</span><span style="color:#65b042">"</span><span style="color:#89bdff">></canvas></span><span style="color:#89bdff"><script></span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> captureVideoButton </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">"#screenshot .capture-button"</span>
<span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> screenshotButton </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">"#screenshot-button"</span><span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> img </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">"#screenshot img"</span><span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> video </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">"#screenshot video"</span><span style="color:#ffffff">);</span><span style="color:#e28964">const</span><span style="color:#ffffff"> canvas </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createElement</span><span style="color:#ffffff">(</span><span style="color:#65b042">"canvas"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">captureVideoButton</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span> <span style="color:#e28964">function</span> <span style="color:#ffffff">()</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">constraints</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#ffffff">then</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleSuccess</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">catch</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleError</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">};</span><span style="color:#ffffff">screenshotButton</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span> <span style="color:#e28964">function</span> <span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">canvas</span><span style="color:#ffffff">.</span><span style="color:#ffffff">width </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">videoWidth</span><span style="color:#ffffff">;</span><span style="color:#ffffff">canvas</span><span style="color:#ffffff">.</span><span style="color:#ffffff">height </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">videoHeight</span><span style="color:#ffffff">;</span><span style="color:#ffffff">canvas</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getContext</span><span style="color:#ffffff">(</span><span style="color:#65b042">"2d"</span><span style="color:#ffffff">).</span><span style="color:#ffffff">drawImage</span><span style="color:#ffffff">(</span><span style="color:#ffffff">video</span><span style="color:#ffffff">,</span> <span style="color:#3387cc">0</span><span style="color:#ffffff">,</span> <span style="color:#3387cc">0</span><span style="color:#ffffff">);</span><span style="color:#aeaeae"><em>// Other browsers will fall back to image/png</em></span><span style="color:#ffffff">img</span><span style="color:#ffffff">.</span><span style="color:#ffffff">src </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> canvas</span><span style="color:#ffffff">.</span><span style="color:#ffffff">toDataURL</span><span style="color:#ffffff">(</span><span style="color:#65b042">"image/webp"</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">};</span><span style="color:#e28964">function</span><span style="color:#ffffff"> handleSuccess</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">screenshotButton</span><span style="color:#ffffff">.</span><span style="color:#ffffff">disabled </span><span style="color:#ffffff">=</span> <span style="color:#e28964">false</span><span style="color:#ffffff">;</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </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:#89bdff"></script></span></code></span></span>

应用效果

CSS 过滤器

使用CSS滤镜，您可以在捕获时对应用一些粗糙的效果：<video>

<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"><p><button</span> <span style="color:#bdb76b">class</span><span style="color:#ffffff">=</span><span style="color:#65b042">"capture-button"</span><span style="color:#89bdff">></span><span style="color:#ffffff">Capture video</span><span style="color:#89bdff"></button></span>
<span style="color:#89bdff"><p><button</span> <span style="color:#bdb76b">id</span><span style="color:#ffffff">=</span><span style="color:#65b042">"cssfilters-apply"</span><span style="color:#89bdff">></span><span style="color:#ffffff">Apply CSS filter</span><span style="color:#89bdff"></button></p></span><span style="color:#89bdff"><script></span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> captureVideoButton </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">"#cssfilters .capture-button"</span>
<span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> cssFiltersButton </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">"#cssfilters-apply"</span><span style="color:#ffffff">);</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> video </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">"#cssfilters video"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">let filterIndex </span><span style="color:#ffffff">=</span> <span style="color:#3387cc">0</span><span style="color:#ffffff">;</span>
<span style="color:#e28964">const</span><span style="color:#ffffff"> filters </span><span style="color:#ffffff">=</span> <span style="color:#ffffff">[</span><span style="color:#65b042">"grayscale"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"sepia"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"blur"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"brightness"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"contrast"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"hue-rotate"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"hue-rotate2"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"hue-rotate3"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"saturate"</span><span style="color:#ffffff">,</span><span style="color:#65b042">"invert"</span><span style="color:#ffffff">,</span><span style="color:#65b042">""</span><span style="color:#ffffff">,</span>
<span style="color:#ffffff">];</span><span style="color:#ffffff">captureVideoButton</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span> <span style="color:#e28964">function</span> <span style="color:#ffffff">()</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">constraints</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#ffffff">then</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleSuccess</span><span style="color:#ffffff">)</span><span style="color:#ffffff">.</span><span style="color:#e28964">catch</span><span style="color:#ffffff">(</span><span style="color:#ffffff">handleError</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">};</span><span style="color:#ffffff">cssFiltersButton</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclick </span><span style="color:#ffffff">=</span> <span style="color:#e28964">function</span> <span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">className </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> filters</span><span style="color:#ffffff">[</span><span style="color:#ffffff">filterIndex</span><span style="color:#ffffff">++</span> <span style="color:#ffffff">%</span><span style="color:#ffffff"> filters</span><span style="color:#ffffff">.</span><span style="color:#ffffff">length</span><span style="color:#ffffff">];</span>
<span style="color:#ffffff">};</span><span style="color:#e28964">function</span><span style="color:#ffffff"> handleSuccess</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">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">srcObject </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:#89bdff"></script></span></code></span></span>

WebGL 纹理

视频捕获的一个惊人用例是将实时输入渲染为 WebGL 纹理。给杰罗姆·艾蒂安的教程和演示看一看。它讨论了如何使用和Three.js将实时视频渲染到WebGL中。getUserMedia()

将 API 与 Web 音频 API 结合使用`getUserMedia`

Chrome 支持从网络音频 API 输入实时麦克风，以获得实时效果。它看起来像这样：getUserMedia()

<span style="color:white"><span style="background-color:#444444"><code><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#89bdff">AudioContext</span> <span style="color:#ffffff">=</span><span style="color:#ffffff"> window</span><span style="color:#ffffff">.</span><span style="color:#89bdff">AudioContext</span> <span style="color:#ffffff">||</span><span style="color:#ffffff"> window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webkitAudioContext</span><span style="color:#ffffff">;</span><span style="color:#e28964">const</span><span style="color:#ffffff"> context </span><span style="color:#ffffff">=</span> <span style="color:#e28964">new</span> <span style="color:#89bdff">AudioContext</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"> audio</span><span style="color:#ffffff">:</span> <span style="color:#e28964">true</span> <span style="color:#ffffff">}).</span><span style="color:#e28964">then</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">{</span><span style="color:#e28964">const</span><span style="color:#ffffff"> microphone </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> context</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createMediaStreamSource</span><span style="color:#ffffff">(</span><span style="color:#ffffff">stream</span><span style="color:#ffffff">);</span><span style="color:#e28964">const</span><span style="color:#ffffff"> filter </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> context</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createBiquadFilter</span><span style="color:#ffffff">();</span><span style="color:#aeaeae"><em>// microphone -> filter -> destination</em></span><span style="color:#ffffff">microphone</span><span style="color:#ffffff">.</span><span style="color:#ffffff">connect</span><span style="color:#ffffff">(</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">);</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">.</span><span style="color:#ffffff">connect</span><span style="color:#ffffff">(</span><span style="color:#ffffff">context</span><span style="color:#ffffff">.</span><span style="color:#ffffff">destination</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">});</span></code></span></span>

演示：

实时输入可视化工具
录音机
变桨检测器

有关更多信息，请参阅Chris Wilson的帖子。

结论

从历史上看，网络上的设备访问一直是一个难以破解的难题。许多人尝试过，很少有人成功。大多数早期的想法从未被广泛采用，也没有在专有环境之外扎根。也许主要问题是Web的安全模型与原生世界非常不同。特别是，您可能不希望每个Joe Shmoe网站都可以随机访问您的摄像机或麦克风。很难做对。

从那时起，在移动设备日益普及的功能的推动下，Web开始提供更丰富的功能。现在，您可以使用 API 来拍摄照片、控制相机设置、录制音频和视频以及访问其他类型的传感器数据，例如位置、运动和设备方向。通用传感器框架将所有这些与通用 API 联系在一起，使 Web 应用能够访问 USB 并与蓝牙设备交互。

getUserMedia()只是硬件交互性的第一波浪潮。

其他资源

W3C 规格
Bruce Lawson 的 HTML5Doctor 文章
布鲁斯·劳森的 dev.opera.com 文章
开始使用WebRTC

演示

WebRTC 示例：规范演示和代码存储库
保罗·尼夫的WebGL摄像机效果
WebGL 中的实时视频
用手玩木琴