android - Android/Ionic 上 navigator.mediaDevices.getUserMedia 的 DOMException

Question

我正在尝试通过我的手机摄像头并使用 WebRTC 流式传输视频元素。我这样做如下( fragment ):

    <video id="yourVideo" autoplay muted playsinline></video>

    var yourVideo = document.getElementById("yourVideo");
    // ...

    navigator.mediaDevices.getUserMedia({audio:false, video:true}).
    then(function(stream){
        console.log(stream)
        yourVideo.srcObject = stream
        pc.addStream(stream)
    })
    .catch(function(error){
        console.log(error)
    })

这在浏览器中运行良好，并且显示了我的视频/相机。但是，在电话上它返回错误 DOMException。我找不到任何可以解释这一点的信息。

Running it Ionic V1.X
ionic cordova run android

当我运行 navigator.mediaDevices 时，这是我看到的:

这可能与权限有关吗？如果是这样，我该如何解决？

Answer 1

你得先获取设备源，然后再尝试串流，这样试试

var videoElement = document.getElementById("yourVideo");
var videoSrc = undefined;

navigator.mediaDevices.enumerateDevices()
  .then(getDevices).then(getStream).catch(handleError);

function getDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    if (deviceInfo.kind === 'videoinput') {
      videoSrc = deviceInfo.deviceId;
      break;
    }
  }
}

function getStream() {    
  navigator.mediaDevices.getUserMedia({
    video: {
      deviceId: {
        exact: videoSrc
      }
    }
  }).
  then(gotStream).catch(handleError);
}

function gotStream(stream) {
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.log('Error: ', error);
}