Uploading Videos from the Clipchamp HTML5 Video API to Google Drive

Posted January 24, 2017
Written by Tobi Raub
Clipchamp is a free online video editorTry for free
Share this post
clipchamp video uploads to Google Drive

In this article, we go through the steps that are necessary to have the Clipchamp video API upload videos to a folder on Google Drive. Google Drive is Google’s Cloud-based file storage service, aimed at consumers and businesses alike.

Besides offering a web-based portal and client software for Windows, Mac, Android, and iOS, Google Drive has a clean API, giving programmatic access to data that is stored in Google Drive. This makes it suitable to act as a file storage service for websites and other Cloud-based applications.

The Clipchamp API supports Google Drive as an easy to use upload target for videos, where our API directly uploads any videos from the client device (i.e. the web browser) to your account on Google Drive. By avoiding to let uploaded videos take a detour through Clipchamp servers, using the Clipchamp API with Google Drive gives you the same 100% privacy and confidentiality of your users’ videos as when using the Clipchamp API with any of our other inbuilt upload targets (such as AWS S3 or Microsoft Azure) or taking care of the upload in your own code when using the Blob output option.

Videos that are collected from your website visitors are being uploaded to a folder in your account on Google Drive. As a consumer-grade service, Google Drive does not require you to perform elaborate setup steps before it can be used with our API. In this document, we explain the (few) necessary steps that website owners need to take in order to make the Clipchamp API upload videos to Google Drive:

  1. Granting access to your Google Drive account

  2. Picking a root folder in your Google Drive account (optional)

  3. Using Google Drive in the Clipchamp API

This document does not describe how to sign up to Google Drive, which is bundled with the free Google account for consumers or part of the Google Apps for Work package.

Granting access to your Google Drive account

In order for the Clipchamp API to access your Google Drive account and upload videos to a folder therein, you have to give us the permission to do so. Log in to https://util.clipchamp.com/api-settings and click on the “Manual Configuration” option, which is where you’ll see the following screen under “Upload Targets” to set up Google Drive as the upload destination for user videos:

clipchamp video uploads to Google Drive

Selecting Google Drive  will bring up a popup window showing a permission screen from Google. In there you are prompted to log into your personal Google account or your Google Apps for Work account (unless you are already logged in) and then to grant the Clipchamp API non-expiring (“offline”) access to your Google Drive account:

clipchamp video uploads to Google Drive

Review the granted permissions, then click Allow. We subsequently receive an OAuth “refresh token” from Google, which we securely store on our servers. We later use that token to authorize uploads from the API to your Google Drive account.

Picking a root folder in your Google Drive account (optional)

By default, the Clipchamp API can upload video files to an arbitrary location in your Drive account. If you wish to constrain the locations (within your Google Drive account) to where the API can upload videos, you can optionally pick a root folder somewhere in your Google Drive account. This will limit uploads to any folder below that root folder.

clipchamp video uploads to Google Drive

In the example above, there are a number of folders nested below the top-level folder in Google Drive (“Home”). By selecting the “Clipchamp” folder inside the “Videos” folder, the upload location passed to the gdrive.folder parameter of our API had to be either /Videos/Clipchamp or a folder nested below the /Videos/Clipchamp folder.

In order to select an optional root folder, click the Select root folder (optional) button next to the Google Drive toggle. This brings up a directory selection widget:

clipchamp video uploads to Google Drive

Navigate to the subfolder to which you would like to confine video uploads from the Clipchamp API to and click the Select button.

Once done, click the orange Apply changed settings button to submit your settings to the Clipchamp backend. This will allow using the Google Drive integration in the Clipchamp API.

Using Google Drive in the Clipchamp API

When invoking our API, choosing the Google Drive upload target is as easy as specifying “gdrive” in the “output” parameter. In its simple form, this will make the Clipchamp API upload all videos to the root folder you picked in step 2 or if none was selected, into the top-level directory of your Google Drive account:

In order to upload the videos to a location relative to the root folder (or the top-level directory in your Google Drive if no root folder was selected) you can optionally provide a “gdrive.folder” parameter like so:

In the example above, we specify foo/bar as a directory path below the previously selected root folder /Videos/Clipchamp. _That is, video files would be uploaded to the subfolder /Videos/Clipchamp/foo/bar. When a directory in the path _foo/bar does not yet exist, it will be automatically created. Alternatively to specifying a directory path separated by slashes, you can also pass in an array of strings, where each array element is one directory in the path.

We further use the onUploadComplete callback function to create a HTML5 video tag that plays back the previously uploaded video from its remote location in Google Drive. The videos that are uploaded by the Clipchamp API will automatically inherit the sharing permissions of the containing folder.

In order for videos to be accessible by means of the URL that is given into the onUploadComplete callback, the upload folder must be publicly accessible or the user must be logged into her Google account and be granted access to the upload folder. For more information on Google Drive’s sharing and permission settings, please refer to their knowledge base.

Further note that making uploaded videos immediately available to other users without inspecting them beforehand is not a practice that is recommended by Clipchamp.

More from the Clipchamp blog

How to embed a video recorder widget on Wix websites

September 13, 2017
*** This product is discontinued *** In a previous post, we showed you how to convert…

How to stream legacy video formats on your website with the (reverse) Clipchamp API

July 25, 2017
This blog post is about how to use the Clipchamp API in reverse. We show you how…

Start creating free videos with Clipchamp