angular6 - 无法在 'getUserMedia' : At least one of audio and video must be requested 上执行 'MediaDevices'

Question

我正在通过 Typescript 以编程方式使用 AudioContext。

这是我的代码:

/**
 * Checks for getUserMedia
 *
 * @params: none
 * @returns: any
 */
public hasGetUserMedia(): any {
  const mediaservices = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
  console.log('Media Services: ', navigator.mediaDevices);
  return mediaservices;
}

/**
 * A function to get the return value of hasGetUserMedia
 *
 * @params: none
 * @return: none
 */
public isUserMediaGood(micstatus: boolean) {
  const self = this;
  if (this.hasGetUserMedia()) {
    // Good to go!
    self.isUserMediaThere = true;
    console.log('We have User Media Houston!');

    // Now accessInputDevice
    this.accessInputDevice(micstatus);
  } else {
    // Oops!
    self.isUserMediaThere = false;
    console.log('WARNING: getUserMedia() is not supported by your browser');

  }
}

public accessInputDevice(micstatus: boolean) {
  window.AudioContext = window.AudioContext;

  const context = new AudioContext();
  const constraints = {
    audio: micstatus,
    video: false
  }

  // initialization
  if (localStorage.getItem('microphone') === null) {
    // just assume it is prompt
    localStorage.setItem('microphone', 'prompt');
  }

  // Then somewhere
  navigator.getUserMedia({audio: true}, function (e) {
    // http://stackoverflow.com/q/15993581/1008999
    //
    // In chrome, If your app is running from SSL (https://),
    // this permission will be persistent.
    // That is, users won't have to grant/deny access every time.
    localStorage.setItem("voice_access", "granted");

  }, function (err) {
    if (err.name === 'PermissionDismissedError') {
      localStorage.setItem('voice_access', 'prompt')
    }
    if (err.name === 'PermissionDeniedError') {
      localStorage.setItem('voice_access', 'denied');
    }
  })

  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      const microphone = context.createMediaStreamSource(stream);
      const filter = context.createBiquadFilter();

      // microphone -> filter -> destination
      console.log('Mic: ', microphone);

      microphone.connect(filter);
      filter.connect(context.destination);
    });
}

public gotDevices(deviceInfos: any) {

  for (let i = 0; i !== deviceInfos.length; ++i) {
    const deviceInfo = deviceInfos[i];
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label || 'microphone ';
      // this.microphone.appendChild(option);

      console.log('Found device: ', deviceInfo);

      //    } else if (deviceInfo.kind === 'videoinput') {
      //      option.text = deviceInfo.label || 'camera ' +
      //        (videoSelect.length + 1);
      //      videoSelect.appendChild(option);
    } else {
      console.log('Found another kind of device: ', deviceInfo);
    }
  }
}

public getStream() {
  const self = this;
  const constraints = {
    audio: {
      audio: false,
      deviceId: {exact: self.microphone.id}
    },
    //      video: {
    //        deviceId: {exact: videoSelect.value}
    //      }
  };

  navigator.mediaDevices.getUserMedia(constraints).
    then(self.gotStream).catch(self.handleError);
}

public gotStream(stream: any) {
  const self = this;
  window.AudioContext = stream; // make stream available to console
  self.microphone = stream;

}

public handleError(error: any) {


  // log to console first
  console.error('Error: ', error); /* handle the error */
  if (error.name === 'NotFoundError' || error.name === 'DevicesNotFoundError') {
    // required track is missing
  } else if (error.name === 'NotReadableError' || error.name === 'TrackStartError') {
    // webcam or mic are already in use
  } else if (error.name === 'OverconstrainedError' || error.name === 'ConstraintNotSatisfiedError') {
    // constraints can not be satisfied by avb. devices
  } else if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
    // permission denied in browser
  } else if (error.name === 'TypeError' || error.name === 'TypeError') {
    // empty constraints object
  } else {
    // other errors
  }

}

我的问题是我收到错误:未捕获( promise ):TypeError:无法在“MediaDevices”上执行“getUserMedia”:必须至少请求音频和视频之一

TypeError:无法在“MediaDevices”上执行“getUserMedia”:必须至少请求音频和视频之一。

错误发生在这里:

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    const microphone = context.createMediaStreamSource(stream);
    const filter = context.createBiquadFilter();

    // microphone -> filter -> destination
    console.log('Mic: ', microphone);

    microphone.connect(filter);
    filter.connect(context.destination);
  });

我想知道为什么会这样？

更新:

所以，我从这里实现了这个解决方案:

https://medium.com/@barzik/the-new-html5-video-audio-api-has-privacy-issues-on-desktop-chrome-5832c99c7659

然后我点击这个链接:

https://blog.addpipe.com/getusermedia-video-constraints/

然后发现当AUDIO: false和VIDEO: false都抛出“TYPE ERROR:”。

我需要保留视频:错误。为什么？我对打开视频并“恐吓”用户认为我们的软件在进行 spy 事件不感兴趣。这是一个隐私问题。 https://blog.addpipe.com/common-getusermedia-errors/

这是我实现的代码:

注意:当用户点击麦克风图标时，将传递 micstatus。当用户单击时，它会传递“OFF”或“FALSE”。当用户再次点击时，它传递“ON”或“TRUE”。但是，如果 VIDEO 保持为“FALSE”，则会触发 TYPE ERROR。那是我的问题。 CHROME 不允许 FALSE，FALSE 被传递到 getUserMedia() 方法中。最后一个错误被触发。这就是我需要解决的问题:保持视频关闭并打开或关闭音频，从而不会引发类型错误。

var constraints = {
  video: false,
  audio: micstatus
}

navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
  /* do stuff */
  this.success(success,stream);
}).catch(function (err) {
  // log to console first 
  console.log(err); /* handle the error */
  if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
    // required track is missing
    console.log('Required track is missing');
  } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
    // webcam or mic are already in use
    console.log('Webcam or mic are already in use');
  } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
    // constraints can not be satisfied by avb. devices
    console.log('Constraints can not be satisfied by available devices');
  } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
    // permission denied in browser
    console.log('Permission Denied.');
  } else if (err.name == "TypeError" || err.name == "TypeError") {
    // empty constraints object
    console.log('Both audio and video are FALSE');
  } else {
    // other errors
    console.log('Sorry! Another error occurred.');
  }
});


// SUCCESS FUNCTION
public success(status: any, stream: any): void {
   // Success!!!
   console.log('Success with the Audio Context', status);
   console.log('Audio Context', stream);
}

Answer 1

您需要使用异步方法 navigator.permissions.query({ name: 'camera'/*and 'microphone'*/})

检查摄像头和微 Controller 的权限

这一个返回包含有关您网站权限的信息的对象。

例如:

const checkForVideoAudioAccess = async () => {
        try {
          const cameraResult = await navigator.permissions.query({ name: 'camera' });
          // The state property may be 'denied', 'prompt' and 'granted'
          this.isCameraAccessGranted = cameraResult.state !== 'denied';

          const microphoneResult = await navigator.permissions.query({ name: 'microphone' });
          this.isMicrophoneAccessGranted = microphoneResult.state !== 'denied';
        } catch(e) {
          console.error('An error occurred while checking the site permissions', e);
        }

        return true;
      }

阅读有关权限的更多信息:https://alligator.io/js/permissions-api/

之后，您可以在使用getUserMedia()时使用有关权限的信息

再举个例子:

navigator.mediaDevices.getUserMedia({
          video: !this.isMicrophoneAccessGranted,
          audio: !this.isCameraAccessGranted,
        })
        .then(() => {
          this.initStream();
        });