使用 getUserMedia() API

让我们开始使用 getUserMedia() API 调用及其返回的 MediaStream 对象。 先准备一个带有 JavaScript 代码的简单 HTML 页面，使我们可以访问本地视频资源并将其显示在 HTML5 <video> 标签中。示例 2-1 显示了我们为第一个示例构建的非常简单的页面。

例2-1 我们的第一个启用 WebRTC 的 HTML 页面

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>getUserMedia very simple demo</title>
  5.   </head>
  6.   <body>
  7.     <div id="mainDiv">
  8.       <h1><code>getUserMedia()</code> very simple demo</h1>
  9.       <p>With this example, we simply call <code>getUserMedia()</code> and display  the received stream inside an HTML5 <video> element</p>
  10.       <p>View page source to access both HTML and JavaScript code...</p>
  11.       <video autoplay></video>
  12.       <script src="js/getUserMedia.js"></script>
  13.     </div>
  14.   </body>
  15. </html>

例2-2 文件 js/getUserMedia.js

  1. // Look after different browser vendors' ways of calling the getUserMedia()
  2. // API method:
  3. // Opera --> getUserMedia
  4. // Chrome --> webkitGetUserMedia
  5. // Firefox --> mozGetUserMedia
  7. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  9. // Use constraints to ask for a video-only MediaStream:
  10. var constraints = {audio: false, video: true};
  11. var video = document.querySelector("video");
  13. // Callback to be called in case of success...
  14. function successCallback(stream) {
  16.   // Note: make the returned stream available to console for inspection
  17.   window.stream = stream;
  19.   if (window.URL) {
  20.     // Chrome case: URL.createObjectURL() converts a MediaStream to a blob URL
  21.     video.src = window.URL.createObjectURL(stream);
  22.   } else {
  23.     // Firefox and Opera: the src of the video can be set directly from the stream
  24.     video.src = stream;
  25.   }
  27.   // We're all set. Let's just play the video out!
  28.   video.play();
  29. }
  31. // Callback to be called in case of failures...
  32. function errorCallback(error) {
  33.   console.log("navigator.getUserMedia error: ", error);
  34. }
  36. // Main action: just call getUserMedia() on the navigator object
  37. navigator.getUserMedia(constraints, successCallback, errorCallback);

以下屏幕截图显示了将页面加载到Chrome（图2-2）或Firefox（图2-3）时的外观。

图2-2

图2-2 在 Chrome 中打开我们的第一个示例

图2-3

图2-3 在 Firefox 中打开我们的第一个示例

::: danger 在 Chrome 中打开 JavaScript 文件

如果要在本地计算机上的 Google Chrome 中测试代码，则将面临一些挑战，因为由于安全限制，Chrome 默认不会加载本地文件。 为了解决这些问题，您必须在计算机上本地运行 Web 服务器并使用它来提供应用程序的文件，或者在启动浏览器时使用 --allow-file-access-from-files 选项。

:::

从上图中可以看出，两种浏览器在访问本地设备（在本例中为网络摄像头）之前都需要征得用户的同意。 在征得用户的明确同意后，浏览器最终将获取的 MediaStream 与页面相关联，如图 2-4 和 2-5 所示。

注意：权限授予与网页的域相关，并且此权限不会扩展到网页上的弹出窗口和其他框架。

图2-4 在 Chrome 中显示获取的 MediaStream

图2-5 在 Firefox 中显示获取的 MediaStream

深入研究上面报告的简单代码的一些细节，我们可以重点介绍如何调用 API 方法 getUserMedia(constraints, successCallback, errorCallback)，其参数具有以下含义：

  • constraints 对象（请参阅第19页的“媒体约束”），用于指定对只收集本地视频感兴趣的穿戴者（constraints = {audio: false, video: true}）
  • success callback 如果调用，将传递给 MediaStream。在我们的例子中，首先将这样的 MediaStream 提供给控制台以供用户检查（window.stream = stream;）然后，将其附加到 HTML5 页面的 <video> 元素上并最终显示。 参考控制台对返回对象的检查，图 2-6 显示了在 Chrome 开发人员工具窗口中此类活动输出的快照。 每个 MediaStream 都有一个标签，并包含一个或多个表示音频或视频通道的 MediaStreamTracks。

图2-6

图2-6 在 Chrome 的控制台中检查 MediaStream

关于返回的流如何附加到 <video> 元素，请注意，Chrome 要求转换为所谓的 Blob URL（video.src = window.URL.createObjectURL(stream);），而其他启用 WebRTC 的浏览器允许您按原样使用它（video.src = stream;）。

  • failure callback 如果被调用，则传递给错误对象。 在我们的基本示例中，提到的回调仅将返回的错误记录到控制台（console.log("navigator.getUserMedia error: ", error);）