Google Picker API iframe不可见：Google Script调用摄像头空白报错求助

嘿，这个问题我之前也碰到过！你遇到的Refused to Display [url] in a frame because it set 'X-Frame-Options' to 'same origin'报错，根源在于Google Picker的CameraView组件本质是加载Google Photos的摄像头页面，而该页面的响应头设置了X-Frame-Options: same-origin——这意味着它只能在Google自身域名的框架中显示，而Google Apps Script的Web App页面运行在script.google.com的iframe下，属于跨域场景，所以直接使用就会被浏览器拦截，导致页面空白。

替代解决方案：使用HTML5原生摄像头捕获+GAS服务器端处理 #

既然Picker的CameraView走不通，我们可以改用HTML5的原生文件捕获API直接调用设备摄像头，再通过GAS的服务器端函数把图片上传到Google Drive（或者做其他处理），完全避开跨域嵌入的问题。

1. 修改picker.html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Camera Capture Example</title>
  <style>
    body { padding: 20px; font-family: Arial, sans-serif; }
    #cameraInput { margin: 20px 0; padding: 10px; background: #4285F4; color: white; border: none; border-radius: 4px; cursor: pointer; }
    #preview { max-width: 400px; margin-top: 20px; border: 1px solid #ddd; padding: 10px; }
  </style>
</head>
<body>
  <h2>捕获摄像头图片</h2>
  <!-- 原生摄像头捕获按钮 -->
  <input type="file" id="cameraInput" accept="image/*" capture="user" style="display:none;">
  <button onclick="document.getElementById('cameraInput').click()">打开摄像头</button>
  
  <!-- 图片预览区域 -->
  <div id="preview"></div>

  <script>
    document.getElementById('cameraInput').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (!file) return;

      // 预览图片
      const reader = new FileReader();
      reader.onload = function(event) {
        const img = document.createElement('img');
        img.src = event.target.result;
        img.style.maxWidth = '100%';
        document.getElementById('preview').innerHTML = '<h3>预览:</h3>';
        document.getElementById('preview').appendChild(img);
      };
      reader.readAsDataURL(file);

      // 上传到Google Drive（调用服务器端函数）
      const formData = new FormData();
      formData.append('image', file);
      
      google.script.run.withSuccessHandler(function(fileUrl) {
        alert('图片上传成功！链接：' + fileUrl);
      }).withFailureHandler(function(error) {
        alert('上传失败：' + error.message);
      }).uploadImageToDrive(formData);
    });
  </script>
</body>
</html>

2. 在Code.gs中添加服务器端上传函数

function doGet() {
  return HtmlService.createHtmlOutputFromFile('picker.html')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 允许页面被嵌入（如果需要部署为Web App）
}

function uploadImageToDrive(formData) {
  try {
    // 创建新的Drive文件夹（可选，也可以指定现有文件夹ID）
    const folder = DriveApp.createFolder('摄像头捕获图片');
    // 上传文件
    const file = folder.createFile(formData.image);
    // 设置文件权限为可查看（可选）
    file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
    // 返回文件链接
    return file.getUrl();
  } catch (error) {
    throw new Error('处理图片时出错：' + error);
  }
}

关键说明 #

• HTML5原生捕获：<input type="file" accept="image/*" capture="user">是HTML5标准API，直接调用设备摄像头，不需要依赖第三方服务，完全避开了跨域嵌入的限制。
• GAS服务器端处理：通过google.script.run将捕获的图片文件传递到服务器端，利用Drive API（内置的DriveApp服务）上传到Google Drive，流程简单且安全。
• 部署注意事项：如果要将Web App部署公开访问，记得在部署时设置“Who has access”为“Anyone, even anonymous”，并且确保doGet()函数中的setXFrameOptionsMode设置正确。

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