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)

'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

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.