Upload/Record Widget
/
Cincopa UGC Uploader Recorder Widget API
Last updated

Cincopa UGC Uploader Recorder Widget API

Recording, creating, and collecting user-generated videos has never been easier with Cincopa’s Video & Media UGC.

Along with Cincopa’s Workflow APIs, professional services, customizable Cincopa Shareages (supporting UGC widget embed), and additional solutions, all you need is creativity and innovation to fully realize the benefits of Cincopa’s Video UGC for your business.

API Overview

The UGC API is a simple set of JavaScript APIs that allows recording and uploading videos. Using UGC, you can add a recording component to your website cost-effectively instead of developing it from scratch.

It offers a wide variety of options to customize the look and functionality of the recording component.

There are four different types of JavaScript UGC APIs:

  • Cincopa Upload API (cpUploadAPI)
  • Cincopa Uploader Component (cpUploadUI)
  • Cincopa Record API (cpRecordAPI)
  • Cincopa Recorder Component (cpRecordUI)

Among these, cpUploadAPI and cpRecordAPI are the most important.

Cincopa Upload API (cpUploadAPI)

This API uploads videos after they have been recorded.

Including the Script

<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/uploader.js"></script>

Initializing the Uploader

var uploader = new cpUploadAPI(file, options);

Parameters

  • file: The file to be uploaded (instance of File object, required).
  • options: An object of configuration options (e.g., upload_url).

Optional Callbacks

  • onUploadComplete
  • onUploadProgress
  • onUploadError
  • onUploadAbort

Callable Methods

  • start() - Start upload.
  • pause() - Pause upload.
  • resume() - Resume upload.
  • stop() - Abort upload.

Cincopa Uploader Component (cpUploadUI)

This API creates a UI component for the uploader.

Including the Script

<script type="text/javascript"  data-lazy-type="iframe" data-src="//wwwcdn.cincopa.com/_cms/ugc/uploaderui.js"></script>

Initializing the Uploader UI

var uploaderUI = new cpUploadUI(element, options);
uploaderUI.start();

Parameters

  • element: The DOM element where the component will be created.
  • options: Configuration options (e.g., upload_url, theme_color).

Callable Methods

  • start() - Create the component.

Cincopa Record API (cpRecordAPI)

This API records videos using a webcam.

Including the Script

<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorder.js"></script>

Initializing the Recorder

var recorder = new cpRecordAPI(options);
recorder.activate();

Parameters

  • options: Configuration options (e.g., resolution, aspectRatio).

Callable Methods

  • activate() - Activate recorder.
  • start() - Start camera feed.
  • record() - Start recording.
  • stop() - Stop recording.
  • reset() - Reset recording.
  • rerecord() - Restart recording.
  • requestPermission() - Request webcam/microphone permissions.
  • nowRecording() - Check if recording is in progress.
  • hasWebcam() - Check webcam availability.
  • hasMicrophone() - Check microphone availability.
  • setUploadUrl(url) - Set upload URL.

Cincopa Recorder Component (cpRecordUI)

This API creates a UI component for the recorder.

Including the Script

<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorderui.js"></script>

Initializing the Recorder UI

var recorderUI = new cpRecorderUI(element, options);
recorderUI.start();

Parameters

  • element: The DOM element where the component will be created.
  • options: Configuration options (e.g., upload_url, theme_color).

Callable Methods

  • start() - Create the component.
  • reset() - Reset the component.

Example of a WordPress-like Review with Video

The following example ties everything together: View Source

Previous page
Next page