能否通过JavaScript阻止智能手机无摄像头时打开系统相册？

你当前在页面中编写了如下用于调用智能手机摄像头拍摄图片的input元素：

<input ng-model="fileModel" type="file" name="input_default" accept="image/*;capture=camera"
 capture="camera" capture />

实际运行现象：搭载Android或iOS系统的智能手机未配备摄像头时，点击该input控件会直接打开手机系统相册。
你的需求为：当检测到设备无摄像头时向用户展示无摄像头的提示，同时禁止打开设备相册。
你曾尝试通过如下代码实现需求但未生效：

var el = document.createElement('input');
if(el.capture == undefined){
   // 向用户展示提示信息
} else{
   // 正常调用设备摄像头
}

核心疑问：是否可以通过JavaScript实现阻止智能手机打开系统相册的效果？

可以实现，你之前的检测逻辑存在本质错误：判断input元素的capture属性是否存在，只能检测当前浏览器是否支持capture属性，完全无法判断设备实体是否配备摄像头，因此逻辑不会生效。
正确实现思路是把触发上传的控制权从原生input转移到自定义逻辑中，从点击源头拦截无摄像头场景下的系统相册调起，具体步骤如下：

• 把原生file类型的input设置为隐藏状态，禁止用户直接点击触发
• 新增一个自定义的可点击按钮作为用户唯一的上传入口
• 用户点击自定义按钮时，优先通过浏览器媒体API检测设备是否存在摄像头硬件
  • 检测到无摄像头时，直接弹出提示，不执行后续input触发逻辑，自然不会打开系统相册
  • 检测到有摄像头时，再通过JS代码触发隐藏的原生file input的点击事件，正常调起摄像头拍摄

参考实现代码 #

HTML部分调整 #

<!-- 自定义上传按钮，作为用户可见的唯一点击入口 -->
<button id="cameraUploadBtn" type="button">拍摄上传</button>
<!-- 原file input隐藏，移除重复冗余的capture属性 -->
<input 
  ng-model="fileModel" 
  type="file" 
  name="input_default" 
  accept="image/*" 
  capture="camera" 
  hidden
/>

JS检测与拦截逻辑 #

// 检测设备是否配备可用摄像头
async function checkHasCamera() {
  // 兼容非安全上下文/老版本浏览器
  if (!navigator.mediaDevices?.enumerateDevices) {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
  }
  try {
    const deviceList = await navigator.mediaDevices.enumerateDevices();
    return deviceList.some(device => device.kind === 'videoinput');
  } catch (err) {
    // 权限拒绝或检测异常时可根据业务需求处理，默认按无摄像头拦截或走降级逻辑
    return false;
  }
}

// 绑定自定义按钮点击事件
document.querySelector('#cameraUploadBtn').addEventListener('click', async (e) => {
  e.preventDefault();
  const hasCamera = await checkHasCamera();
  if (!hasCamera) {
    alert('当前设备未配备摄像头，无法使用拍摄上传功能');
    return;
  }
  // 校验通过才触发原生file input的点击
  document.querySelector('input[name="input_default"]').click();
});

注意事项 #

• 媒体设备检测API需要在HTTPS安全上下文环境下才能正常运行，HTTP环境下可能出现检测失效的问题
• iOS Safari对媒体权限校验较严格，首次调用检测接口时可能弹出权限申请，属于正常现象
• 不要给原生file input绑定任何直接暴露给用户的点击入口，所有触发逻辑必须经过前置检测，才能完全避免意外调起系统相册的问题

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