The article here describes how you can implement video recording, video compression, and video uploading capabilities on your website with the Clipchamp API in no more than 5 minutes if you're not using a WordPress site.
We illustrate a simple, albeit powerful integration of the API to a website. For the full range of capabilities, please refer to the full documentation of the Clipchamp API.
In addition, we also have a number of video tutorials available to help you get set up.
Before you can start doing so, you will need to sign up for one of our plans - no credit card is required and there is a 14-day commitment-free trial period.
When you sign up to a plan, you can also pick an upload destination to which the Clipchamp API will automatically upload the finished videos. We offer a growing range of upload destinations, such as for instance:
- Your Amazon S3 account (see here for details)
- Your Microsoft Azure account (see here for details)
- Your YouTube channel
- Your Google Drive account (see here for details)
Note that you can also make changes to your upload settings any time by accessing the API settings page in your Clipchamp account.
In this article, we assume you will be using Amazon S3 as your Cloud storage service. We have an in-depth article on how to configure S3 for use with the Clipchamp API, which we recommend to consult when choosing S3 as your upload target.
Step 1: Copy your API key
First of all, you will need your Clipchamp API key. To retrieve it, please log into Clipchamp and go to the API settings page. After you have logged in, you are taken to this screen:
The API key is shown right on the first line (in the screenshot, the largely hidden string: F1....Ao). Copy that string.
Step 2: Add a <script> tag to your website
You will need the API key when embedding the Clipchamp API's <script> tag, which loads the Clipchamp API on your website:
Remember to replace YOUR_API_KEY in the script URL with the API key you retrieved from the Clipchamp API settings in step 1.
Step 3: Add the Clipchamp button to your website
Finally, you will need to inject the Clipchamp button somewhere on your website. In this article, we assume you are simply using the Clipchamp-branded button (and not the "custom button" option available in our higher plans).
First of all, you will need a "wrapper" element somewhere in your HTML body. This can be a simple <div> element with some placeholder content that is shown while the Clipchamp button is still loading.
Secondly, you need to invoke the Clipchamp API, which will replace the content (if any) of that wrapper element with a button. When your website visitor clicks that button, it will bring up the Clipchamp user interface, where she can make a webcam recording or pick a video from her device that will be compressed/converted and uploaded.
Notice how we specify AWS S3 as the upload target ("output" parameter) and customize both the button label and the title of the Clipchamp UI. We also specify the S3 "bucket", that the video will be uploaded into (see here for details on configuring S3 for the Clipchamp API). Finally, we have also added an "onUploadComplete" callback function.
The Clipchamp API will call this (optional) function whenever a file was successfully uploaded, providing some destination-specific information on the whereabouts of the uploaded file. In case of S3, we provide the "object key", which is a unique identifier in AWS S3, helping you to locate the uploaded file in your S3 account. In this example, we only display the object key to the user. Typically, you would want to store the object key on your server, associating it with other data about the current user or session.
And that's it! Naturally, there are a lot more options to explore with the Clipchamp API. However this article gives you all that is needed in order to collect videos from your website visitors or let them make webcam recordings quickly. Most of the Clipchamp API's powerful capabilities will not usually require your attention, assuming meaningful defaults affecting its inner mechanics, such as the finer points of its video transcoding and compression capabilities.
There are other ways of invoking the Clipchamp API, namely using it in combination with jQuery, using data attributes, or using a custom button, which is an option in some of our plans. We'll be covering these invocation options in separate articles.