Upload a video from a mobile device to Youtube using React Native

Alisha Vineeth
Nov 28 · 3 min read

This article details how to upload a video from a React Native App to Youtube using Youtube Data API. The YouTube Data API (v3) lets you incorporate YouTube functionality into your application. You can use the API to fetch search results and to retrieve, insert, update, and delete resources like videos or playlists.

Requirements

  • Google account.
  • YouTube account using this Gmail ID.
  • A project in Firebase Console.
  • Google SignIn authentication in your application.

Installation

  • @react-native-community/google-signin
  • react-native-document-picker

Steps

  • Create a React Native project and set up Google SignIn.
  • Create a project in Firebase Console and add android and iOS apps. When you do so, a project will be created in the Google API Console along with the required credentials.
Credentials in Google API Console
  • Enable YouTube Data API in the Google API Console of your project.
YouTube Data API v3 in the Google API Console
  • Give the corresponding clientIds (webClientId and iosClientId). ClientIds can be obtained from your project in the firebase console or from the Credentials section in Google API Console.
  • Also, give the required scopes to upload to youtube (i.e., “https://www.googleapis.com/auth/youtube.upload") while configuring Google SignIn.
  • Sign Up YouTube and create a channel. The video from the mobile device is uploaded on to the YouTube channel of the account used to sign in your react native application.

Usage

  • I used react-native-document-picker plugin to get the list of local video files available on the smartphone.
  • To upload the video on youtube, the video must conform to these constraints.
  • The file is the object obtained by selecting a video file using the DocumentPicker plugin. The metadata includes information about your video such as title, description, tags, category, privacy status, etc.
  • passedToken is the access token that you get when you sign in using Google.
  • When the uploading starts, onProgress() function will be called. Once the uploading function gets executed, the oncomplete() function will be called.
  • The Uploaded video can be seen in the Videos section on YouTube Studio on your YouTube Channel.
YouTube Channel

Reference

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade