Navigator.getUserMedia() 已弃用。如何更改为 MediaDevices.getUserMedia()

Question

嘿，我正在尝试在浏览器中构建一个面部人工智能。在我的笔记本电脑上一切正常，但当我尝试在树莓派上运行它时，它说 navigator.getUserMedia() 已弃用。我知道有一种名为 MediaDevices.getUserMedia 的新方法，但我不知道如何实现它。

代码

const video = document.getElementById('video')

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models'),
]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

Answer 1

There are a couple of methods listed on the mediaDevices.getUserMedia() MDN page. You can access the mediaDevices object like this:

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

Or use the promises directly:

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});

The below is adapted from the Examples section:

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

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });