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 = {
  token: <VIDEO_SDK_TOKEN>,
};

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) => {
        console.info('Recording Data : ', data);
      });

      recorder.on("video_submitted", (data) => {
          console.info('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);

// Refer to 'Getting Started' section to add the cdn links to the website 

let initializeOptions = {
  token: <VIDEO_SDK_TOKEN>,
};

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
      }
    }

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

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

      recorder.on("video_submitted", (data) => {
          console.info('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
    */
  }
};

HVRecorder.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:

recorder.open(): 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.

info

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