Web API WebRTC.getUserMedia() 方法

简介

getUserMedia() 是 WebRTC（Web实时通信）API 中的一个方法，用于在浏览器中访问设备的媒体流（例如摄像头和麦克风）。它允许您以编程方式访问用户的音视频设备，并在Web应用程序中进行实时通信、流媒体等操作。

使用方法

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    /* 成功获取到媒体流，进行后续处理操作 */
  })
  .catch(function(error) {
    /* 处理错误情况 */
  });

参数

getUserMedia() 方法接受一个参数 constraints，用于指定媒体设备的要求和限制。constraints 是一个包含以下属性的对象：

• audio: 布尔值，表示是否请求音频流。
• video: 布尔值，表示是否请求视频流。
• video 对象可以包含以下属性：
  • width: 需要的视频宽度。
  • height: 需要的视频高度。
  • frameRate: 需要的帧率。

例如，以下示例请求获取摄像头和麦克风的音视频流:

var constraints = {
  audio: true,
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    /* 成功获取到媒体流，进行后续处理操作 */
  })
  .catch(function(error) {
    /* 处理错误情况 */
  });

返回值

getUserMedia() 方法返回一个 Promise 对象，该对象在成功时解析为一个 MediaStream 实例，该实例代表了所请求的音视频流。可以使用 MediaStream 实例进行后续的处理，例如播放、录制或传输给其他用户。

兼容性

getUserMedia() 方法在不同浏览器和设备中的兼容性有所差异。在使用前，建议使用 navigator.mediaDevices.getUserMedia 来检查浏览器是否支持该方法。

以下是兼容性示例：

| Chrome | Firefox | Safari | Opera | Edge | iOS Safari | | ------ | ------- | ------ | ----- | ---- | ---------- | | 21.0+ | 17.0+ | 11.0+ | 12.0+ | 17.0+| 11.0+ |

示例

获取摄像头和麦克风的音视频流

var constraints = {
  audio: true,
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    var videoElement = document.getElementById('video');
    videoElement.srcObject = mediaStream;
    videoElement.play();
  })
  .catch(function(error) {
    console.log('获取媒体流失败: ', error);
  });

此示例首先获取摄像头和麦克风的音视频流，并将其绑定到页面上的视频元素 (<video>) 上，然后播放视频。如果发生错误，将在控制台中显示错误消息。

总结

getUserMedia() 方法是 WebRTC API 中非常重要的一个方法，可以让开发者以编程方式访问用户设备的音视频流。通过获取媒体流，开发者可以实现实时通信、音视频流媒体、屏幕录制等功能。务必注意该方法的兼容性，并根据不同浏览器和设备进行适配。