getusermedia

The MediaDevices object exposed by navigator.mediaDevices gives us the getUserMedia method.

该MediaDevices对象通过暴露navigator.mediaDevices给我们的getUserMedia方法。

Warning: the navigator object exposes a getUserMedia() method as well, which might still work but is deprecated. The API has been moved inside the mediaDevices object for consistency purposes.

警告： navigator对象也公开了getUserMedia()方法，该方法可能仍然有效，但已弃用 。 为了保持一致性， mediaDevices API移到mediaDevices对象内。

This is how we can use this method.

这就是我们可以使用这种方法的方式。

Say we have a button:

假设我们有一个按钮：

Start streaming

We wait until the user clicks this button, and we call the navigator.mediaDevices.getUserMedia() method.

我们一直等到用户单击此按钮，然后调用navigator.mediaDevices.getUserMedia()方法。

We pass an object that describes the media constraints we want. If we want a video input we’ll call

我们传递一个描述所需媒体约束的对象。 如果我们要视频输入，我们会打电话给

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

We can be very specific with those constraints:

我们可以很具体地说明这些约束：

navigator.mediaDevices.getUserMedia({  video: {    minAspectRatio: 1.333,    minFrameRate: 60,    width: 640,    heigth: 480  }})

You can get a list of all the constraints supported by the device by calling navigator.mediaDevices.getSupportedConstraints().

您可以通过调用navigator.mediaDevices.getSupportedConstraints()获得设备支持的所有约束的列表。

If we just want the audio we can pass audio: true:

如果我们只想要音频，则可以传递audio: true ：

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

and if we want both:

如果我们都想要：

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

This method returns a promise, so we’ll use async/await to get the result in a stream variable:

此方法返回一个Promise，因此我们将使用async / await在stream变量中获取结果：

document.querySelector('button').addEventListener('click', async (e) => {  const stream = await navigator.mediaDevices.getUserMedia({    video: true  })})

Clicking the button will trigger a panel in the browser to allow for the permission to use the media devices:

单击该按钮将触发浏览器中的面板，以允许使用媒体设备的权限：

See on Codepen:

在Codepen上查看： ：//codepen.io/flaviocopes/pen/WWyGmr

Once we are done, the stream object we got from getUserMedia() can now be used for various things. The most immediate is to display the video stream in a video element in the page:

一旦完成，从getUserMedia()获得的stream对象现在可以用于各种用途。 最直接的方法是在页面的video元素中显示视频流：

Start streaming
     

document.querySelector('button').addEventListener('click', async (e) => {  const stream = await navigator.mediaDevices.getUserMedia({    video: true  })  document.querySelector('video').srcObject = stream})

See on Codepen:

在Codepen上查看： ：//codepen.io/flaviocopes/pen/wZXzbB

一个例子 (An example)

Here is a Codepen example that asks you to access the video camera and plays the video in the page:

这是一个Codepen示例，要求您访问摄像机并在页面中播放视频：

See the Pen by Flavio Copes () on .

见笔由弗拉维奥·科佩斯( 上) 。

We add a button to get access to the camera, then we add a video element, with the autoplay attribute.

我们添加一个按钮以访问摄像机，然后添加一个具有autoplay属性的video元素。

Get access to camera
     

The JS listens for a click on the button, then calls navigator.mediaDevices.getUserMedia() asking for the video. Then we access the name of the camera used by calling stream.getVideoTracks() on the result of the call to getUserMedia().

JS监听按钮的单击，然后调用navigator.mediaDevices.getUserMedia()询问视频。 然后，我们访问摄像机的调用使用的名称stream.getVideoTracks()的调用的结果getUserMedia()

The stream is set to be the source object for the video tag, so that playback can happen:

流被设置为video标签的源对象，因此可以进行回放：

document.querySelector('#get-access').addEventListener('click', async function init(e) {  try {    const stream = await navigator.mediaDevices.getUserMedia({      video: true    })    document.querySelector('video').srcObject = stream    document.querySelector('#get-access').setAttribute('hidden', true)    setTimeout(() => { track.stop() }, 3 * 1000)  } catch (error) {    alert(`${error.name}`)    console.error(error)  }})

The arguments of getUserMedia() can specify additional requirements for the video stream:

getUserMedia()的参数可以指定视频流的其他要求：

navigator.mediaDevices.getUserMedia({  video: {    mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },    optional: [      { minFrameRate: 60 },      { maxWidth: 640 },      { maxHeigth: 480 }    ]  }}, successCallback, errorCallback);

To get an audio stream you would ask for the audio media object too, and call stream.getAudioTracks() instead of stream.getVideoTracks().

要获取音频流，您还需要音频媒体对象，然后调用stream.getAudioTracks()而不是stream.getVideoTracks() 。

After 3 seconds of playback we stop the video streaming by calling track.stop().

播放3秒后，我们通过调用track.stop()停止视频流。

翻译自:

getusermedia