Open navigation

Record API

Using Record API you can add recording and uploading video capabilities in your website.

To add a record video button to your website:

It’s easy to get started, follow the steps below to embed the record button in your site:

  1. Login to your Hippo Video account and click on the Settings icon from the left navigation bar > select Integrations.

  2. Click on the button near the Generic Embed Widget.


  3. Now copy the script code and place it inside your body tag. Preferably at the end.

  4. Copy the HTML code and place it wherever you want the video recording button to appear.

Note: To record screen, you viewers need to have the Chrome Extension.

 

To get the recorded video:

The input element inside the div with id "hv-generic-embed-input" will contain the recorded video's URL after the recording is finished. You can also listen to our recording events to fully customize the recording experience.

 

Javascript API

Using the Javascript API, you can start recording, listen to the various recording events and customize the video recording through recordingConfiguration.

Hippo Video widget can be initiated like the below


OnLoad Callback


window.hippoWidget.onLoad(function(){
    //All widget related code here

});



Note: all widget related code must be inside this function.



Sample Code


Sample code to initiate the widget and listen the events


window.hippoWidget.onLoad(function(){

    window.hippoWidget.on("record_initiated", function(){

        console.log("recording initiated");

    });

    window.hippoWidget.on("video_submitted", function(event){

        console.log("recording submited" + event.recorded_url);

    });

});



Start Recording


Recording can be started like 


var recordingConfiguration = {

      screenRecord: true,

      audio: true,

      webCam: true,

      systemAudio: true,

      resolution: "720",

      separateLayer: false,

};

window.hippoWidget.startRecording(recordingConfiguration)


recording can be customized with various parameters passed in recordingConfiguration

ParameterTypeSample Values
Description
screenRecord
Booleantrue,falseTo enable or disable Screen Recording
webCam
Boolean
true,false
To enable or disable Webcam
audio
Boolean

true,false

To enable or disable mic for Recording
showPreview
Booleantrue,false
To enable or disable Pre Record Preview
title
String

To provide Title in Pre record Preview page
description
String


recordTime
Integer
100Restrict the recording duration. Record will happen only for the specified duration. Duration specified in seconds
showFaceCue
Boolean
To enable or disable Face Cue
showLightingFeedback
Boolean
To enable or disable Lighting feedback
aspectRatio
Float
To set the recording video to the specified aspect ration
customVideoTitle
String
To set the title of recorded video
showAdvancedOptions
Boolean
To enable or disable advanced option in preview
showRetake
Boolean
To enable or disable retake button
autoSubmit
Boolean

To submit video automatically
teleprompter_script_id
Integer
To set the default teleprompter script
systemAudio
Boolean
To record system audio while screen record. This is depends on the system capabilities.
resolution
String

To set the resolution of screen record


'screenRecord' record your screen. 

'audio' record microphone audio

'systemAudio' record system audio (audio from system applications like VLC Mediaplayer, or browser tabs like Youtube, etc). 

Both 'audio' and 'systemAudio' can also be set to true.

 

Stop Recording

window.hippoWidget.stopRecording()

Stops the on-going recording.


Import Video/Audio

window.hippoWidget.import()


Initiates media import.


window.hippoWidget.importFile(file)


Imports the given file.


Get Environment details

window.hippoWidget.getEnvironmentDetails(callback)


Callback called with the environment details in the following format

{   

    recordingSupported: true,

    extensionAvailable: false,

    extensionSupported: true,

    delegatedRecord: false,

    capabilities:  {

        screen: false,

        webcam: true,

        audio: true,
systemAudio: false
}
}


'recordingSupported' :  if the recording is supported in the current device

'extensionAvailable' : if the extension is installed and enabled

'extensionSupported' : if the extension is supported in the current device

'delegatedRecord' : if the recording process is delegated to the mobile

capabilities: 

'screen' : if the screen recording is possible with the current setup

'webcam': if the webcam recording is possible with the current setup

'audio' : if the microphone recording is possible with the current setup
'systemAudio': if the system audio can be recorded with the current setup



Install Extension

window.hippoWidget.installExtension(success, error);


Opens the chrome web store link for the user to install the extension.

Success callback will be called when the extension is installed successfully.

Error callback will be called along with the reason in case of any errors. Eg: extension already installed etc.



Event Handling

window.hippoWidget.on(eventname, callback);


Available Events


EVENT
DESCRIPTION
DATA
record_initiatedWhen recording is initiatedpreview_url: URL to preview video. (preview will be available at any point of time for the recorded user. For others, it will be the same as 'recorded_url')
recorded_url: video delivery URL. URL to share/mail/message others.
embed_url: similar to recorded_url. Optimized for embedding as an iframe in a website.
thumbnail_url: thumbnail URL of the video.
thumbnail_play_url: similar to 'thumbnail_url', except the play icon is displayed at the center.
token: video token for the recorded video.
asset_id: Hippo internal recording identifier.
record_startedWhen recording is started. (After user accept the permissions, etc.)-
record_pausedWhen user pauses the recording-
record_resumedWhen user resumes the recording which is paused.-
record_stoppedWhen user stops the recording-
record_abortedSame as 'video_cancelled'. Additionally, this event will also be triggered when a user aborts the recording while recording itself(future)-
record_errorWhen there is some issue with recordingreason: Contains the error subtype. Will be one of the following, 
  • NOTHING_RECORDED - When the user finished recording too soon, or before any data is available from the recording devices.
  • WEBCAM_PERMISSION_DENIED - When the user denies permission to record webcam
  • SCREEN_PERMISSION_DENIED - When the user denies permission to record screen
  • TAB_CANNOT_BE_RECORDED - Certain tabs like chrome tabs (chrome://), cannot be recorded. This state is sent when the user tries to do so.
  • CHROME_NOT_SUPPORTED - When the user tries to record in an old version of chrome which does not support screen recording.
  • CREATE_VIDEO_REQUEST_FAILED - This could be due to network issues when the request for creating a video from the client to the Hippo Video server fails.
  • PREPROCESS_FAILED - When Hippo Video is not able to preprocess the video.
  • PREPROCESS_REQUEST_FAILED - This could be due to network issues when the request for preprocessing the video from the client to the Hippo Video server fails.
  • NETWORK_ERROR - This occurs due to network issues.
  • NO_DATA_AVAILABLE - When no stream data is received from the user while screen recording.


error: detailed message for the error.


video_cancelledWhen the user cancels submitting the recorded video-
video_submittedWhen the recorded video is submitted by the userrecorded_url: video delivery URL. URL to share/mail/message others.
media_duration: duration of recorded/imported media in seconds.
import_progressWhen import is in progressoperation: "started"/"uploading"progress : percentage of file uploaded from client (when operation = "uploading")
import_completeWhen import is successfulpreview_url: URL to preview video. (preview will be available at any point of time for the recorded user. For others, it will be the same as 'recorded_url')
share_url: video delivery URL. URL to share/mail/message others.
embed_url: same as recorded_url. optimized for embedding as an iframe in website.
thumbnail_url: thumbnail URL of the video.
thumbnail_play_url: same as 'thumbnail_url', but with play icon at the middle.
token: video token for the recorded video.
asset_id: Hippo internal recording identifier.
media_duration: duration of imported media in seconds.
import_failedWhen import fails due to some errorreason: reason for error
source_uploadedwhen the source media file(s) have been uploaded successfully to hippovideo servers.
Once this event is triggered, it is guaranteed that there will be no data loss of the recorded or imported video.
-


Sample Page

You can also customize the button you want to be displayed on your page. Here are some sample pages:

1) https://www.hippovideo.io/embed-sample-form.html


2) https://www.hippovideo.io/hippowidgetsample.html



If you'd like to customize the button, please contact us at support@hippovideo.io


To check out other articles related to this topic.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.