How to adjust the webcam recorder to a specific scenario (part 2)

Posted January 21, 2017
Written by Tobi Raub
Clipchamp is a free online video editorTry for free
Share this post

In part 1 of this tutorial, we introduced the Clipchamp API’s webcam recorder and went through the steps of setting up an initial, demo-able integration.

In this 2nd part, we’re showing you how to extend the initial integration with a number of options that are commonly used by our customers to set up an “applicant video interview” type of scenario on their website.

A Simple Webcam Integration Example

Suppose you want to implement a video recruiting website, where applicants are prompted to answer questions by making a webcam (or phone camera) recording of themselves. We want to use YouTube as our upload destination (a real recruiting website would probably use our AWS S3 or Microsoft Azure upload destinations) and play back the uploaded videos afterwards.

End-to-End Video Recording and Playback

We will later add more features, but let’s start with an extension of the simple integration that:

  • Removes the ability to upload pre-recorded video files (remember that you want applicants to make their recording on the spot);

  • Removes the ability to redo a recording (which is the default behavior, but we want spontaneous answers, not rehearsed and polished speeches);

  • Shows a YouTube video player with the uploaded video when the upload is complete, allowing the applicant to see his recording on YouTube;

  • Limits the time for an answer to 2 minutes (after all, good communication skills entail being able to be brief and concise in what one has to say);

The expanded example from above is shown below (this replaces the script in the … section, the rest of the wrapping HTML file remains the same).

Now let’s go through the changes in the updated script. The inputs parameter is set to a single-element array that only contains the “camera” string. This instructs the Clipchamp API to only allow webcam/phone camera recordings, removing the ability to upload pre-recorded video files from the file system.

That setting will also mean that upon opening the Clipchamp widget, it automatically switches to the webcam screen (but does not yet start the recording).

The “no-user-retry” flag that is added to the enable parameter array removes the ability to re-record a video, immediately starting to upload it once the recording is done. The camera.limit parameter sets the maximum recording duration to 120 seconds.

The onUploadComplete callback parameter is a way to hook your own code into the Clipchamp API, specifically: when an upload (here: to YouTube) is complete. The function that is assigned to the onUploadComplete parameter is called with a data _parameter, which is an object having properties specific to the chosen upload destination (_output parameter).

In case of YouTube, data has attributes id (the identifier of the video on YouTube), url (the URL to that video on YouTube), _and _embedHtml (a HTML snippet representing a YouTube player widget that you can embed on your website).

Customizing the User Interface

Now that we have the basic integration in place, let’s customize the user interface and further simplify the flow for the end user by:

  • Removing the final “Thank You” screen that is by default shown after a video has finished uploading;

  • Add a custom title string and your company logo image to the Clipchamp API widget;

  • Changing the “skin” of the widget to a bright theme, which works better on websites that have a white background;

  • Temporarily showing a preview image at the place where the YouTube player will ultimately go;

Here is the enhanced code snippet to implement that functionality:

We have changed the style.url parameter to the URL of one of our other default skins. You can also preview the available skins in the Clipchamp API wizard. At the time of writing, the available skins and their CSS URLs are:

  • Modern Light: https://api.clipchamp.com/static/button/themes/modern-light.css

  • Modern Dark: https://api.clipchamp.com/static/button/themes/modern-dark.css

  • Camera: https://api.clipchamp.com/static/button/themes/modern-camera.css

  • Education: https://api.clipchamp.com/static/button/themes/modern-education.css

The newly added title _and _logo parameters take a title string and a logo URL, respectively, which are shown at the upper end of the Clipchamp API widget. Please make sure to size your logo image accordingly, pick a transparent background and a foreground color that works with the chosen skin.

By adding the “no-thank-you” flag to the _enable _parameter array, we skip the final “Thank you” screen, thus eliminating the need for users to manually close the widget. Once the video upload is complete, the Clipchamp widget will close automatically.

The newly introduced onPreviewAvailable callback parameter is a function you can provide to receive a preview image, show it on the website or uploading it separately from the video file.

Please note that the parameter of the onPreviewAvailable callback is a JavaScript Blob object, not a URL or object. To embed it as an HTML on the page as shown in the example code, you need to create a corresponding Blob or Data URL.

Automatically Start Recording and Add a Teleprompter

The final enhancement we will make on our webcam recording example is to add even more domain-specific fidelity, namely:

  • To launch the Clipchamp widget by clicking a custom link on the website (instead of injecting a Clipchamp-branded button) and removing all other Clipchamp branding from the Clipchamp API widget;

  • Show recruitment interview questions while making the recording as teleprompter-like subtitles;

  • Change some labels on the Clipchamp widget to make them more attune to a recruitment website;

  • Automatically start the recording (after the user has approved accessing the webcam and microphone);

The example code below assumes an anchor tag to launch the widget on the website:

Record video application

The corresponding code snippet is this:

Let’s unpack the changes we made to the code to implement the aforementioned features. For one, we added a “no-branding” flag to the enable parameter array to suppress any Clipchamp branding on the widget (option not available in all plans).

We also added a localization parameter that has a nested _strings _object, which is a mapping for labels in the widget to custom texts.

The full set of customizable strings is available here. As the name implies, the localization parameter can also be used to localize the widget for audiences speaking different languages. You can slot in translated texts to cater for an international audience.

We also added a _teleprompter _parameter, nested inside the _camera _parameter, providing a multi-purpose teleprompter feature, where we show subtitle-like texts on top of the recording. The nested _subtitles _parameter is a mapping from timely offsets (in seconds, from the start of the recording) to texts that are shown at these points in time.

In this case, we use the teleprompter feature to present questions to the applicant (one immediately when the recording starts and the other at one minute into the recording). You can also use the teleprompter feature to progressively present entire speeches that the user will then narrate.

Finally, our custom button API option (available in some plans) provides the means to launch the Clipchamp widget programmatically (here, upon clicking an   tag). This gets rid of the Clipchamp-branded button that we normally inject into the website.

You will need to call the open function from an event handler (or a synchronous stack trace rooted at a user event handler, such as button presses, mouse clicks and the like).

The custom button API option also provides the entry point for a programmatic webcam control feature. The programmatic webcam control gives you the means to control the lifecycle of a webcam recording by calling functions that are exposed by our API.

In this specific case, we want to start the recording as soon as the user has granted access to her webcam. The open _function of the custom button API returns a Promise object that resolves into a _remote object when the Clipchamp widget was initialized and is showing.

The remote _object provides a range of functions to control the lifecycle of a webcam recording. You first want to call the _areRecordingDevicesReady _function, which returns a Promise that resolves when the user has granted access to her webcam and microphone. Once that has happened, the example code calls the _startRecording function.

In effect, the webcam recording will start without requiring any further user interactions. Browsers will initially prompt the user to grant access to the webcam and microphone. In order to even avoid this prompt, you can implement a “dry run” of the Clipchamp API, where browsers will cache the user’s consent to accessing the webcam.

Wrapping Up

In this tutorial and its 1st part, we walked you through the steps of going from zero to a complex webcam recording application, showcasing some of our HTML5 webcam recorder’s features. We stayed away from some other features of the Clipchamp API, such as:

  • Implementing your own handling of the video upload to custom destinations using the “blob” output option and the _onVideoCreated _callback;

  • Styling the Clipchamp API beyond our default skins with the custom CSS and placement option

We’ll delve into these in some of our other tutorials.

More from the Clipchamp blog

The best alternative to Vidrack

November 15, 2017
***DISCONTINUED*** This WordPress plugin and the API product it was based on are…

How to embed a video recorder on your Squarespace website

September 28, 2017

Start creating free videos with Clipchamp