Import Widget

The Import Widget can used to import local video or audio file. Below is a simple implementation of the Import Widget.

NPM

import { initialize, ImportWidget } 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 importWidgetConfig = {
      show_video_title: true
    }

    ImportWidget.create(success.key, importWidgetConfig)
    .then((importer) => {

      importer.on("import_complete", (data) => {
        console.info('Import Data : ', data);
      });

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

CDN

// 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 importWidgetConfig = {
      show_video_title: true
    }

    HVRecorder.ImportWidget.create(success.key, importWidgetConfig)
    .then((importer) => {

      importer.on("import_complete", (data) => {
        console.info('Import Data : ', data);
      });

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

• ImportWidget can be opened with, importer.open()
• importer.importMedia(file): File object to upload (Optional). If file object is not passed, file picker dialog box opens to select video/audio file. Other ImportWidget methods are found in importer section.

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

ImportWidget events are found in Events and Data section.

info

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