如何使用getUserMedia()函数

🏠 返回首页

发现如何使用getUserMedia()来获取用户的音频和视频输入的权限

navigator.mediaDevices 所暴露的MediaDevices 对象给我们提供了getUserMedia 方法。

警告：navigator 对象也暴露了一个getUserMedia() 方法，该方法可能仍然有效，但已被废弃。为了保持一致性，这个API已经被移到了mediaDevices 对象里面。

这就是我们如何使用这个方法。

假设我们有一个按钮。

<button>Start streaming</button>

我们等待，直到用户点击这个按钮，然后我们调用navigator.mediaDevices.getUserMedia() 方法。

我们传递一个对象，描述我们想要的媒体约束。如果我们想要一个视频输入，我们就调用

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

我们可以对这些约束条件做得非常具体。

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

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

如果我们只想要音频，我们可以通过audio: true 。

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

而如果我们想要两个都要。

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

这个方法返回一个承诺，所以我们将使用async/await来获得stream 变量中的结果。

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

点击该按钮将在浏览器中触发一个面板，允许使用媒体设备的权限。

见Codepen上：https://codepen.io/flaviocopes/pen/WWyGmr

一旦我们完成了，我们从getUserMedia() 得到的stream 对象现在可以用于各种事情。最直接的是在页面中的video 元素中显示视频流。

<button>Start streaming</button> <video autoplay>Start streaming</video>

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

参见Codepen:codepen.io/flaviocopes…

一个例子

这里有一个Codepen的例子，要求你访问视频摄像头，并在页面中播放视频。

请看Flavio Copes（@flaviocopes）在CodePen上的PenWebRTC MediaStream简单例子。

我们添加一个按钮来访问摄像机，然后我们添加一个video ，属性为autoplay 。

<button id="get-access">Get access to camera</button> <video autoplay></video>

JS监听按钮的点击，然后调用navigator.mediaDevices.getUserMedia() ，询问视频的情况。然后我们通过调用stream.getVideoTracks() ，在调用getUserMedia() 的结果中获取所用摄像机的名称。

流被设置为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)
    }
  })

getUserMedia()的参数可以指定对视频流的额外要求。

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

要获得音频流，你也会要求获得音频媒体对象，并调用stream.getAudioTracks() ，而不是stream.getVideoTracks() 。

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