Google Apps Script网站相机访问异常：无法唤起相机并上传至Drive

嘿，我来帮你搞定这个问题！你遇到的capture=camera没唤起相机反而打开文件管理器的情况，多半是浏览器对属性的解析差异——有些现代浏览器需要更明确的取值，比如capture="user"（调用前置摄像头）或capture="environment"（调用后置摄像头），而且得确保你的Web应用是HTTPS访问的（GAS Web应用默认是HTTPS，这点不用操心）。不过要注意，桌面浏览器本身没有原生相机支持的话，还是会直接打开文件管理器，得在移动设备上测试才会唤起相机。

不过与其纠结input标签的capture属性，我给你一套更可靠的方案，直接调用设备相机实时预览、拍照，然后上传到Google Drive，分前端和后端两部分，亲测有效：

1. 前端代码（HTML页面） #

这部分会创建相机预览区、操作按钮，调用浏览器的MediaDevices API获取相机画面：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      #camera-preview {
        width: 300px;
        height: 225px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      button {
        margin: 5px;
        padding: 8px 16px;
        cursor: pointer;
        background: #4285F4;
        color: white;
        border: none;
        border-radius: 4px;
      }
      button:disabled {
        background: #ccc;
        cursor: not-allowed;
      }
      #captured-image {
        margin-top: 10px;
        max-width: 300px;
      }
    </style>
  </head>
  <body>
    <div id="camera-preview"></div>
    <button id="start-camera">启动相机</button>
    <button id="take-photo" disabled>拍照</button>
    <button id="upload-photo" disabled>上传到Drive</button>
    <img id="captured-image" style="display:none;" alt="刚拍的照片">

    <script>
      let cameraStream;
      const previewContainer = document.getElementById('camera-preview');
      const startBtn = document.getElementById('start-camera');
      const takeBtn = document.getElementById('take-photo');
      const uploadBtn = document.getElementById('upload-photo');
      const capturedImg = document.getElementById('captured-image');
      let capturedPhotoBlob;

      // 启动相机
      startBtn.addEventListener('click', async () => {
        try {
          // 请求相机权限，默认调用后置摄像头
          cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
          const videoElement = document.createElement('video');
          videoElement.srcObject = cameraStream;
          videoElement.autoplay = true;
          videoElement.width = 300;
          videoElement.height = 225;
          previewContainer.appendChild(videoElement);
          
          startBtn.disabled = true;
          takeBtn.disabled = false;
        } catch (error) {
          alert(`无法访问相机：${error.message}`);
        }
      });

      // 拍照并生成Blob
      takeBtn.addEventListener('click', () => {
        const videoElement = previewContainer.querySelector('video');
        const canvas = document.createElement('canvas');
        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(videoElement, 0, 0);
        
        // 将画布内容转为JPEG Blob，压缩质量0.9
        canvas.toBlob(blob => {
          capturedPhotoBlob = blob;
          capturedImg.src = URL.createObjectURL(blob);
          capturedImg.style.display = 'block';
          uploadBtn.disabled = false;
        }, 'image/jpeg', 0.9);

        // 停止相机流，释放资源
        cameraStream.getTracks().forEach(track => track.stop());
        previewContainer.innerHTML = '';
        takeBtn.disabled = true;
      });

      // 上传到Drive
      uploadBtn.addEventListener('click', async () => {
        const formData = new FormData();
        // 给图片加时间戳命名，避免重复
        formData.append('photo', capturedPhotoBlob, `photo-${new Date().getTime()}.jpg`);
        
        // 调用后端GAS函数，处理成功/失败回调
        google.script.run.withSuccessHandler(message => {
          alert(message);
          // 重置界面，准备下一次拍照
          capturedImg.style.display = 'none';
          uploadBtn.disabled = true;
          startBtn.disabled = false;
        }).withFailureHandler(error => {
          alert(`上传失败：${error.message}`);
        }).uploadPhotoToDrive(formData);
      });
    </script>
  </body>
</html>

2. 后端代码（Google Apps Script） #

这部分负责接收前端传来的图片Blob，保存到你指定的Google Drive文件夹：

// 加载前端HTML页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('相机上传到Drive');
}

// 处理图片上传逻辑
function uploadPhotoToDrive(formData) {
  try {
    // 替换成你的目标Drive文件夹ID（从文件夹URL里提取）
    const targetFolderId = 'YOUR_FOLDER_ID_HERE';
    const targetFolder = DriveApp.getFolderById(targetFolderId);
    
    // 从FormData中获取图片Blob
    const photoBlob = formData.photo;
    // 在目标文件夹中创建图片文件
    const uploadedFile = targetFolder.createFile(photoBlob);
    
    return `上传成功！文件链接：${uploadedFile.getUrl()}`;
  } catch (error) {
    return `上传出错：${error.message}`;
  }
}

必看的注意事项 #

• 部署设置：部署Web应用时，要选择正确的权限：如果允许公开访问，选“任何人，甚至匿名用户”；如果仅限内部使用，选“仅限组织内用户”。第一次运行时会提示授权，要允许脚本访问你的Drive。
• 兼容性：相机访问只能在HTTPS环境下工作（GAS Web应用默认满足），移动设备的浏览器支持最好，桌面浏览器需要有摄像头硬件并允许权限。
• 关于Picker API：你之前试的Picker API本来就是用来选择已存在的文件的，不是用来直接捕获相机图片的，所以用原生的MediaDevices API才是正确的方向。

如果还是遇到问题，打开浏览器的开发者工具看控制台的错误信息，通常能定位到权限或者代码的具体问题。

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