刚好之前处理过类似的移动Web相机唤起需求，踩过不少坑，你的两个问题其实可以通过HTML属性配置+少量JS逻辑精准解决，下面给你分步拆解：

1. 强制移动端仅唤起相机（禁用相册选择） #

方案一：HTML属性组合（快速实现） #

利用HTML5文件输入的capture和accept属性，直接告诉浏览器优先唤起相机而非相册：

<input type="file" id="cameraInput" accept="image/*" capture="camera">

• accept="image/*"限制仅选择图片文件
• capture="camera"明确指定唤起相机，部分设备会直接跳过相册选项

如果遇到部分Android设备仍弹出选择菜单，可以更精准指定摄像头类型：

• capture="environment"：强制唤起后置摄像头
• capture="user"：强制唤起前置摄像头
  同时搭配具体图片格式，进一步缩小系统选择范围：

<input type="file" id="cameraInput" accept="image/jpeg,image/png" capture="environment">

方案二：MediaDevices API（完全可控） #

如果还是有设备不遵守属性规则，推荐直接使用Web API调用相机，完全绕过系统文件选择器，从根源杜绝相册选项：

const cameraBtn = document.getElementById('cameraBtn');
const photoPreview = document.getElementById('photoPreview');

cameraBtn.addEventListener('click', async () => {
  try {
    // 请求相机权限
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const video = document.createElement('video');
    video.srcObject = stream;
    await video.play();

    // 捕获相机帧转为图片文件
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 转为File对象（可直接用于上传）
    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg'));
    const photoFile = new File([blob], `shot_${Date.now()}.jpg`, { type: 'image/jpeg' });

    // 停止相机流
    stream.getTracks().forEach(track => track.stop());

    // 预览或处理文件
    photoPreview.src = URL.createObjectURL(photoFile);
  } catch (err) {
    console.error('相机调用失败:', err);
    alert('无法访问相机，请检查权限设置');
  }
});

这种方式完全由你控制流程，兼容性覆盖绝大多数现代移动浏览器。

2. 桌面端的差异化处理 #

桌面浏览器本身不支持通过input[type=file]直接唤起相机，我们可以做以下适配：

方式一：隐藏功能+提示 #

用媒体查询在桌面端隐藏相机按钮，替换为提示文本：

@media (min-width: 769px) {
  #cameraInput, #cameraBtn {
    display: none;
  }
  .desktop-tip {
    display: block;
    color: #666;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
  }
}

方式二：JS检测+禁用 #

通过用户代理判断设备类型，禁用桌面端的相机功能并提示：

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

const cameraInput = document.getElementById('cameraInput');
if (!isMobile()) {
  cameraInput.disabled = true;
  cameraInput.title = "该功能仅支持移动设备";
  const tip = document.createElement('span');
  tip.textContent = "请在手机上使用相机功能";
  tip.style.color = "#999";
  cameraInput.parentNode.appendChild(tip);
}

方式三：兼容桌面端相机 #

如果想支持桌面端用户，同样可以用上面的getUserMedia API，实现和移动端一致的相机拍摄功能，逻辑完全复用。

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