Video Recorder API - Seamless Screen Recording with Hippo Video
Doing videos the boring way? Convert TEXT to VIDEOS with Humanize AILet's Go

Impactful for reaching prospects quickly and we can make it very personalized!

Tiffany S

Vice President, Operations PeopleShare
Request a Demo
Please enter your first name
Please enter your last name
Please enter your work email

Please enter your company name
Select Your Job Title

Thank you, your demo request is submitted.

Our reps will get in touch soon Meanwhile, you can access a Hippo Video free trial by clicking here.

close form

Get started in just 4 simple steps

Step 1:

Login to your Hippo Video account and go to the INTEGRATIONS page.

Step 2:

Click on the button near the Generic Embed Widget

Step 3:

Now copy the script code and place it inside the head tag. Preferably at the beginning, before all the other scripts.

Step 4:

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

* To record screen, your viewers need to have the Chrome Extension

chrome
Hippo Video SDK

Getting the recorded video

The input element will contain the recorded video’s URL after recording is finished.

Hippo Video SDK Components

Click to expand and view sample codes for each SDK component used in our Video APIs

Recorder API

Import API

Reports API

Webhooks

Sandbox Environment

Live Example

Recorder API

Start Recording

You can customize the recording options.

var recordingConfiguration = {

screenRecord: true,

audio: true,

webCam: true,

systemAudio: true,

resolution: "720",

separateLayer: false,

initiator: 'generic_embed'

};

window.hippoWidget.startRecording(recordingConfiguration)

  • 'audio' option enables the mic recording
  • systemAudio' enables the system audio like any application or browser tab playing any music.

Stop Recording

window.hippoWidget.stopRecording()

Logs and Event Handling

window.hippoWidget.on(eventname, callback);

Events

EVENTDESCRIPTIONDATA
record_initiatedWhen 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’

Show More

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.

Show Less
record_startedWhen recording is started.
(After user accept the permissions, etc.)
-
record_pausedWhen user pauses the recording -
record_resumedWhen user pauses the recording -
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 recording

reason: 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
Show More
  • 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.
Show Less
video_cancelledWhen the user cancels submitting the recorded video -
video_submittedWhen the recorded video is submitted by the user
media_duration: duration of recorded/imported media in seconds.
import_progressWhen import is in progress
operation: “started”/“uploading”progress : percentage of file uploaded from client (when operation = “uploading”)
import_completeWhen 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’)

Show More

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.

Show Less
import_failedWhen 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. -

Import API

Import API

window.hippoWidget.import()

Params

  • title - Video title
  • URL - Downloadable URL of the video
  • email - email of the user
  • api_key - API Key of the user

Response

{

"status": 200,

"code": 200,

"video_id":1412089,

"share_url": "https://www.hippovideo.io/video/play/KQf5MPDupD2qFi4U_LYoo436nEf7gilJIW0I_Pn1Ia8",

"embed_url": "https://www.hippovideo.io/video/embed/KQf5MPDupD2qFi4U_LYoo436nEf7gilJIW0I_Pn1Ia8",

"thumbnail_preview": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/previews/KQf5MPDupD2qFi4U_LYoo436nEf7gilJIW0I_Pn1Ia8.gif",

}

  • share_url -  Shareable video link.
  • embed_url - Link to embed the video.
  • thumbnail_preview - Thumbnail of the video with a play icon (you can share the thumbnail linking it to your video).

Reports API

Reports API

For detailed documentation, refer this postman link.

This API provides two types of reports:

1. Reports for a video

Params

  • email - email of the user
  • api_key - Api Key of the user
  • video_id - id of the video

Response

{

"status": 200,

id": 988,

"total_plays": 13,

"total_page_loads": 15,

"unique_users": 10,

"avg_watch_rate": 85,

"actions": {

"no_of_actions": 111,

"annotations": 4,

"call_to_actions": 19,

"forms": 6,

"end_screens": 3,

"questions": 5,

"comments": 8,

"reactions": 63,

"replies": 3

}

"watch_rate": {

"0": 0,

"25": 3,

"50a

"75": 1,

"100": 5

},

"popular_region": "Houston, Texas",

"plays_in_popular_region": "1 plays from Houston, Texas"

}

  • id - Video ID
  • total_page_loads - Number of times the shared link is opened.
  • total_plays - Number of times the video has been played out of total page loads.
  • unique_users - Number of unique users that have played the video.
  • avg_watch_rate - The overall percentage (total duration watched / total plays * video duration)
  • actions - (annotation, CTA, lead generation forms, etc.)
  • no_of_actions - Total number of actions.
    • annotations - Number of clicks on annotations.
    • call_to_actions - Number of clicks on CTA.
    • forms - Number of clicks on lead generation forms.
    • end_screens - Number of clicks on playlist.
    • questions - Number of clicks on custom poll.
    • comments - Total number of comments on the video.
    • reactions - Total number of reactions on the video.
    • replies - Number of replies to the comments.

Viewer profile reports

a. Based on Video

This report offers all the details of a video such as the number of views, watch rate, viewer location, and the viewer's engagement on a particular video. To get the reports, you must call the link below.

Params:

  • email - email of the user
  • api_key - API Key of the user
  • user_email (optional) - mail id of the lead
  • video_id (optional) - id of the video

Note: You can either provide user_email or video_id. They are mutually exclusive. If you'd like to know how a particular video is performing, then enter video_id.

Response

{

"status": 200,

"viewer_profile": [

{

"video_id": "988",

"email": 'michael.clark@icc.com',

"viewer_name": 'Michael Clark',

"ip": "188.XXX.29.XXX",

"last_viewed_time": "31/12/2018 02:23 AM",

"location": "Sydney, Australia",

"device": "DESKTOP"

"os": Macintosh,

"browser": Chrome,

"referer_url": '<https://www.google.co.in/>',

"precentage_played": 95,

"views": 2

}

],

"load_more": false,

"page": 1,

"next_page": 2

}

b. Based on Lead’s Email

This report offers all the details for a particular lead’s email address such as the number of videos watched, watch rate, lead's location, and their engagement on the videos.

Params

  • email - email of the user
  • api_key - API Key of the user
  • user_email (optional) - mail id of the lead

Note: This API is the same as the report based on the video, except the ‘user_email’ param should be passed instead of 'video_id.'

Response

{

"status": 200,

"viewer_profile": [

{

"video_id": "999",

"email": "joebrown@google.com",

"viewer_name": "Joe Brown",

"ip": "188.XXX.29.XXX",

"last_viewed_time": "09/01/2019 12:27PM",

"location": " NA ",

"device": "DESKTOP",

"os": Macintosh,

"browser": "Chrome",

"referer_url": "https://mail.google.com/mail/u/#sent/16831654c41cc10a",

"precentage_played": 36,

"views": 1

},

{

"video_id": "937",

"email": "joebrown@google.com",

"viewer_name": "Joe Brown",

"ip": "188.XXX.29.XXX",

"last_viewed_time": "19/10/2018 12:25PM",

"location": "Naples, ITALY",

"device": "DESKTOP",

"os": "Macintosh",

"browser": "Chrome",

"referer_url": " NA ",

"precentage_played": 100,

"views": 1

}

],

"load_more": false,

"page": 1,

"next_page": 2

}

  • video_id - ID of the video.
  • email - Email address of the lead.
  • viewer_name - Name of the lead.
  • ip - Masked IP of the lead.
  • last_viewed_time - Time at which the lead has watched the video.
  • location - Geographical location of the lead.
  • device - Device used by the lead to watch the video.
  • os - Operating system of the device in which the lead has watched the video.
  • browser - The browser in which the lead has watched the video.
  • referer_url - The address of the webpage where a person clicked a link that sent them to your video.
  • percentage_played - Percentage of video watched.
  • load_more - By default, the number of videos in an API call is 10. P.S: load_more is true if it has more results left.
  • page - The current page number.
  • next_page - The number of the next page.

The above responses are success cases. In case, any errors occur you’ll see an error response.

Webhooks

Webhooks

Webhook helps you to get notified as soon as someone takes a desired action on your platform. A Webhook enables an application to send automated messages or information to another application, whenever an event takes place, in real-time. Basically, a Webhook is a medium that enables apps to communicate with each other and share data.

Available events in Webhook

Any change that occurs on an application or a system is considered an event. Here are some default events that we provide:

1. Viewing Session

Find out who watched your video. When someone clicks on your video, we’ll notify you of the watch rate along with other user details (only if the viewer has logged in before watching your video).

Example Response:

{

"hook": {

"uuid": "fb9f6d19-921f-48c5-9a10-69c39e5fa13c"

}

"VideoPlayedSessions": {

"media": {

"videoId": 444076,

"thumbnail": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/thumbnails/21594/da2f955a-5410-489b-a10c-43b7d0a192af_play.jpg",

"name": "Pro edit full flow",

"shareUrl": "https://www.hippovideo.io/video/play/mp1lhvzM9gyOY1mg19Fl2Q",

"embedUrl": "https://www.hippovideo.io/video/embed/mp1lhvzM9gyOY1mg19Fl2Q",

"duration": 171.689

},

"percentagePlayed": 100,

"email": "support@hippovideo.io"

},

"metadata": {

"account_id": "24880"

}

}

2. Video Created

We notify you whenever someone creates a video on your platform.

Example Response:

{

"hook": {

"uuid": "598210b8-e373-48eb-ac3f-4b8f08fa8066"

}

"eventName": "VideoCreated",

"eventTimestamp": "1542032461018",

"VideoCreated": {

"media": {

"videoId": 834871,

"thumbnail": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/thumbnails/v2/FCNN4s7tKjCOaecmg6hjzw_play.jpg",

"name": "Hey Ashley",

"shareUrl": "https://www.hippovideo.io/video/play/FCNN4s7tKjCOaecmg6hjzw",

"embedUrl": "https://www.hippovideo.io/video/embed/FCNN4s7tKjCOaecmg6hjzw",

"duration": 13.76

},

},

"metadata": {

"account_id": "60753",

"created_by": "support@hippovideo.io"

}

}

3. CTA

Get notified whenever your viewers click on a Call to Action (CTA) in your video.

Example Response:

{

"hook": {

"uuid": "ffc5bf89-16e8-428d-92e8-a94016b5e8f2"

}

"eventName": "VideoCTA",

"eventTimestamp": "1542191371256",

"VideoCTA": {

"media": {

"videoId": 809864,

"thumbnail": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/thumbnails/v2/c9ryLBsotAVJITn12NZIKg_play.jpg",

"name": "A",

"shareUrl": "https://www.hippovideo.io/video/play/FCNN4s7tKjCOaecmg6hjzw",

"embedUrl": "https://www.hippovideo.io/video/embed/c9ryLBsotAVJITn12NZIKg",

"duration": 146.912

},

"ctaUrl": "https://www.hippovideo.io/video/cta/809864",

"email": "support@hippovideo.io"

}

"metadata": {

"account_id": "60753"

}

}

4. CTA Lead Generation

Get notified with your lead's information. Whenever someone fills a form that you have embedded in your video, you’ll receive an instant notification, with their details. You can also choose to update your lead's information straight away into your CRM platform.

Example Response:

{

"hook": {

"uuid": "681dc0a4-1baa-497e-b9c4-674a66924f88"

}

"VideoLeadGenaration": {

"media": {

"videoId": 826784,

"thumbnail": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/thumbnails/v2/U4GZz3AFN8vHcplqEYl7Fg_play.jpg",

"name": "Sales demo",

"shareUrl": "https://www.hippovideo.io/video/play/U4GZz3AFN8vHcplqEYl7Fg",

"embedUrl": "https://www.hippovideo.io/video/embed/U4GZz3AFN8vHcplqEYl7Fg",

"duration": 139.203

},

"firstName": "Varun",

"lastName": "Ch",

"email": "support@hippovideo.io",

"phone": "2132121"

}

"metadata": {

"account_id": "24880"

}

}

5. CTA Annotation

Do you have an annotation that directs your viewers to your website? How do you track who clicked on your annotation? Don’t worry. We notify who’s clicking on your annotation along with the viewer’s information.

Example Response:

{

"hook": {

"uuid": "e72c91f5-9c7a-4419-bd1e-c1d3d17ae3ef"

}

"eventName": "VideoAnnotation",

"eventTimestamp": "1541759939981",

"payload": {

"VideoAnnotation": {

"videoId": 814440,

"thumbnail": "https://hippolms-storage.s3-accelerate.amazonaws.com/wiz/videos/thumbnails/v2/cS-qeih4T7LkWzhQnYbzVA_play.jpg",

"name": "Hey, How are you?",

"shareUrl": "https://www.hippovideo.io/video/play/cS-qeih4T7LkWzhQnYbzVAhttps://www.hippovideo.io/video/play/cS-qeih4T7LkWzhQnYbzVA",

"embedUrl": "https://www.hippovideo.io/video/embed/cS-qeih4T7LkWzhQnYbzVA",

},

"annotationText": "Google",

"annotationUrl": "https://www.google.co.in/",

"annotationClickedTime": 0,

"email": "support@hippovideo.io"

}

"metadata": {

"account_id": "60753"

}

}

Secret Key

On the other hand, anyone with your server URL can send you data. To verify the data source, we suggest you create a secret key of your choice. So that whenever you receive information from Hippo Video, you can verify whether the data is from us.

It works this way - Every time you receive data from our side, we also provide Hippo Video signature in the request. Using the signature, you can verify the data authenticity by checking it at your end. We’ll generate an HMAC hexdigest of the POST body, using the secret_key that you created, while configuring your webhook. The generated hexdigest will be shared with you along with the event data. If you have any questions, contact us at support@hippovideo.io

Sandbox Environment

Live Example

Contact Us

SUBMIT A REQUEST
X
X
* fields are mandatory

Sample Page

You can also customize the button that you want to display on your page. Here are some sample pages

sample-image
If you’d like to customize the button, please contact us at sdk@hippovideo.io
Differentiators

How the video recorder API works

one-image

Record your
webcam/screen or
import an existing video

two-image

Edit your video
to perfection

three-image

One-click share in
your favourite channels

four-image

Host all the
videos in one place

Book Consultation

Impactful for reaching prospects quickly and we can make it very personalized!

Tiffany S

Vice President, Operations PeopleShare
Request a Demo
Please enter your first namePlease enter your last name
Please enter your business email

Please enter your company name
Select Your Job Title

Thank you for requesting a demo with Hippo Video.

Our team will soon get in touch with you. Meanwhile, you can watch all the demo videos here.

close form
Request a Demo
Please enter your first name
Please enter your last name
Please enter your business email

Please enter your company name
Select Your Job Title

Thank you for requesting a demo with Hippo Video.

Our team will soon get in touch with you. Meanwhile, you can watch all the demo videos here.

close form