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

Question

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

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

换句话说，只要按住按钮，用户就可以继续录音（类似于WhatsApp/其他应用程序的语音消息功能）。

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

问题在于，为了在对话框中单击“确定”，用户必须将鼠标悬停在按钮上，由于尚未创建记录元素而导致错误。

有没有办法让 OnMouseDown =>

确保用户已授予访问麦克风的权限
如果没有，请在不触发录制序列的情况下请求许可

根据我所做的研究，我似乎需要按照以下方式做一些事情：

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

但似乎这实际上启动了一个记录器（并且不会有任何相应的 MouseUp 事件来结束它）并且我想对这部分代码做的是：

如果用户已经授予权限，则无任何内容
第一次请求权限并退出事件以确保在用户下次点击时启用麦克风。

Answer 1

万一有人遇到同样的问题，我最终要做的是创建一个全局变量来检查是否授予了麦克风权限（我通过 Redux ).然后，当组件第一次安装时，我运行一个动作：

根据全局变量检查麦克风权限
如果未授予/拒绝，则运行如下：

export const checkMicrophonePermissions = () => 异步调度 => { 让 retval = 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 根据用户的回复。

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

Ensuring user permits Microphone access before firing event in React app

javascript

microphone

audio-recording

reactjs