Skip to main content

Record Widget

The Record Widget can be made use of to create Screen/Webcam/Mic recordings. Below is a simple implementation of the Recorder Widget.

import { initialize, RecorderWidget } from "@hippovideo/video-sdk";
import "@hippovideo/video-sdk/app/hv_recorder.css"; // Importing the styling required

let initializeOptions = {

const onVideoSdkInitialize = (success, error) => {
* error will be undefined in case of successfull initialization
* success will be undefined in case there is any error
* */
if (success) {

let recorderWidgetConfig = {
record_config: {
screen: false,
webcam: true,
mic: true

RecorderWidget.create(success.key, recorderWidgetConfig)
.then((recorder) => {

recorder.on("record_details", (data) => {'Recording Data : ', data);

recorder.on("video_submitted", (data) => {'Recording Submitted : ', data);
.catch((error) => {
//Error details if there is an error during widget creation

if (error) {
* Will contain the error details when there is an error in sdk initialization

initialize(initializeOptions, onVideoSdkInitialize);

RecorderWidget.create takes two parameters success.key from the SDK initialization and recorderWidgetConfig specifies type of recording(screen, webcam, webcam+screen), inline, retake_video option and others. The recorderWidgetConfig options is found in Record Widget Config section

The RecorderWidget.create returns a recorder object which will be used to start the recording, open the recorder and register the events. Recorder event list is found in Events and Data section.

Recording can be started in two ways:

  • This opens up a recorder screen with options. Record then can be started from this screen.
  • recorder.startRecording(): This will instantly start the recording. Unlike the open method recording options will not be shown.

Other recording methods are found in Recorder section.

Once the recording is completed, asset_id, play_url, embed_url, token and other details are passed in record_details event.


More details on Events, Errors and Configs can be found in Additional Data section