getUserMedia 即将推出！

我们在 4 月份的博客中讨论了一些我们的WebRTC 工作。今天，我们有一个令人兴奋的更新要与您分享：getUserMedia 已登陆 mozilla-central！这意味着您将能够在 Firefox 的最新Nightly 版本中使用此 API，并且它最终将进入正式版本。

getUserMedia 是一个DOM API，它允许网页获取视频和音频输入，例如来自网络摄像头或麦克风的输入。我们希望这将为构建全新类型的网页和应用程序打开可能性。此 DOM API 是WebRTC 项目的一个组成部分，该项目还包括用于点对点通信通道的 API，这些通道将能够交换视频流、音频流和任意数据。

我们仍在开发PeerConnection API，但 getUserMedia 是朝着在 Firefox 中全面支持 WebRTC 迈出的重要第一步！自从第一张来自网络摄像头的图像通过 DOM API出现在网页上以来，我们已经走了很长一段路。（更不用说在此之前Jetpack 中的音频录制支持。）

我们已实现 W3C 正在开发的“媒体捕获和流”标准的前缀版本。规范的并非所有部分都已实现；最值得注意的是，我们不支持约束 API（它允许调用者根据各种参数请求特定类型的音频和视频）。

我们还为 API 实现了一个 Mozilla 特定的扩展：mozGetUserMedia 的第一个参数是一个字典，除了{video: true} 或{audio: true} 之外，它还将接受属性{picture: true}。picture API 是一种实验，旨在了解用户是否对使用专用机制从用户的摄像头获取单个图片（无需设置视频流）感兴趣。例如，这在个人资料图片上传页面或照片共享应用程序中可能很有用。

事不宜迟，让我们从一个简单的示例开始！首先确保创建一个名为“media.navigator.enabled”的首选项，并通过about:config将其设置为true。我们之所以设置此首选项，是因为我们尚未实现权限模型或任何用于提示用户授权访问摄像头或麦克风的 UI。此 API 版本的目标是开发者，在拥有满意的权限模型和 UI 后，我们将默认启用此首选项。

%CODEgum%

还有一个演示页面，您可以在其中测试 API 的音频、视频和图片功能。尝试一下，并告诉我们您的想法！我们尤其希望收到 Web 开发者社区关于 API 的反馈，以及它是否满足您的用例。您可以在此帖中发表评论，或在dev-media 邮件列表或新闻组中发表评论。

我们鼓励您参与该项目 - 项目维基页面上有大量关于我们正在进行的工作的信息项目维基页面。在邮件列表中发布您的问题、评论和建议是入门的好方法。我们也会在#media IRC 频道中闲逛，随时加入进行非正式聊天。

祝您黑客生涯愉快！

@anantn 是Mozilla Labs 的一名黑客，专门从事通用技术。他之前曾参与过Weave、Jetpack、账户管理器和Rainbow 等项目。他目前正在研究开放式 Web 应用程序和Web 实时通信。

kix.in/

更多 Anant Narayanan 的文章…

40 条评论

Anant Narayanan

此首次实现存在一些已知问题，请参阅http://mozillamediagoddess.org/2012/07/13/navigator-mozgetusermedia-has-just-landed-in-firefox-desktop-nightly-builds/以获取更多详细信息。

2012 年 7 月 13 日 10:41
paulo995

您好。我测试了视频，效果很好，但对于音频，Win 7 的防火墙弹出窗口询问我是否要添加关于 Firefox 的例外。

2012 年 7 月 13 日 11:17
1. Anant Narayanan
  
  感谢您的报告！我已提交了一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=773736
  
  2012 年 7 月 13 日 11:27
Alexandre

太棒了 :-)
但是

* 我的网络摄像头图像倒置（Opera 12 和 Chrome 21 中正常）；

* 快照似乎不适用于以下在 Opera 12 和 Chrome 21 中有效的代码：canvas.getContext(‘2d’).drawImage(video, 0, 0);

测试：http://alexandre.alapetite.fr/doc-alex/html5-webcam/

快捷方式：a80.fr/cam

此致,
Alexandre

2012 年 7 月 13 日 14:41
1. Anant Narayanan
  
  您好，Alexandre，感谢您的报告。倒置的图像是一个我以前从未遇到过的新问题，因此我们应该提交一个错误。
  
  至于快照代码，这是一个已知问题：https://bugzilla.mozilla.org/show_bug.cgi?id=771833 我们将很快解决。同时，您可以尝试 mozGetUserMedia{picture:true, …} 来获取快照！
  
  2012 年 7 月 13 日 15:01
Alexandre

好的，错误已提交 https://bugzilla.mozilla.org/show_bug.cgi?id=773824

顺便说一句，草案中写着“video.src = URL.createObjectURL(stream);”，但这不是 Firefox 的做法（Opera 的做法与 Firefox 相同，但与 Chrome 不同）。

Alexandre。

2012 年 7 月 13 日 15:18
1. Anant Narayanan
  
  谢谢！
  
  是的，我们目前实现 video.src = stream，因为我们仍在 W3C 讨论合适的语法。我们认为为流分配 URL 存在某些缺点。随着我们对“媒体捕获和流”规范的进展，API 应该会更加稳定。
  
  2012 年 7 月 13 日 15:22
Ashley

如果您尝试将视频绘制到 2D 画布上，则会失败并显示“NS_ERROR_NOT_AVAILABLE: 组件不可用”，如果您尝试将视频传递到 WebGL 纹理并使用 texImage2D，则会失败并显示“NS_ERROR_FAILURE: 失败”。

2012 年 7 月 13 日 15:59
1. Vilson Vieira
  
  我这里也是一样。我想它还没有准备好，对吧？
  
  2012 年 7 月 15 日 22:54
Francisco Jordano

太棒了，伙计们！

我一直在尝试测试页面，一切按预期工作（考虑到已知问题），但捕获图片除外。

我将在 bugzilla 中打开一个错误来跟踪它。

感谢并祝贺你们辛勤工作！

2012 年 7 月 14 日 12:30
Kedar

好消息！一切按预期进行

2012 年 7 月 14 日 21:41
Bryan Clark

太棒了！！视频和音频对我都有效（当然，是分开的）。

但是，我从图片调用中没有获得任何图片。即使在您的测试页面上也是如此。我看到一个 File 对象通过成功函数，但我无法以任何有意义的方式使用它。大小显示为零，无论我如何尝试加载它（通过 File 对象或转换为对象 URL），它似乎都不会显示。

有什么提示或已提交的错误吗？谢谢！

2012 年 7 月 16 日 13:37
1. Anant Narayanan
  
  我能够间歇性地重现此问题，但尚未提交错误 - 随意提交！尝试删除图像创建的临时文件 - 它们位于 Linux 上的 /tmp、Mac 上的 ~/Library/Caches/TemporaryItems 中，名为“webrtc-snapshot-*.jpeg”。第一个快照始终成功，其余快照有时会返回空图像，即使临时文件反映了正确的图像。
  
  2012 年 7 月 16 日 13:46
thinsoldier

在 OS X 上的 Nightly.app 中没有任何反应

2012 年 7 月 17 日 11:56
1. thinsoldier
  
  在演示页面上。
  
  2012 年 7 月 17 日 11:58
  1. Anant Narayanan
    
    确保创建并设置“media.navigator.enabled”首选项为 true。
    
    2012 年 7 月 18 日 09:37
andri iswandi

谢谢…好消息。

2012 年 7 月 18 日 00:13
T-Bone

是否可以从流中获取数据并在服务器端创建视频或音频文件？

2012 年 7 月 18 日 04:04
1. Anant Narayanan
  
  目前尚不可能，但我们正在开发一项将启用此功能的功能。敬请期待！
  
  2012 年 7 月 18 日 09:39
Fabricio C Zuardi

它在 Firefox Mobile 上有效吗？

我在我的 Nightly 版本中设置了首选项，但您的演示中的所有测试都失败了，前两个导致浏览器崩溃，最后一个（图片）则出现以下错误

[Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNavigatorUserMedia.mozGetUserMedia]” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: https://people.mozilla.com/~anarayanan/gum_test.html :: startMedia :: line 139″ data: no]

我在运行 Android 3.2 的三星 Galaxy Tab 10.1 上进行了测试

2012 年 7 月 18 日 18:42
1. Anant Narayanan
  
  抱歉，目前尚不支持移动设备。我们将在完成桌面实现后立即开始着手开发。
  
  2012 年 9 月 27 日 09:54
shaz

在尝试演示时出现此错误

TypeError: window.navigator.mozGetUserMedia 不是函数

我在 channel-prefs.js 文件中添加了首选项 media.navigator.enabled 并将其设置为 true。
我哪里出错了？

2012 年 7 月 22 日 11:51
T-Bone

删除“window.”并重试。在上面的示例代码中，他们使用了
navigator.mozGetUserMedia。
如果不起作用，请在地址栏中键入“about:config”，然后右键单击 -> 新建 -> 布尔值添加新值

首选项名称：media.navigator.enabled
值：true

2012 年 7 月 22 日 14:14
ackgg

是否可以从 WebRTC 获取音频数据并通过音频数据 API 处理它？

2012 年 7 月 23 日 22:34
1. Anant Narayanan
  
  目前尚不可行，但我们正在努力实现 Web Audio API，它将允许您处理通过 getUserMedia 收到的数据。
  
  2012 年 9 月 27 日 09:56
Vaidik Kapoor

太棒了！不敢相信我之前没有检查过。它肯定会让开发人员能够制作无 Flash 的内容！:)

我第一次运行它时，一切运行良好 - 音频、视频、图片。但是，我注意到即使在停止视频后，它也会让我的笔记本电脑的网络摄像头保持开启状态（我注意到这一点是因为我的网络摄像头有一个小灯，用于指示它何时运行）。因此，我不得不退出页面以停止我的摄像头。

此外，这个特定的演示第一次运行完美无缺。但是当我再次点击“视频”按钮时，它显示“HARDWARE_UNAVAILABLE”。这可能是因为这只是一个演示，而不是一个处理各种常见错误的完整功能完善的应用程序。

但是，这太棒了！期待很快将其用于大学项目！:D

2012 年 9 月 17 日 06:52
Joao

我也遇到了 HARDWARE_UNAVAILABLE。
不过，演示对我来说从未运行过。

使用 Firefox Nightly 版本 18.0a1（2012-09-26）。
并且在 about:config 中将标志设置为 true。
Windows 7 机器。

因此，我认为这可能是某些环境/用户限制，但这没有多大意义，因为 Chrome 和 Opera 运行良好。
（并且两个浏览器都已关闭以防止在硬件上出现并发）。

任何人有什么想法吗？

2012 年 9 月 27 日 02:37
1. Anant Narayanan
  
  嗯，您可以提交一个错误，其中包含您的配置详细信息以及错误控制台中的任何消息。演示在我的 Windows 计算机上运行良好，因此我们必须弄清楚在什么情况下调用会失败。
  
  2012 年 9 月 27 日 10:02
joao

我刚刚解决了问题。
似乎在 Firefox 上，我们需要在使用网络摄像头之前完全关闭它。
否则会出现“错误”。

无论如何，我设法拍摄了照片，但我无法打开视频流。
还没有。

（感谢您的反馈）

2012 年 9 月 27 日 10:39
Maisondouf

我尝试测试所有浏览器以使用 GetUserMedia…
因为在网络上，有人这么说，而另一些人则说相反的话，所以我写了一个小型的 HTML 测试来报告支持哪种功能。

关于 GetUserMedia，规则很简单，但对于分配视频流，这确实像个丛林……

有些人使用 'window.URL.createObjectURL(stream)'，但 Mozilla 直接使用流。
真相在哪里？

2012年10月2日 22:02
Prasanna Venkadesh

您好，演示页面对我来说可以正常工作。但是我尝试了相同的代码，将上述示例代码放在运行 Fedora 16 的 Apache 服务器中。在 Nightly 18 中我遇到了“视频/Mime 类型不受支持”的错误，而在 Chrome 22 中则可以正常工作。所以由此我得出结论，问题与 Apache 服务器的 Mime 类型有关。我的网络摄像头镜头旁边还有一个 LED 指示灯，当我在 Firefox 中访问该页面时它会亮起，但问题是 Mime 类型。此外，我在 mime.type 文件中也添加了 ogg 和 webm 格式的条目。如何使它在 Firefox 上工作？

2012年10月8日 02:50
1. Anant Narayanan
  
  Prasanna，问题不在于 Apache - 我们最近更改了将 MediaStream 分配给元素的语法，因此，您不应该使用
  
  video.src = stream;
  
  而是应该使用
  
  video.mozSrcObject = stream;
  
  希望这有帮助！
  
  2012年10月8日 08:34
Alexandre

感谢 Anant 提供这些信息。
如果对某些人有兴趣，我已经相应地更新了我的跨浏览器演示，保持与之前 Firefox 方法的兼容性，以及启动和停止视频以及拍摄屏幕截图的代码
http://alexandre.alapetite.fr/doc-alex/html5-webcam/

2012年10月8日 11:23
david

您好，我正在阅读 WebRTC 工作草案：http://www.w3.org/TR/webrtc/#rtciceserver-type，并且此行中存在错误
[ { url:”stun:stun.example.net”] } , { url:”turn:user@turn.example.org”, credential:”myPassword”} ]

] -> 在 stun.example.net 之后已过时

抱歉，不知道在哪里报告，这让我很困扰 :)

2012年10月9日 07:08
Alexander Karlstad

我似乎无法在 Ubuntu 上运行它。我正在通过 LP PPA 使用 Firefox 16，但我也测试了通过下载 .tar.bz 文件获得的 FF16。即使我在 about:config 中将 media.navigator.enabled 设置为 true :-/

2012年10月11日 06:40
1. Laxminarayan Kamath
  
  如果您从终端启动 Firefox，您是否在其中看到任何错误消息？
  
  也请尝试保持 Firefox 的 js 控制台打开 (ctrl-shift-k)
  
  2012年12月15日 21:58
Robert O’Callahan

此示例略微过时。不要使用“video.src = stream;”，而应使用“video.mozSrcObject = stream”。

2012年10月23日 15:43
Andor Salga

我创建了一个使用视频媒体流的小型演示：http://BitCam.me 演示使用 Processing.js 过滤和“像素化”它使用网络摄像头捕获的内容。

2012年12月18日 18:33
Eibriel

太棒了！！我真的很想看到它工作 :D

（演示链接已损坏 :(）

2013年1月21日 22:21
1. Robert Nyman
  
  谢谢！
  我建议访问较新的文章以获取最新的信息、演示等。
  
  2013年1月22日 01:45

本文的评论已关闭。

Hacks

作者：Anant Narayanan

关于 Anant Narayanan

40 条评论

getUserMedia 即将推出！

作者：Anant Narayanan

关于 Anant Narayanan

探索 Web 开发的优秀资源

感谢！请查看您的收件箱以确认您的订阅。