确保用户在React应用程序中触发事件之前允许麦克风访问

Question

我已经创建了一个带有麦克风按钮的React组件:

• OnMouseDown=>用户开始录制音频
• OnMouseUp=>录音结束

也就是说，只要长按该按钮，用户就可以继续录音(类似于WhatsApp/其他应用的语音留言功能)。

我的问题是，当页面第一次出现在用户的桌面上时，当他们点击按钮录制时，Chrome弹出一个对话框，要求用户允许访问麦克风。

问题在于，为了点击"ok"在对话框中，用户必须在按钮上鼠标向上，这将导致一个错误，因为录制元素尚未创建。

有没有办法使OnMouseDown=>

1. 确保用户有权限访问麦克风
2. 如果没有，请求允许而不触发记录序列

从我所做的研究来看，我似乎需要做一些类似的事情:

const onMouseDown = async () => {
await navigator.mediaDevices.getUserMedia({ audio: true });
// rest of code
};

但似乎这实际上启动了一个记录器(并且不会有任何相应的MouseUp事件来结束它)，我想用这部分代码做的所有事情是:

• 如果用户已经授予权限，则不显示
• 请求允许，如果第一次和退出事件，以确保麦克风在下次用户点击时启用。

Answer 1

如果有人遇到同样的问题，我最终不得不做的是创建一个全局变量检查麦克风权限是否被授予(我通过Redux做到了这一点))。然后，当组件第一次挂载时，我运行一个操作:

1. 根据全局变量
检查麦克风权限
2. 如果没有授予/拒绝，则运行以下命令:

export const checkMicrophonePermissions = () =>异步调度=>{Let return = false;

await navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => retval = true)
.catch(err => retval = false);
dispatch({
type: MICROPHONE_ACCESS,
payload: retval
});

}

基本上，它将在页面第一次加载时运行，并弹出一个对话框，要求用户允许麦克风访问，并根据用户的回复将与MICROPHONE_ACCESS相关的全局变量设置为true/false。