如何通过Drive API获取视频并向React客户端无登录流式传输？

首先你当前的代码存在冲突：alt: 'media'用于直接下载文件内容，而fields: 'webViewLink'是获取文件的网页预览链接——这个预览链接需要用户登录Google账号才能访问，没法实现无需登录的流式传输。下面是具体解决方案：

1. Node.js后端需要返回的内容 #

根据文件的共享状态，你需要返回两种不同的URL给React客户端：

情况1：文件已设置为公开共享 #

如果文件已经设置为「知道链接的任何人都可以查看」，直接获取webContentLink（直接下载链接）即可，这个链接无需登录就能访问：

const driveService = google.drive({ version: "v3", auth });
const response = await driveService.files.get({
  fileId: fileId,
  fields: 'webContentLink' // 移除alt: 'media'，我们要获取链接而非文件内容
});

// 将链接返回给React客户端
res.status(200).json({ videoUrl: response.data.webContentLink });

情况2：文件未公开（需要权限访问） #

如果文件没有公开，你需要生成临时签名URL，这个URL带有有效期，客户端无需登录就能访问，且不会泄露你的API权限：

const driveService = google.drive({ version: "v3", auth });
const signedUrlResponse = await driveService.files.generateSignedUrl({
  fileId: fileId,
  requestBody: {
    expiration: '2024-12-31T23:59:59Z', // 设置URL的有效期，按需调整
    fields: 'mediaLink'
  }
});

// 返回签名URL给客户端
res.status(200).json({ videoUrl: signedUrlResponse.data.signedUrl });

注意：生成签名URL需要使用Google服务账号，并且服务账号必须拥有该文件的访问权限（可将文件共享给服务账号的邮箱）。

2. React客户端的流式传输实现 #

拿到后端返回的videoUrl后，直接用HTML5的<video>标签即可实现流式传输——浏览器会自动处理分段加载，无需额外的流式逻辑：

import { useState, useEffect } from 'react';

function DriveVideoPlayer() {
  const [videoUrl, setVideoUrl] = useState('');
  const targetFileId = '你的Google Drive文件ID';

  useEffect(() => {
    // 调用后端接口获取视频URL
    fetch(`/api/get-drive-video?fileId=${targetFileId}`)
      .then(res => res.json())
      .then(data => setVideoUrl(data.videoUrl))
      .catch(err => console.error('获取视频链接失败:', err));
  }, [targetFileId]);

  return (
    <div className="video-container">
      <video controls width="100%" preload="metadata">
        {videoUrl && <source src={videoUrl} type="video/mp4" />}
        你的浏览器不支持HTML5视频播放。
      </video>
    </div>
  );
}

export default DriveVideoPlayer;

关键注意事项 #

• 绝对不要在React客户端直接调用Google Drive API，会暴露你的API密钥和认证信息，必须通过后端中转。
• 公开文件的webContentLink仅在文件权限设置为「任何人可查看」时有效，否则访问会跳转到Google登录页面。
• 签名URL的有效期要合理设置，避免过长导致安全风险，或过短影响用户体验。

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