Simple video recording through our JavaScript camera API

1 Jun

Web and browser technologies have come a long way. Since the introduction of HTML5, developers and designers are able to create vastly more user-friendly sites that offer a wealth of interactive and media components without having to use extra plugins or spend a lot of time on custom development.

While many elements that would have been considered impossible only a few years ago are now commonplace, there are still some that are not covered by standard technologies yet. In other areas there might be a standard present but it is either early-stage and thus can fall over easily or doesn’t cover certain common use cases.

Video recording on websites

One such example is recording video and audio through a user’s webcam and making recorded files available online.

On the one hand, HTML5 includes video and media options (Media Recorder API), there are also plugins available that market their video recording abilities. On the other hand, they can require substantial efforts to set up and maintain, are still using outdated, clunky tech such as Flash-based recorders or are using other tech with significant downsides (WebRTC).

So if your project requires users recording video on a website or in a web app, rather than one of the above options, the more elegant solution is a browser-based JavaScript camera API and recorder such as the one we built to capture video from users.

javascript-webcam-api

It runs entirely in the browser, records videos on the client device and submits them directly to your Cloud storage from the user device, thanks to our unique tool chain.

Users don’t need to install any plugins, don’t get any security warnings and you also don’t need to set up any streaming or transcoding servers on your end – all videos taken through our JavaScript camera API are encoded in either WebM or MP4, streaming-ready and available to embed on your site or wherever else you’d like to display them.

Here is a demo of the Clipchamp recorder. This one’s embedded using our optional WordPress plugin, styled in our default CSS theme – if you don’t like the defaults, we offer a range of custom styling and branding features.

All videos you record/upload here go straight to a Google Drive folder of ours and will get deleted.

If you’d like to run some tests on your own site to see if the API works for your purposes, all our plans include a free trial for 14 days that has all features enabled. You don’t need a credit card to sign up for the trial.

A JavaScript Camera API with plenty of options

Our recorder comes with many unique parameters you won’t find elsewhere:

  • We built in privacy protection from the ground up,
  • It’s a fully client-side API, simple to implement, no server implementation, works on any website,
  • We always adopt the latest HTML5 technologies,
  • It’s cross-browser & device compatible, no Flash, no WebRTC,
  • Your users can record in up to 1080p (if supported by their camera),
  • There’s no limitation regarding recording duration,
  • We built in a number of fall-back strategies to protect against weak network conditions and patchy upload bandwidth,
  • You don’t need to set up a streaming server,
  • User recordings are readily “streaming-friendly” (MOOV-Atom at the beginning of the file)
  • Files use standard codecs & formats, no server-side transcoding needed.

If you decide to continue after the end of the trial period, there are 4 plans to choose from, depending on the features you’d like to use in your specific scenario and your expected video volume per month.

clipchamp-api-pricing

 

Our plans start at $9/month ($7.50/month if you select the annual option) and you can upgrade, downgrade or cancel at any time. Here is an overview of all API plans and features.

As you might have guessed, our JavaScript camera API is already in use on many websites in a broad range of areas, clients include startups, web design agencies, and established brands in recruiting, online casting, wedding planning, education, video blogging, market research, to only name a few.

Try it free or get in touch with us if you’d like to discuss your specific video recording requirements.

Was this useful?