使用 CookPete/react-player 从 S3 播放 HLS 视频答案

【问题标题】：Play HLS video from S3 using CookPete/react-player使用 CookPete/react-player 从 S3 播放 HLS 视频
【发布时间】：2020-07-06 06:34:08
【问题描述】：

在我的 s3 存储桶中，我有两个对象：

因为我使用的是来自 AWS Amplify 的 Storage.get，所以我能够获得一个签名的 url。因此，当我使用 react-player https://github.com/CookPete/react-player 在前端请求签名的 .m3u8 链接时，一切正常。但是，播放器会自动执行对 .ts url 的获取请求，因此我收到了 403 禁止错误，因为此 URL 未签名。

在播放器自动执行对 .ts 文件的获取请求之前，我希望能够使用 Storage.get 对其进行签名（或者能够在获取请求之前执行任何其他逻辑），然后从 AWS Amplify只有在此之后，才能使用此签名的 .ts url 执行 get 请求。

【问题讨论】：

标签： reactjs amazon-s3 http-live-streaming aws-amplify react-player

【解决方案1】：

AWS 在 GitHub 上有放大视频示例：https://github.com/awslabs/amplify-video

还有一个 cloudformation 模板和有关设置后端以根据上传到 S3 的文件自动创建 VOD 资产的详细信息：https://aws.amazon.com/solutions/implementations/video-on-demand-on-aws/

这有效并简化了设置。

【讨论】：

【解决方案2】：

如果您需要通过签名的 url 执行此操作，您可以使用 AWS.CloudFront.Signer（在 nodejs 中，必须也提供其他语言）：

  const cloudFront = new AWS.CloudFront.Signer(publicKey, privateKey);
  const policy = JSON.stringify({
    Statement: [
      {
        Resource: 'https://*',
        Condition: {
          DateLessThan: {
            'AWS:EpochTime': 1757120800,
          },
        },
      },
    ],
  });
  const url = cloudFront.getSignedCookie({
    policy,
  });
  console.log(url);

注意公私钥应该是：

一个 SSH-2 RSA 密钥对。
base64 编码的 PEM 格式。
2048 位密钥对。

参考：https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-trusted-signers.html#private-content-creating-cloudfront-key-pairs

上面的 privateKey 将按原样生成；您不妨从生成的私钥 .pem 文件中读取字符串。然而，公钥将是公钥 ID，而不是公钥本身。在上面的参考资料中，它告诉您如何创建一个密钥组并在那里上传生成的公钥。在上传公钥时，会有一个分配给它的 id。这个 id 需要传递给 AWS.CloudFront.Signer 构造函数的第一个参数。

不过，附带说明一下，如果您打算流式传输视频，则不建议使用签名的 url 方法。

原因很简单：您进行流式传输可能是因为您希望更快地加载视频并获得更好的视频体验。签名会耗费 CPU 资源，因此需要花费一些时间来签署字符串（此处，网址）（在此处阅读更多内容如何在幕后工作：https://en.wikipedia.org/wiki/RSA_(cryptosystem)#Encryption）。如果这是一次性事件就好了。但是也需要对每个 .ts url 进行签名。

我已经在这里解释了如何做到这一点：https://stackoverflow.com/a/67929204/5657783

【讨论】：