iOS 17环境下Next.js中使用<input type="file" capture>无法调用相机拍摄问题

Hey there! I’ve dealt with exactly this iOS 17 + Next.js camera capture issue not long ago, so let me walk you through the fixes that worked for me and other common pitfalls to check.

First up, let's fix the capture attribute handling. Your original code uses platform-specific values, but iOS 17 changed how it interprets the capture property. Instead of conditional logic for Android/iOS, try setting it to "camera" directly — this is more cross-platform compatible and works reliably on iOS 17:

<input
  ref={fileInputRef}
  type="file"
  accept="image/*"
  capture="camera"
  onChange={handleImageChange}
  className="w-full"
/>

Next, check the two non-negotiables for iOS 17:

• HTTPS is mandatory: iOS blocks camera access on HTTP sites, even for local development. If you're testing locally, run Next.js with HTTPS enabled using next dev --experimental-https to mimic production conditions.
• Don’t hide the input with display: none: iOS 17 might ignore input elements that are completely hidden. Instead, use styles like opacity: 0 or absolute positioning to tuck it out of sight while keeping it interactive. Here's a common pattern with a visible trigger button:

<div className="flex gap-2 items-center">
  <button onClick={() => fileInputRef.current?.click()}>
    <Camera size={20} /> 打开相机
  </button>
  <input
    ref={fileInputRef}
    type="file"
    accept="image/*"
    capture="camera"
    onChange={handleImageChange}
    className="absolute opacity-0 w-0 h-0"
  />
</div>

Then, watch out for Next.js hydration quirks:
Sometimes server-side rendering can reset input properties during hydration. Wrap your input setup in a useEffect to ensure it only runs on the client, after the component is fully mounted:

import { useRef, useEffect } from 'react';
import { Camera } from "lucide-react";

export default function CameraUpload() {
  const fileInputRef = useRef(null);

  useEffect(() => {
    if (fileInputRef.current && typeof window !== 'undefined') {
      // 确保仅在客户端环境配置capture属性
      fileInputRef.current.setAttribute('capture', 'camera');
    }
  }, []);

  const handleImageChange = (e) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      // 这里处理你的图片上传逻辑
      console.log('拍摄的图片:', selectedFile);
    }
  };

  return (
    <div className="flex gap-2">
      <button 
        onClick={() => fileInputRef.current?.click()}
        className="p-2 rounded bg-slate-700 text-white"
      >
        <Camera size={20} /> 拍摄照片
      </button>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={handleImageChange}
        className="absolute opacity-0 w-0 h-0"
      />
    </div>
  );
}

One last tiny iOS 17 gotcha: Avoid overcomplicating the accept attribute. Stick to accept="image/*" instead of adding multiple media types (like image/*,video/*) — the latter can trigger iOS's media picker instead of the direct camera interface.

Give these steps a try in order, and you should get the camera to pop up as expected on iOS 17!

内容来源于stack exchange