Adding Record Video Button in 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 go to the INTEGRATIONS page.

  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.

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

 

Getting the recorded video

The input element will contain the recorded video's URL after recording is finished. You can also listen to our recording events to fully customise the recording experience.

 

Javascript API


OnLoad Callback


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

});


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



Sample Code

window.hippoWidget.onLoad(function(){

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

        console.log("recording initiated");

    });

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

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

    });

});


Start Recording

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.



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 recording is supported in the current device

'extensionAvailable' : if extension is installed and enabled

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

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

capabilities: 

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

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

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



Install Extension

window.hippoWidget.installExtension(success, error);


Opens the chrome webstore 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. ex. extension already installed etc



Event Handling

window.hippoWidget.on(eventname, callback);


Available Events


EVENT
DESCRIPTION
DATA
record_initiated
When recording is initiated
preview_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.
record_started
When recording is started. (After user accept the permissions, etc.)
-
record_paused
When user pauses the recording
-
record_resumed
When user resumes the recording which is paused.
-
record_stopped
When user stops the recording
-
record_aborted
Same as 'video_cancelled'. Additionally, this event will also be triggered when a user aborts the recording while recording itself(future)
-
record_error
When there is some issue with recording
error: reason for error

video_cancelled
When the user cancels submitting the recorded video
-
video_submitted
When the recorded video is submitted by the user
-
import_progress
When import is in progress
operation: "started"/"uploading"progress : percentage of file uploaded from client (when operation = "uploading")
import_complete
When import is successful
preview_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.
import_failed
When import fails due to some error
reason: reason for error


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