javascript - 从 s3 获取视频文件后如何在浏览器中播放？

Question

我想在从 s3 存储桶获取视频后在浏览器中播放视频。我正在使用 aws 的 getObject API 来获取文件。我从 s3 接收的文件主体有数组缓冲区，我无法在浏览器中进行流式传输。

我尝试将unit8Array转换为base64编码的字符串来获取url。

downloadVideo() {
    var AWS_BUCKET_NAME = this.props.awsService.bucket;
    var $this = this;
    var bucket = new AWS.S3({params: {Bucket: AWS_BUCKET_NAME}});
    bucket.getObject({Key: this.props.fileName},function(err,file){
        if(err) {
            console.log('err : ', err);
        } else {
            console.log('file : ', file); 
            var srcUrl = "data:video/mp4;base64," + $this.encode(file.Body);
            $this.setState({fileSrc: srcUrl});
        }
    });
}

encode(data){
    var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
    return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
}

但是，对于大型视频，形成的网址非常大，并且一段时间后视频会崩溃。 我附上从 s3 收到的文件对象的屏幕截图以供引用。

有没有一种方法可以直接流式传输视频而无需下载？

Answer 1

正如您所注意到的，对视频进行 Base64 编码非常浪费且效率低下。你可以尝试这样的事情:

var blob = new Blob([file.Body.buffer]);
var srcUrl = URL.createObjectURL(blob);
$this.setState({fileSrc: srcUrl});