Video Upload Example

Try it at https://expo.io/@horiuchie/VideoUploader.

Motivation

I want to code an app that can record a video and upload it to S3.
As a result of trial and error, I figured out the way.
This example shows how to do it. And also include how to use API Expo and AWS SDK provide.

How to use

Setting up the S3

• Create bucket.
• Create IAM user who can read/write to the bucket.
• In /constants/aws.js, fill in credentials of the IAM and upload destination.

Running the app

• Run yarn global add exp if you have not installed yet.
• cd into the cloned directory and run yarn.
• Run exp start.

NOTE:
If your project on other networks, run exp start --host tunnnel.

Limitation

When you start to record, camera shows black screen sometimes.
See expo/expo#1057.

How this example works

Here is the overview to record a video and upload it to S3.

Recording

Expo provides Camera component that has recordAsync API.
It returns uri which is a URI to the local video file, when you stop recoding.

Uploading

S3 allows you to upload using POST with AWS Signature Version 4.
The simplest way to do it is to use createPresignedPost API AWS SDK provides.
It returns the following fields to include in the form.

• key, acl, X-Amz-Credential, X-Amz-Algorithm, X-Amz-Date datetime, Policy, X-Amz-Signature, success_action_status, Content-Type

Finally, put uri and fields into FormData, and post it to https://s3-{$YOUR_REGION}.amazonaws.com/${YOUR_BUCKET_NAME}.

// Get a pre-signed POST policy.
const fields = s3.createPresignedPost(params).fields;

/*
  Merge to FormData like this.
  FormData {
    key,
    acl,
    ...,
    file: { uri }  // "file" means <input type="file" name="file" />
  }
*/
const formData = new FormData();
R.forEachObjIndexed((value, key) => formData.append(key, value), fields);
formData.append('file', { uri });

// POST
const options = {
  method: 'POST',
  body: formData,
  headers: { 'Content-Type': 'multipart/form-data' }
};
fetch(`https://s3-{$YOUR_REGION}.amazonaws.com/${YOUR_BUCKET_NAME}`, options);

NOTE:
If you want to upload an audio, see expo/expo#214.

Auther

horiuchie