Try it at https://expo.io/@horiuchie/VideoUploader.
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.
- 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.
- Run
yarn global add exp
if you have not installed yet. cd
into the cloned directory and runyarn
.- Run
exp start
.
NOTE:
If your project on other networks, run exp start --host tunnnel
.
When you start to record, camera shows black screen sometimes.
See expo/expo#1057.
Here is the overview to record a video and upload it to S3.
Expo provides Camera component that has recordAsync API.
It returns uri
which is a URI to the local video file, when you stop recoding.
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.
horiuchie