无法在"媒体设备"上执行'getUserMedia'：必须至少请求一个音频和视频

Question

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

这是我的代码：

/**
* 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
}
}

我的问题是我收到错误：未捕获(承诺(：类型错误：无法在"媒体设备"上执行"getUserMedia"：必须至少请求一个音频和视频

类型错误：无法在"媒体设备"上执行"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/

然后发现"类型错误："在音频：假和视频：假时被抛出。

我需要保留视频：假。 为什么？我对打开视频并"吓唬"用户认为我们的软件正在间谍活动不感兴趣。 这是一个隐私问题。 https://blog.addpipe.com/common-getusermedia-errors/

这是我实现的代码：

注意：当用户单击麦克风的图标时，正在传递麦克风状态。 当用户单击时，它会传递"OFF"或"FALSE"。当用户再次单击时，它会传递"ON"或"TRUE"。 但是，如果视频保持"FALSE"，则类型错误将触发。 这是我的问题。 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

这个问题在 5 年前得到了支持，当我搜索发生在我身上的相同问题时，我偶然发现了这个问题。

我不知道为什么，但我注意到，如果我在创建音频上下文后尝试使用 getUserMedia((，那么就会出现该错误。

所以如果你有这样的..

let ctx = new AudioContext();
navigator.mediaDevices.getUserMedia({audio: true});

这将产生该错误。

现在，如果您删除新的 AudioContext(( 行，一切都会很好，并且您将获得一个流。

这可能会帮助某人。我仍在寻找这种行为的原因。

Answer 2

您需要使用异步方法检查相机和微型的权限navigator.permissions.query({ name: 'camera'/*and 'microphone'*/ })

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

例如：

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();
});