Question

我正在尝试使用客户端的react.js和作为服务器的node.js将AWS 4 S3存储桶中的mp4视频流式传输到网页上。但是，我对这两个都相当陌生。在前端，在我的一个React组件中，我在渲染器中具有以下内容（出于相关性考虑，省略了返回中的一些代码）：

render() {
  const { classes } = this.props;
  return(
    <video id = "video" width = "1280" height = "720" controls>
    Your browser does not support the video tag.
      <source src={this.state.videoNow} type='video/mp4' />
    </video> 
  );
}

在同一个类中，我有一个componentDidMount（）函数：

componentDidMount() {
   fetch("/api/annotate", {
     headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}
   })
     .then(res => {
       this.setState({
         videoNow: res
        });
      ,(error) => {
          console.log(error)
      })
}

在server.js文件中，我具有以下内容：

app.get('/api/annotate',
  (req, res) => {
    var s3 = new AWS.S3();
    const mimetype = 'video/mp4';
    const file = '<video source in bucket>';
    const cache = 0;
    console.log('const mimetype, file, and cache declared');
    s3.listObjectsV2({Bucket: <name of bucket>, MaxKeys: 1, Prefix: file}, function(err, data) {
      if (err) {
        return res.sendStatus(404);
      }
      console.log('made request to s3 to list objects');

      if ((req != null) && (req.headers.range != null)) {
        var range = req.headers.range;
        var bytes = range.replace(/bytes=/, '').split('-');
        var start = parseInt(bytes[0], 10);
        var total = data.Contents[0].Size;
        var end = bytes[1] ? parseInt(bytes[1], 10) : total - 1;
        var chunksize = (end - start) + 1;
        console.log('declared range, bytes, start, total, end, chunksize vars');

        res.writeHead(206, {
           'Content-Range'  : 'bytes ' + start + '-' + end + '/' + total,
           'Accept-Ranges'  : 'bytes',
           'Content-Length' : chunksize,
           'Last-Modified'  : data.Contents[0].LastModified,
           'Content-Type'   : mimetype
        });
        console.log('wrote header');
        s3.getObject({Bucket: <name of bucket>, Key: file, Range: range}).createReadStream().pipe(res);
        console.log('got object from s3 and created readstream');
      }
      else
      {
        res.writeHead(200,
        {
            'Cache-Control' : 'max-age=' + cache + ', private',
            'Content-Length': data.Contents[0].Size,
            'Last-Modified' : data.Contents[0].LastModified,
            'Content-Type'  : mimetype
        });
        s3.getObject({Bucket: <name of bucket>, Key: file}).createReadStream().pipe(res);
        console.log('fell into else statement, wrote header');
      }


    });
  });

运行此代码时，我注意到server.js文件中的else语句始终运行一次，然后什么也没有发生。该视频无法加载，并且控制台指出找不到该视频。如果我将我的react组件中的视频源更改为src ='/ api / annotate'，则视频会完美加载。问题是我正在尝试添加身份验证，并且仅当我有componentDidMount时，此方法才有效。我一直在寻找有关如何解决此问题的几天，却找不到很多。再一次，我对所有这一切都是陌生的。任何建议将不胜感激！！！

Answer 1

给我的感觉就像您正在尝试在源中设置实际的视频数据一样。那不太可能那样工作。另外，我不确定为什么要通过node.js服务器从S3提供文件。

如果您的node.js只需g enerated a pre-signed URL并返回它，然后将其轻松地设置为源，这似乎是一个更好的解决方案。他们也不需要将所有数据通过您的笔记应用程序传送。

最好将Cloudfront放在S3存储桶的前面，然后使用相同的generating presigned URL's for that。

使用node.js将视频从AWS流到网页上并做出反应

1 个答案: