How we used Mux on our react native app

Setting up our backend endpoints for video uploads

Step 1

import mux_python

Step 2

@api_view(http_method_names=['POST'])
@permission_classes((permissions.IsAuthenticated,))
def get_video_url(request):
pass
@api_view(http_method_names=['POST'])
@permission_classes((permissions.IsAuthenticated,))
def get_video_url(request):

#Authentication Setup
configuration = mux_python.Configuration()
configuration.username = os.environ['MUX_TOKEN_ID']
configuration.password = os.environ['MUX_TOKEN_SECRET']

Step 3

@api_view(http_method_names=['POST'])
@permission_classes((permissions.IsAuthenticated,))
def get_video_url(request):

#Authentication Setup
configuration = mux_python.Configuration()
configuration.username = os.environ['MUX_TOKEN_ID']
configuration.password = os.environ['MUX_TOKEN_SECRET']
passthrough_id = str(uuid.uuid1())

# Mark post as processing while video is being processed by mux
post = Post.objects.get(id=request.data['post'])
post.status == Post.PROCESSING
post.save()
PostVideoAssetMetaData.objects.
create(passthrough=passthrough_id, post=post)
create_asset_request = mux_python.CreateAssetRequest(
playback_policy=[mux_python.PlaybackPolicy.PUBLIC],
mp4_support="standard", passthrough=passthrough_id)

Step 4

@api_view(http_method_names=['POST'])
@permission_classes((permissions.IsAuthenticated,))
def get_video_url(request):

#Authentication Setup
configuration = mux_python.Configuration()
configuration.username = os.environ['MUX_TOKEN_ID']
configuration.password = os.environ['MUX_TOKEN_SECRET']
passthrough_id = str(uuid.uuid1())

# Mark post as processing while video is being processed by mux
post = Post.objects.get(id=request.data['post'])
post.status == Post.PROCESSING
post.save()
PostVideoAssetMetaData.objects.
create(passthrough=passthrough_id, post=post)
create_asset_request = mux_python.CreateAssetRequest(
playback_policy=[mux_python.PlaybackPolicy.PUBLIC],
mp4_support="standard", passthrough=passthrough_id)
# API Client Initialization
request = mux_python.CreateUploadRequest
(new_asset_settings=create_asset_request, test=True)
direct_uploads_api = mux_python.DirectUploadsApi
(mux_python.ApiClient(configuration))
response = direct_uploads_api.create_direct_upload(request) try:
pass
except ApiException as e:
print("Exception when \
calling AssetsApi->list_assets: %s\n" % e)
return Response({"url": response.data.url})

Uploading the video from react native

Step 1

npm install --save rn-fetch-blob

Step 2

const [video, setVideo] = useState(null);

Step 3

async function handleUploadVideo(post){
const data = RNFetchBlob.wrap(video.path);
const formData = new FormData();
formData.append('post', post.id);

const url = `${Config.API_URL}/v1/upload_video/`;
const response = await axios.post(url);
const uploadUrl = response.data.url;
await RNFetchBlob.fetch(
'PUT',
uploadUrl,
null,
data
)
}
  1. Used RNFetchBlob here to create an uploadable instance of our video file.
  2. Attached the post id to our request.
  3. Created a POST request to the endpoint (`${Config.API_URL}/v1/upload_video/`) we created in the beginning.
  4. Got the upload url from the above request.
  5. Used the upload url to upload our video.

Receiving the video after Mux is done

Step 1

@api_view(http_method_names=['POST'])
@permission_classes((permissions.AllowAny,))
def upload_video_webhook(request):
if request.data['type'] == 'video.asset.ready':
passthrough = request.data['data']['passthrough']
playback_ids = request.data['data']['playback_ids']
asset_id = request.data['data']['id']
video_data = PostVideoAssetMetaData.objects.get
(passthrough=passthrough)
video = Video.objects.create(asset_id=asset_id,
passthrough=video_data.passthrough,
post=video_data.post)
for playback_id in playback_ids:
PlaybackId.objects.create
(playback_id=playback_id['id'],
policy=playback_id['policy'], video=video)
video_data.post.status = Post.DONE
video_data.post.save()
return Response()
  1. We get the passthrough, playback_ids and asset_id from the request Mux sent back.
  2. Find the PostVideoAssetMetaData object with the passthrough so we can find the post it belongs to.
  3. Create a video instance with the playback_ids we got from Mux
  4. We use another model (PlaybackId) to store the playback_ids.
  5. Finally, we mark the post status as DONE so the user can now see that his / her video has been processed by our servers and is now available for everyone!

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dimitris Stefanakis

Dimitris Stefanakis

2 Followers

Developer for a living. Developing on my spare time. Pretty much just developing at this point.