哪些iOS浏览器支持访问摄像头与BLE服务？

可选浏览器推荐 #

• Safari：iOS端对Web API支持最完整的原生浏览器，iOS 13+已经全面支持MediaDevices.getUserMedia()调用摄像头，iOS 15+原生支持Web Bluetooth API，无需额外配置，注意要走HTTPS或者localhost调试环境才能正常调用权限
• 微信内嵌浏览器（微信8.0+版本）：支持摄像头调用，BLE能力需要通过微信JS-SDK调用，原生Web BLE API被默认屏蔽
• 自定义WKWebView容器：如果是内部业务场景，可以自行打包基于WKWebView的专属容器，通过原生桥接方式开放摄像头、BLE权限，不受系统Web API版本限制

脚本实现方案 #

摄像头调用脚本 #

注意必须在HTTPS协议下运行，首次调用会弹出权限申请框，用户授权后才能正常访问

适配iOS 13+ Safari的原生API方案

async function openCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'environment', // 传入user调用前置摄像头
        width: { ideal: 1280 },
        height: { ideal: 720 }
      }
    });
    // 将流绑定到页面video标签播放
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
    await videoElement.play();
  } catch (err) {
    console.error('摄像头调用失败：', err);
    // 按需处理权限拒绝、设备不支持等异常场景
  }
}

如果是微信内嵌浏览器环境，直接调用微信JS-SDK的chooseImage/getLocalImgData相关接口即可实现摄像头访问。

BLE调用脚本 #

适配iOS 15+ Safari的原生Web BLE API方案

Web BLE API仅支持在用户主动交互事件（比如点击按钮）的回调中触发，不能页面加载时自动调用，仅支持连接BLE 4.0及以上版本的低功耗蓝牙设备

async function connectBLE() {
  try {
    // 弹出系统原生设备选择框，需用户手动选择要连接的BLE设备
    const device = await navigator.bluetooth.requestDevice({
      acceptAllDevices: true,
      // 也可通过指定服务UUID过滤设备：filters: [{ services: ['替换为你的服务UUID'] }]
    });
    // 连接GATT服务
    const server = await device.gatt.connect();
    // 获取目标服务
    const service = await server.getPrimaryService('替换为你的服务UUID');
    // 获取特征值
    const characteristic = await service.getCharacteristic('替换为你的特征值UUID');
    // 后续可按需实现读取/写入数据、监听设备通知等逻辑
    console.log('BLE连接成功');
  } catch (err) {
    console.error('BLE连接失败：', err);
  }
}

如果是微信内嵌浏览器环境，调用微信JS-SDK的wx.openBluetoothAdapter、wx.createBLEConnection系列接口即可实现BLE能力访问。

常见踩坑提示 #

• 所有权限相关API必须在用户交互事件（click、tap等）的同步回调里触发，不能在异步回调中调用或者页面加载自动触发，iOS系统会直接拦截这类调用
• 低于iOS 15的系统版本不支持原生Web BLE API，只能通过原生App封装或者自定义WebView桥接实现
• 不要在跨域iframe里调用摄像头、BLE API，iOS会默认屏蔽跨域iframe的权限申请

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