使用Javascript AWS开发工具包将使用Cordova Media Capture插件捕获的视频上传到S3

Question

I am facing a peculiar issue while trying to upload a video file (.mp4 and .mov) to S3, captured using cordova-plugin-media-capture@1.4.3 or picked from gallery using cordova-plugin-camera@2.4.1. I am using javascript AWS SDK v2.3.11 and calling the .upload function of the SDK.

It only copies 15 Bytes of data onto the S3 regardless of the actual size of the video file and it is non-playable.

Implementation -

Capture video:

navigator.device.capture.captureVideo(
  captureSuccess,
  captureError, 
  {
    limit: 1,
    duration: 30,
    destinationType: 2,
    sourceType: 1,
    mediaType: 1
  }
);
var captureSuccess = function (mediaFiles) {
  var mediaFile = mediaFiles[0];
  var filedata = {
    Key: "videos/" + fileName,
    ContentType: mediaFile.type,
    Body: mediaFile
  };
  var aws = AWS;
  var creds = new aws.Credentials(
                      AccessKeyId,
                      SecretAccessKey,
                      SessionToken
                  );
  aws.config.credentials = creds;
  s3 = new aws.S3();

  s3.upload(
    filedata, 
    {
      Bucket: bucketName
    }, 
    function(err, location){
      if(!err){
        //uploaded successfully
      } else {
        //upload failed
      }
    }
 );
}

When I try to convert the media file to its Base64 data and upload, it does write the complete base64 file to the S3 bucket. However, I then need to strip the prefixed filetype and base64 identifiers text then decompile the data to a binary format save it again to S3 (from EB nodeJS service). Another issue with this approach is that converting a video file to a base64 data and saving in RAM memory of the phone is prone to application crashes due to memory management on both IOS and Android. I am unable to use this mechanism to convert a video file of more than 5 secs in Android, and more than 10 secs in 16GB iPhone6. The application crashes beyond both these scenarios.

Changed Implementation with Base64:

var captureSuccess = function (mediaFiles) {
  var mediaFile = mediaFiles[0];
  var filedata = {
    Key: "videos/" + fileName,
    ContentType: mediaFile.type
  };
  var aws = AWS;
  var creds = new aws.Credentials(
                      AccessKeyId,
                      SecretAccessKey,
                      SessionToken
                  );
  aws.config.credentials = creds;
  s3 = new aws.S3();
  getBase64data(
    mediaFile.fullPath, //tried with mediaFile.localURL as well
    function(data){
      filedata.Body = data;
      s3.upload(
        filedata, 
        {
          Bucket: bucketName
        }, 
        function(err, location){
          if(!err){
            //uploaded successfully
          } else {
            //upload failed
          }
        }
      );  //ending s3.upload
    );  //ending getBase64data
}
function getBase64Data(filePath, cb){
  window.resolveLocalFileSystemURL(
    filePath,
    function(entry){
      entry.file(
        function(file) {
          var reader = new FileReader();
          reader.onloadend = function(event) {
            cb(event.target.result);
          };
          reader.readAsDataURL(file);
        }, 
        function(e){
         //error retrieving file object
        }
      ); //ending entry.file
    },
    function(e){
      //error getting entry object
    }
  ); //ending resolveLocalFileSystemURL
}

Answer 1

The AWS S3 JavaScript SDK allows a couple of different ways to provide the file data to the upload function. According to the documentation the file data can be any of the following:

Body — (Buffer, Typed Array, Blob, String, ReadableStream) Object data.

You need to extract the data from your captured video to any of those formats before attempting to upload.

Using mediaFile.fullPath , you can read the data from the file into a Buffer or create a ReadableStream and then use that to upload the file. To extract the data from the file you can use cordova-plugin-file .