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: <RECORDER_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: <RECORDER_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);

info

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