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

Question

I want to play a video in browser after fetching it from s3 bucket. I am using aws's getObject API to get the file. The file's body which I am receiving from s3 has array buffer which I am unable to stream in browser.

I have tried converting unit8Array into base64 encoded string to get the 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');
}

However, for large video the url being formed are very large and video crashes after some time. I am attaching screenshot of the file object received from s3 for reference.

Is there a way to directly stream video without downloading ?

Answer 1

base64-encoding the video is very wasteful and inefficient as you have noticed. You could try something like this:

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