如何在不使用CloudFront的情况下用AWS S3存储桶实现视频流

后端（Node.js）实现 #

核心是利用AWS SDK处理HTTP Range请求，模拟本地文件的分块流传输逻辑，区别在于从S3而非本地磁盘读取分块数据。

1. 依赖准备 #

使用AWS SDK v3（官方推荐版本）：

npm install @aws-sdk/client-s3 express

2. 核心路由实现 #

解析前端的Range请求头，向S3请求对应字节范围的视频数据，通过流式响应返回给前端：

const express = require('express');
const { S3Client, GetObjectCommand } = require('@aws-sdk/client-s3');
const app = express();

// 初始化S3客户端（生产环境建议用IAM角色，避免硬编码密钥）
const s3Client = new S3Client({
  region: '你的S3存储区域',
  // credentials: { accessKeyId: '', secretAccessKey: '' } // 本地开发可临时使用
});

app.get('/stream-s3-video', async (req, res) => {
  const { key } = req.query; // 视频在S3中的对象键
  const rangeHeader = req.headers.range;

  if (!rangeHeader) {
    return res.status(416).send('需要Range请求头');
  }

  // 解析Range头，格式示例：bytes=0-1023
  const [start, end] = rangeHeader.replace(/bytes=/, '').split('-').map(Number);
  const videoParams = {
    Bucket: '你的S3桶名',
    Key: key,
    Range: `bytes=${start}-${end || ''}` // 若end为空，S3会返回从start到末尾的所有数据
  };

  try {
    const s3Response = await s3Client.send(new GetObjectCommand(videoParams));
    const contentLength = Number(s3Response.ContentLength);
    const actualEnd = end || contentLength - 1;

    // 设置响应头，告诉浏览器支持分块播放
    res.writeHead(206, {
      'Content-Type': s3Response.ContentType,
      'Content-Range': `bytes ${start}-${actualEnd}/${contentLength}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': actualEnd - start + 1,
      'Cache-Control': 'public, max-age=31536000' // 可选，设置缓存策略减少重复请求
    });

    // 将S3的可读流管道到响应流
    s3Response.Body.pipe(res);
  } catch (err) {
    console.error('S3请求失败:', err);
    res.status(500).send('视频加载失败');
  }
});

app.listen(3001, () => console.log('后端服务启动在3001端口'));

前端（React）实现 #

和本地视频的播放逻辑基本一致，只需将video标签的src指向后端的流媒体接口，浏览器会自动发送Range请求实现缓冲。

1. 基础播放组件 #

import React from 'react';

const VideoPlayer = () => {
  const videoKey = 'your-video-file-key-in-s3.mp4'; // S3中的视频对象键
  const streamUrl = `http://localhost:3001/stream-s3-video?key=${videoKey}`;

  return (
    <div>
      <video
        controls
        width="800"
        src={streamUrl}
        preload="auto"
      >
        你的浏览器不支持HTML5视频
      </video>
    </div>
  );
};

export default VideoPlayer;

2. 关键配置：S3桶CORS设置 #

必须配置S3桶的CORS规则，允许前端域名的请求携带Range头，否则会出现跨域错误。在S3控制台的桶权限中添加以下规则：

[
  {
    "AllowedHeaders": ["Range"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://localhost:3000"], // 替换为你的前端域名
    "ExposeHeaders": ["Content-Range", "Content-Length"]
  }
]

注意事项 #

• 权限控制：后端服务需拥有S3桶的s3:GetObject权限，生产环境优先使用IAM角色而非硬编码密钥。
• 视频格式：优先使用MP4（H.264编码），确保在各浏览器和设备上的兼容性。
• 性能优化：可在后端添加缓存策略，或使用CloudFront作为S3的CDN，降低S3访问延迟。

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