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

Question

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

• OnMouseDown

  => 用户开始录制音频

• OnMouseUp

  => 录音结束

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

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

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

有没有办法让它

OnMouseDown

=>

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

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

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

但似乎实际上启动了一个记录器（并且不会有任何相应的

MouseUp

事件来结束它），我想要对这部分代码做的就是：

• 如果用户已经授予权限，则什么也不做
• 如果是第一次并退出事件，请请求许可，以确保用户下次单击时启用麦克风。

Answer 1

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

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

    export const checkMicrophonePermissions = () => async dispatch => {
          let 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

。