如何使用JavaScript的getUserMedia（）访问前后摄像头

介绍 (Introduction)

With HTML5 came the introduction of APIs with access to device hardware, including the MediaDevices API. This API provides access to media input devices like audio and video.

随着HTML5的出现，引入了可以访问设备硬件的API，包括MediaDevices API。 该API提供对媒体输入设备(如音频和视频)的访问。

With this API’s help, developers can access audio and video devices to stream and display live video feeds in the browser. In this tutorial, you’ll access the video feed from the user’s device and display it in the browser using the getUserMedia method.

借助该API的帮助，开发人员可以访问音频和视频设备，以在浏览器中流式传输和显示实时视频。 在本教程中，您将从用户设备访问视频源，并使用getUserMedia方法在浏览器中显示它。

The getUserMedia API makes use of the media input devices to produce a MediaStream. This MediaStream contains the requested media types, whether audio or video. Using the stream returned from the API, video feeds can be displayed on the browser, which is useful for real-time communication on the browser.

getUserMedia API使用媒体输入设备来产生MediaStream 。 此MediaStream包含请求的媒体类型，无论是音频还是视频。 使用从API返回的流，可以在浏览器上显示视频供稿，这对于在浏览器上进行实时通信很有用。

When used along with the MediaStream Recording API, you can record and store media data captured on the browser. This API only works on secure origins like the rest of the newly introduced APIs, but it also works on localhost and file URLs.

与MediaStream Recording API一起使用时，您可以记录和存储在浏览器中捕获的媒体数据。 该API仅适用于像其他新引入的API一样的安全来源，但也适用于localhost和文件URL。

先决条件 (Prerequisites)

• A basic knowledge of JavaScript. If you are new to JavaScript, try checking out the How To Code in JavaScript series.

  JavaScript的基础知识。 如果您不熟悉JavaScript，请尝试阅读“ 如何使用JavaScript编码”系列。

This tutorial will first explain concepts and demonstrate examples with Codepen. In the final step, you will create a functioning video feed for the browser.

本教程将首先解释概念并使用Codepen演示示例。 在最后一步，您将为浏览器创建一个正常运行的视频提要。

步骤1 —检查设备支持 (Step 1 — Checking Device Support)

First, you will see how to check if the user’s browser supports the mediaDevices API. This API exists within the navigator interface and contains the current state and identity of the user agent. The check is performed with the following code that can be pasted into Codepen:

首先，您将看到如何检查用户的浏览器是否支持mediaDevices API。 该API存在于导航器界面中，并包含用户代理的当前状态和身份。 使用以下可粘贴到Codepen中的代码执行检查：

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  console.log("Let's get this party started")
}

First, this checks if the mediaDevices API exists within the navigator and then checks if the getUserMedia API is available within the mediaDevices. If this returns true, you can get started.

首先，这将检查navigator是否存在mediaDevices API，然后检查mediaDevices的getUserMedia API是否可用。 如果返回true ，则可以开始。

第2步-请求用户权限 (Step 2 — Requesting User Permission)

After confirming the browser’s support for getUserMedia, you need to request permission to make use of the media input devices on the user agent. Typically, after a user grants permission, a Promise is returned which resolves to a media stream. This Promise isn’t returned when the permission is denied by the user, which blocks access to these devices.

确认浏览器对getUserMedia的支持后，您需要请求权限才能使用用户代理上的媒体输入设备。 通常，在用户授予权限后，将返回一个Promise ，该Promise会解析为媒体流。 当用户拒绝此权限(阻止访问这些设备)时，不会返回此Promise 。

Paste the following line into Codepen to request permission:

将以下行粘贴到Codepen中以请求权限：

navigator.mediaDevices.getUserMedia({video: true})

The ob