Recording, creating and collecting user-generated videos has never been this easy thanks to 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 will need are creativity and innovation in order to fully realize the benefits of Cincopa’s Video UGC for your business.
API Overview
UGC API is a simple set of JavaScript APIs that allows to record and upload videos. Using UGC you will be able to add a recording component in your website in a cost-effective way, as opposed to developing something similar from scratch.
It offers a wide variety of options to edit the look and usage of the recording component.
In this article, we will see how to use these API’s so you get a clear understanding while implementing them in your website.
There are four different types of JavaScript UGC API’s
Cincopa upload API (cpUploadAPI)
Cincopa uploader component (cpUploadUI)
Cincopa record API (cpRecordAPI)
Cincopa recorder component (cpRecordUI)
Example of a WordPress like review with video
Among the four functionalities, cpUploadAPI and cpRecordAPI are the most important. Let’s understand how to use each of these API more deeply:
Cincopa Upload API (cpUploadAPI)
cpUploadAPI is one of the important functionality, which is used to upload the video right after it has been recorded.
In order to use this API, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/uploader.js"></script>
Once the script is added, in order to reference to the uploader object, you will then have to write the following code:
var uploader = new cpUploadAPI(file, options);
As you can see above, cpUploadAPI has two arguments:
file – In this argument, the file which will be uploaded should be an instance of the File object. This is a required argument, hence cannot be left blank.
options – In the other argument, it accepts different options. URL is a required option as it will be the server URL, where the API will try to upload.
The following options are optional:
onUploadComplete – This option will contain a function which will be called when an upload is successfully completed. Callback will return object that will contain upload completion information
{
uploadState:'Complete',
percentComplete: 100,
loaded: LOADED_SIZE,
total: TOTAL_SIZE,
rid: UPLOADED_FILE_RID,
file: FILE_OBJECT,
xhr: XMLHTTPREQUEST_OBJECT
}
onUploadProgress – This option will contain a function which will be called during upload progress.
onUploadError – This option will contain a function which will be called when an error will occur during uploading.
onUploadAbort – This option will contain a function which will be called when an upload has been aborted.
Callable Methods
There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:
start (Start Upload) Example: uploader.start();
pause (Pause Upload) Example: uploader.pause();
resume (Resume Upload) Example: uploader.resume();
stop (Abort Upload) Example: uploader.stop();
You can see below an example we created on CodePen for cpUploadAPI .
In the above CodePen example, we have added all the functionalities available for cpUploadAPI.
It contains an Input File to browse and upload media files from your computer and then Start, Stop, Pause or Resume the input file using the cpUploadAPI.
We have also added an HTML div with a class status-bar, where we will show the upload progress and a message to show when the upload is completed.
As mentioned in the CodePen article, do not forget to update the upload URL mentioned in line 6 of the JS code. Simply replace the URL with your Cincopa account’s upload_url and then all media files uploaded using the CodePen example above will be uploaded to your Cincopa Account’s Assets Library.
Cincopa Uploader Component (cpUploadUI)
cpUploadUI is used to create a User Interface (UI) for the cpUploadAPI. Which means you can create a look for the upload component.
In order to create a UI component, you need to include the following script in your webpage:
<script type="text/javascript" data-lazy-type="iframe" data-src="//wwwcdn.cincopa.com/_cms/ugc/uploaderui.js"></script>
Once the script is added we can create the UI and hence you need to write the following:
var uploaderUI = new cpUploadUI(element, options); uploaderUI.start();
As you can see above, the cpUploadUI has two arguments:
element – In this argument, a DOM element needs to be, where the component will be created.
options – This contains an object of options for initial setup. URL is a required option as it will be the server URL, where the API will try to upload.
The following options are optional:
upload_url – The server URL, where the component will try to upload (required)
width – the width of the component in pixels (by default – 780)
height – The height of component in pixels (by default – 400)
theme_color – the theme color of component (by default – #0086CF)
multiple – allow multiple uploads (by default – true)
regex – regular expression for allowed file extensions
btnText – “Choose files to upload”
dragAndDropText – “Drag & Drop Your Files Here”
onUploadComplete – function which will be called when the file has been successfully uploaded
Callable Methods
The following are the allowed callable methods that you can use to execute certain predefined functions:
start (Create the component) Example: uploaderUI.start();
Cincopa record API (cpRecordAPI)
cpRecordAPI is the most important functionality which is used to record the video using your webcam. In order to use this API, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorder.js"></script>
In order to reference to recorder object, you need to include the following script in your webpage:
var recorder = new cpRecordAPI(options); recorder.activate();
cpRecordAPI has just 1 argument
options – An object of options for initial setup.
The following are the list of options that you can use:
resolution – The resolution of recorded video (by default – 480).
aspectRatio – The aspect ratio of video (by default – 16/9).
microphone – Enable Voice Recording Option (by default – true).
frameRate – By default – 25M
facingMode – By default – null 25
audioBitsPerSecond – By default – 128000
videoBitsPerSecond – By default – 2200000
autoUpload – Start upload after recording (By default – on).
uploadWhileRecording – Starting to upload while recording(by default – false)
upload_url – Starting to upload while recording(by default – empty string)
onInit – function which will be called when device data will be loaded
onRecord – function which will be called during recording
onStop – function which will be called when recording has been stoped
onUploadStart – function which will be called when uploaded started, when uploadWhileRocording is true this callback not called
onUploadComplete – function which will be called when upload has been completed
onUploadProgress – function which will be called while uploading
onUploadError – function which will be called when upload will end with error
onStreamReady – function which will be called when stream will be ready
Callable Methods
There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:
activate (activate recorder) Example: recorder.activate();
start (Start to get camera feed) Will return created video element Example:recorder.start();
record (Start to record camera feed) Example: recorder.record();
stop (Stop recording) Example: recorder.stop();
reset (Reset recording) Example: recorder.reset();
rerecord (Restart recording) Example: recorder.rerecord();
requestPermission (Request permission to use webcam and microphone) Example:recorder.requestPermission(camera, microphone, onApprove, onDeny);
nowRecording (Check if recording is in progress) Example: recorder.nowRecording();
hasWebcam (Check if webcam is available) Example: recorder.hasWebcam();
hasWebcamPermissions (Check if website has permission to use webcam) Example: recorder.hasWebcamPermissions();
hasMicrophone (Check if microphone is available) Example: recorder.hasMicrophone();
hasMicrophonePermissions (Check if website has permission to use microphone) Example: recorder.hasMicrophonePermissions();
isRecordingSupported (Check if browser supports recorder API) Example: recorder.isRecordingSupported();
getVideoInputs (Returning video input devices) Example: recorder.getVideoInputs();
getAudioInputs (Returning audio input devices) Example: recorder.getAudioInputs();
setVideoInput (Set video input device) Example: recorder.setVideoInput(deviceID);
setAudioInput (Set audio input device) Example: recorder.setAudioInput(deviceID);
createVideoStream (Will create stream and pass it to callback) Example: recorder.createVideoStream(callback);
stopVideoStream (Stop passed stream) Example: recorder.stopVideoStream(stream);
setUploadUrl (Set upload url) Example: recorder.setUploadUrl(url);
getUploader (Get uploader object) Example: recorder.getUploader();
update (Simply makes sure that all devices are captured and valid result is set for relevant properties.) Example: recorder.update(callback);
Cincopa recorder component (cpRecordUI)
cpRecordUI is used to create a User Interface (UI) for the cpRecordAPI. Which means you can create a look for the record component.
In order to create a UI component, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorderui.js"></script>
Once the script is added we can create the UI and hence you need to write the following:
var recorderUI = new cpRecorderUI(element, options); recorderUI.start();
cpRecorderUI has 2 arguments
element – In this argument, a DOM element needs to be, where the component will be created.
options – This contains an object of options for initial setup.
The following options are optional:
upload_url – The server URL, where the component will try to upload recorded video.
width – The width of the component in pixels (by default – 780).
height – The height of component in pixels (by default – 400).
theme_color – The theme color of component (by default – #ccc).
autoUpload – start upload after recording (by default – true)
uploadWhileRecording – starting to upload while recording(by default – false)
resolution – The resolution of recorded video (by default – 480)
audioBitsPerSecond – by default – 128000
videoBitsPerSecond – by default – 2200000
frameRate – by default – 25
onUploadComplete – The function which will be called when the recorded video has been successfully uploaded.
Callable Methods
There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:
start (Create the component) Example: recorderUI.start();
reset (Reset the component) Example: recorderUI.reset();
Example of a WordPress like review with video
The following is an example that ties everything together, you can view the source here https://www.cincopa.com/ugc/test
It contains an Input File to browse and upload media files from your computer and then Start, Stop, Pause or Resume the input file using the cpUploadAPI.
We have also added an HTML div with a class status-bar, where we will show the upload progress and a message to show when the upload is completed.
As mentioned in the CodePen article, do not forget to update the upload URL mentioned in line 6 of the JS code. Simply replace the URL with your Cincopa account’s upload_url and then all media files uploaded using the CodePen example above will be uploaded to your Cincopa Account’s Assets Library.
Cincopa Uploader Component (cpUploadUI)
cpUploadUI is used to create a User Interface (UI) for the cpUploadAPI. Which means you can create a look for the upload component.
In order to create a UI component, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/uploaderui.js"></script>
Once the script is added we can create the UI and hence you need to write the following:
var uploaderUI = new cpUploadUI(element, options); uploaderUI.start();
As you can see above, the cpUploadUI has two arguments:
element – In this argument, a DOM element needs to be, where the component will be created.
options – This contains an object of options for initial setup. URL is a required option as it will be the server URL, where the API will try to upload.
The following options are optional:
upload_url – The server URL, where the component will try to upload (required)
width – the width of the component in pixels (by default – 780)
height – The height of component in pixels (by default – 400)
theme_color – the theme color of component (by default – #0086CF)
multiple – allow multiple uploads (by default – true)
regex – regular expression for allowed file extensions
btnText – “Choose files to upload”
dragAndDropText – “Drag & Drop Your Files Here”
onUploadComplete – function which will be called when the file has been successfully uploaded
Callable Methods
The following are the allowed callable methods that you can use to execute certain predefined functions:
start (Create the component) Example: uploaderUI.start();
Cincopa record API (cpRecordAPI)
cpRecordAPI is the most important functionality which is used to record the video using your webcam. In order to use this API, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorder.js"></script>
In order to reference to recorder object, you need to include the following script in your webpage:
var recorder = new cpRecordAPI(options); recorder.activate();
cpRecordAPI has just 1 argument
options – An object of options for initial setup.
The following are the list of options that you can use:
resolution – The resolution of recorded video (by default – 480).
aspectRatio – The aspect ratio of video (by default – 16/9).
microphone – Enable Voice Recording Option (by default – true).
frameRate – By default – 25M
facingMode – By default – null 25
audioBitsPerSecond – By default – 128000
videoBitsPerSecond – By default – 2200000
autoUpload – Start upload after recording (By default – on).
uploadWhileRecording – Starting to upload while recording(by default – false)
upload_url – Starting to upload while recording(by default – empty string)
onInit – function which will be called when device data will be loaded
onRecord – function which will be called during recording
onStop – function which will be called when recording has been stoped
onUploadStart – function which will be called when uploaded started, when uploadWhileRocording is true this callback not called
onUploadComplete – function which will be called when upload has been completed
onUploadProgress – function which will be called while uploading
onUploadError – function which will be called when upload will end with error
onStreamReady – function which will be called when stream will be ready
Callable Methods
There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:
activate (activate recorder) Example: recorder.activate();
start (Start to get camera feed) Will return created video element Example:recorder.start();
record (Start to record camera feed) Example: recorder.record();
stop (Stop recording) Example: recorder.stop();
reset (Reset recording) Example: recorder.reset();
rerecord (Restart recording) Example: recorder.rerecord();
requestPermission (Request permission to use webcam and microphone) Example:recorder.requestPermission(camera, microphone, onApprove, onDeny);
nowRecording (Check if recording is in progress) Example: recorder.nowRecording();
hasWebcam (Check if webcam is available) Example: recorder.hasWebcam();
hasWebcamPermissions (Check if website has permission to use webcam) Example: recorder.hasWebcamPermissions();
hasMicrophone (Check if microphone is available) Example: recorder.hasMicrophone();
hasMicrophonePermissions (Check if website has permission to use microphone) Example: recorder.hasMicrophonePermissions();
isRecordingSupported (Check if browser supports recorder API) Example: recorder.isRecordingSupported();
getVideoInputs (Returning video input devices) Example: recorder.getVideoInputs();
getAudioInputs (Returning audio input devices) Example: recorder.getAudioInputs();
setVideoInput (Set video input device) Example: recorder.setVideoInput(deviceID);
setAudioInput (Set audio input device) Example: recorder.setAudioInput(deviceID);
createVideoStream (Will create stream and pass it to callback) Example: recorder.createVideoStream(callback);
stopVideoStream (Stop passed stream) Example: recorder.stopVideoStream(stream);
setUploadUrl (Set upload url) Example: recorder.setUploadUrl(url);
getUploader (Get uploader object) Example: recorder.getUploader();
update (Simply makes sure that all devices are captured and valid result is set for relevant properties.) Example: recorder.update(callback);
Cincopa recorder component (cpRecordUI)
cpRecordUI is used to create a User Interface (UI) for the cpRecordAPI. Which means you can create a look for the record component.
In order to create a UI component, you need to include the following script in your webpage:
<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/recorderui.js"></script>
Once the script is added we can create the UI and hence you need to write the following:
var recorderUI = new cpRecorderUI(element, options); recorderUI.start();
cpRecorderUI has 2 arguments
element – In this argument, a DOM element needs to be, where the component will be created.
options – This contains an object of options for initial setup.
The following options are optional:
upload_url – The server URL, where the component will try to upload recorded video.
width – The width of the component in pixels (by default – 780).
height – The height of component in pixels (by default – 400).
theme_color – The theme color of component (by default – #ccc).
autoUpload – start upload after recording (by default – true)
uploadWhileRecording – starting to upload while recording(by default – false)
resolution – The resolution of recorded video (by default – 480)
audioBitsPerSecond – by default – 128000
videoBitsPerSecond – by default – 2200000
frameRate – by default – 25
onUploadComplete – The function which will be called when the recorded video has been successfully uploaded.
Callable Methods
There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:
start (Create the component) Example: recorderUI.start();
reset (Reset the component) Example: recorderUI.reset();
Example of a WordPress like review with video
The following is an example that ties everything together, you can view the source here https://www.cincopa.com/ugc/test