Skip to main content

Edit Widget

The Edit Widget can used to re-edit the recording or import already in Hippo Video. Below is a simple implementation of the Edit Widget.


import { initialize, EditWidget } 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 editWidgetConfig = {
      editor_config: {
        asset_id: <HIPPO_VIDEO_ASSET_ID>
      }
    }

    EditWidget.create(success.key, editWidgetConfig)
    .then((editor) => {

      editor.on("editor_loaded", () => {
        console.info('Editor Loaded : ', 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);

HIPPO_VIDEO_ASSET_ID is passed in record_details event as asset_id for RecorderWidget. For ImportWidget, its passed in import_complete event as asset_id, this has to be passed as HIPPO_VIDEO_ASSET_ID here.

Editor methods are found in Editor section. EditWidget events are found in Events and Data section.

info

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