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.


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_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.
asset_id: Hippo internal recording identifier.
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
media_duration: duration of recorded/imported media in seconds.
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.
asset_id: Hippo internal recording identifier.
media_duration: duration of imported media in seconds.
import_failed
When import fails due to some error
reason: reason for error
source_uploaded
when 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