我之前也碰到过一模一样的情况——React的QrReader组件在安卓全浏览器、iPhone Safari都能正常扫码，但到了iPhone的Chrome、Firefox里连权限请求都弹不出来。这个问题本质是iOS第三方浏览器的隐私机制限制，给你几个可行的解决方案：

核心原因 #

iOS上的Chrome、Firefox等第三方浏览器都是基于WebKit内核开发的，并且受Apple的隐私政策约束：媒体设备（摄像头）的访问请求必须由用户的显式交互（比如点击、触摸操作）触发。如果你的QrReader是在组件挂载时自动初始化并请求权限，这些浏览器会直接拦截请求，不会弹出权限提示框。而Safari在页面加载场景下的限制相对宽松，所以能正常工作。

解决方案 #

1. 用用户主动交互触发扫码初始化 #

把扫码组件的渲染逻辑绑定到用户的点击事件上，确保权限请求是由用户主动操作发起的：

class ScannerComponent extends React.Component {
  state = {
    isScanning: false
  };

  handleScan = (scanData) => {
    if (scanData) {
      // 处理扫码结果，比如跳转、存储数据
      console.log("扫码结果:", scanData);
    }
  };

  handleError = (error) => {
    console.error("扫码出错:", error);
  };

  startScanning = () => {
    // 由用户点击触发扫码组件的渲染
    this.setState({ isScanning: true });
  };

  render() {
    return (
      <div className="scanner-container">
        {!this.state.isScanning && (
          <button onClick={this.startScanning} style={{ padding: "10px 20px" }}>
            点击开始扫码
          </button>
        )}
        {this.state.isScanning && (
          <QrReader
            delay={300}
            onError={this.handleError}
            onScan={this.handleScan}
            style={{ width: "100%" }}
          />
        )}
      </div>
    );
  }
}

2. 检查组件底层的媒体请求逻辑 #

如果你的QrReader是基于navigator.mediaDevices.getUserMedia实现的，要确保这个API的调用是在用户交互事件的回调函数内执行的。有些旧版本的扫码组件可能会在组件挂载时直接调用getUserMedia，这在iOS第三方浏览器里会被拦截。

3. 确保网站使用HTTPS协议 #

虽然Safari可能在局部环境（比如localhost）允许摄像头访问，但iOS第三方浏览器通常要求网站必须是HTTPS协议才能请求媒体设备权限。如果是开发环境，可以用本地HTTPS服务（比如create-react-app的HTTPS=true npm start）测试。

按照上面的方法调整后，iPhone的Chrome、Firefox应该就能正常弹出摄像头权限请求，扫码功能也能正常工作了。

内容的提问来源于stack exchange，提问作者Alex