getUserMedia 示例 - JavaScript

getUserMedia 是一个 JavaScript API，用于从本地媒体设备（如摄像头或麦克风）中捕获媒体流。本文将介绍如何使用 getUserMedia API，并包含一些示例代码。

使用步骤

1. 检测浏览器是否支持 getUserMedia：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (!navigator.getUserMedia) {
  alert('getUserMedia is not supported!');
}

上述代码会检测用户的浏览器是否支持 getUserMedia API，如果不支持则会弹出提示信息。

2. 请求访问本地媒体设备：

navigator.getUserMedia({ audio: true, video: true }, function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
}, function(err) {
  console.log('getUserMedia error: ' + err);
});

上述代码会请求获取用户的摄像头和麦克风权限，并将视频流绑定到指定的video标签上。

3. 停止本地媒体设备：

var video = document.querySelector('video');
var stream = video.srcObject;
var tracks = stream.getTracks();
tracks[0].stop();

上述代码可以停止媒体设备的录制。

示例代码

以下是一个简单的示例代码，用于访问用户的摄像头和麦克风，以及停止录制：

// 检测浏览器支持性
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (!navigator.getUserMedia) {
  alert('getUserMedia is not supported in this browser!');
}

// 请求获取摄像头和麦克风权限
navigator.getUserMedia({ audio: true, video: true }, function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
}, function(err) {
  console.log('getUserMedia error: ' + err);
});

// 停止录制
var video = document.querySelector('video');
var stream = video.srcObject;
var tracks = stream.getTracks();
tracks[0].stop();

结论

本文介绍了如何使用 getUserMedia API 访问本地媒体设备，并提供了示例代码供您参考。注意，不同的浏览器可能会有不同的支持和实现方式。因此，建议您在代码中检测浏览器支持性，并提供备选的方案，以便在不同的浏览器上都能够正常工作。