How to get a webcam recorder on your website (part 1)

This tutorial explains how to use Clipchamp’s HTML5 video camera API to add a video recording and uploading feature to your website. We walk you through the steps involved and provide sample code snippets. The document is split into 2 parts:

Part 1 (this page)

Preface: some general remarks of using video and how our video API can help you

Getting started: a step-by-step guide to signing up to the API and producing a sample, demo-able integration

Webcam integration example: a simple to powerful introduction of some of Clipchamp’s unique features with accompanying code snippets

Wrapping up: Summary and outlook of the topics we’ll cover in other tutorials

Preface

Video is the medium of choice for generation Z. It provides a concise way of communicating a highly personalized, emotional message combined with visual experiences, textual content through narration, music and other aspects that are impossible to convey with images and texts alone.

The Clipchamp API sets itself apart from competing webcam recording solutions by a number of unique attributes, such as:

Modern and cross-platform: the Clipchamp API is purely based on HTML5, avoiding legacy technologies like Adobe Flash. Moreover, our API works on desktop and mobile devices and does not require installing an app to work.

Full privacy: by directly uploading videos to your nominated Cloud-based storage service (at the time of writing, we support YouTube, Google Drive, Dropbox, AWS S3, and Microsoft Azure) we guarantee the fully confidential handling of your videos, which never pass through Clipchamp servers. This makes it a lot easier for your website/web application to comply with privacy-related legislation such as HIPAA, COPPA, FERPA and others.

Uncompromised quality: other than WebRTC-based webcam recorders, the quality of videos recorded with our HTML5 video camera API does not degrade at low bandwidth – we always deliver the best video quality possible.

Simple to integrate: the Clipchamp video API is a client-side technology. All it requires to get going is to add a few lines of JavaScript onto your website.

So, without further ado let’s jump into setting up your webcam recorder.

You can choose to sign up with your Google or Facebook account, or using your email (by receiving a “Magic Link” or using a password). After you have logged in, locate the Clipchamp API tile under “Suggestions for you” and click “Compare Plans”.

On there, click on “Start my 14 day free trial”. This starts your trial of the API straight away and takes you to the API portal:

In the portal, you will find your API key (in the lower-left corner), which you’ll need in a subsequent step to put the API onto your website.

In order to start the setup, you can either manually enter your Clipchamp API settings or go through the setup wizard (recommended).

The wizard asks a few simple questions and produces a demo-able website with an HTML5 video recorder embedded. First, you’ll have to enter the domain(s) of your website(s) that you want to use the Clipchamp API on. Please make sure to add the URLs of both

all your production websites and

all your development or test sites

The interface looks as follows:

In the example above, we added two domains: flickshack.com and test.flickshack.com.

Please note that you need to either add subdomains individually or use a wildcard character. For instance, adding *.flickshack.com would allow using the Clipchamp API on all subdomains of flickshack.com, eg., dev.flickshack.com, test.flickshack.com and so on.

Unless you run a website that dynamically adds subdomains and you want the API enabled on either of these subdomains, we recommend to list your nominated subdomains individually.

Further note that the wildcard subdomain *.codepen.io is pre-filled. This is to allow demonstrating the Clipchamp API in a CodePen testbed. We strongly recommend that you later remove *.codepen.io before you go live with your integration of the API.

After adding all website domains that should work with the API, click “Next”. Btw, don’t worry if you do not know the domains that you want to use the Clipchamp API on yet. You can simply skip this step and later come back to fill in the domains (or add/remove domains). Note that until you’ve added your domains to the list, you can already test the API on Codepen.

On the next screen, you need to choose one or multiple Cloud-based upload destinations that you want to have the Clipchamp API upload videos to. At the time of writing, we support Google Drive, YouTube, Dropbox, AWS S3, and Microsoft Azure.

That is, after you picked and authorized your preferred upload destination, the API can upload your users’ videos from your website into your account at the aforementioned upload destinations.

In the example screenshot above, we picked YouTube as our upload target. You can also choose to use multiple upload destinations. Say, you want the videos recorded on one of your websites to be uploaded to YouTube and on another of your sites you want to upload the videos to Dropbox. In that case you will need to configure both YouTube and Dropbox on this screen.

Please note that you can also choose to handle the upload yourself with our “blob” output option. Configuring Dropbox, Google Drive, and YouTube is fully automated and a matter of a few clicks (see below).

We also support B2B Cloud storage services, namely AWS S3 and Microsoft Azure, where you will need to perform a few simple setup tasks in your AWS and Azure accounts, respectively.

When selecting YouTube, you will be prompted to give Clipchamp permission to upload videos to your account on your behalf. After this step, you can choose a YouTube playlist and a default privacy setting for the newly uploaded videos (we recommend setting it to “private”, which lets you inspect newly uploaded videos before they publicly appear on your channel).

When done, click Next to be taken to the last page of the setup wizard, where you can (optionally) pick a user interface theme and grab the source code of a sample integration:

Here, we selected the “Modern Dark” UI theme. The two code snippets underneath represent HTML markup and a few lines of JavaScript that you need to put into the <head>…</head> section and the <body>…</body> section of your website, respectively.

Best of all, you can now preview your instance of the HTML5 video recorder on CodePen. To do so, just click the “Preview on Codepen” button, which pre-fills the two code snippets into a sample website on codepen.io and takes you there.

On the sample page, you can further customize the Clipchamp API and explore its other features by editing the code snippets. For your convenience, here is a consolidated HTML containing the Clipchamp integration code:

A few comments on the example code snippet:

The <head>…</head> section needs to contain the <script> tag that loads the Clipchamp API code. You will need to insert your API key into the script URL. You’ll find the key on your Clipchamp API dashboard (in the card in the lower-left corner).

You can choose to load the Clipchamp API script asynchronously (eg., using the async or defer attribute). If you do so, be aware that the API (ie., the “clipchamp” JavaScript function in the global scope) is only available after the script was asynchronously loaded.

You cannot currently package the Clipchamp API script into a JavaScript bundle (e.g., using webpack or require.js).

We also make the API available as a jQuery function. For this to work, you will need to load jQuery before the Clipchamp API.

The code snippet in the <body>…</body> section above is a basic example that allows users to record a video using the webcam or phone camera and also to pick a video file from the file system. In both cases, the resulting video will be compressed and converted to an MP4 file.

The mandatory output parameter is set to “youtube”, matching our previously configured upload destination. You can also set output to “gdrive”, “dropbox”, “s3”, “azure”, and “blob”. If you do, you will need to configure these upload destinations in the previous step (or by going back to your Clipchamp API upload destination settings).

Now that we have gone through the basic steps of signing up to an API account and seeing a first example integration of the HTML5 video camera, let’s build out this example to an end-to-end integration: