Documentation

Namespace: UI

UI

UI namespace of WebViewer Video

Example

WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      videoInstance.UI.updateElement('redactApplyButton', {
        onClick: (redactAnnotations) => {
          // custom code here
        }
      });
    });

Methods

<static> enableCompareMode()

Enables frame by frame comparison of videos
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      await videoInstance.UI.enableCompareMode();
    });

<static> getFrames(framesToGet)

Asynchronously retrieves frames from the loaded video in WebViewer Video
Parameters:
Name Type Description
framesToGet Array.<number> an array of frame numbers to retrieve
Returns:
Returns a map of the frames as type HTMLCanvasElement.
Type
Object
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      const documentViewer = instance.Core.documentViewer;
      documentViewer.addEventListener('videoElementReady', async () => {
        const frames = await videoInstance.UI.getFrames([0, 125]);
        // YOUR CODE HERE
      });
    });

<static> loadCompareVideoA(url, options)

Loads a video for the first video instance in compare mode
Parameters:
Name Type Description
url string | Blob | File The video url or video file or video blob
options Object Optional options object
Properties
Name Type Argument Default Description
fileName string <optional>
 Name of the file. URLs without an extension need this property set
headers Object <optional>
 Custom headers to attach when making http requests to provided URL
withCredentials Object <optional>
 false CORS requests for this element will have the credentials flag set to 'include'
generatedPeaks Array <optional>
 null An array of pre-generated peaks for corresponding video file
useShakaPlayer boolean <optional>
 true Runs shaka player integration instead of HTML video
fps number <optional>
 null Sets the frames per second of the video. Usually retrieved automatically, but this option may be used incase that fails.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      await videoInstance.UI.enableCompareMode();
      videoInstance.UI.loadCompareVideoA(videoUrl);
    });

<static> loadCompareVideoB(url, options)

Loads a video for the second video instance in compare mode
Parameters:
Name Type Description
url string | Blob | File The video url or video file or video blob
options Object Optional options object
Properties
Name Type Argument Default Description
fileName string <optional>
 Name of the file. URLs without an extension need this property set
headers Object <optional>
 Custom headers to attach when making http requests to provided URL
withCredentials Object <optional>
 false CORS requests for this element will have the credentials flag set to 'include'
generatedPeaks Array <optional>
 null An array of pre-generated peaks for corresponding video file
useShakaPlayer boolean <optional>
 true Runs shaka player integration instead of HTML video
fps number <optional>
 null Sets the frames per second of the video. Usually retrieved automatically, but this option may be used incase that fails.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      await videoInstance.UI.enableCompareMode();
      videoInstance.UI.loadCompareVideoA(videoUrl);

      window.addEventListener(
        'documentViewer2Ready',
        () => {
          videoInstance.UI.loadCompareVideoB(videoUrl);
        },
        { once: true },
      );
    });

<static> updateElement(dataElement, props)

Update an WebViewer Video element in the viewer. Valid options are 'redactApplyButton'.
Parameters:
Name Type Description
dataElement string the data element of the element that will be updated.
props object an object that is used to override an existing item's properties.
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const videoInstance = await initializeVideoViewer(
        instance,
        {
          license,
        },
      );

      videoInstance.UI.updateElement('redactApplyButton', {
        onClick: (redactAnnotations) => {
          // custom code here
        }
      });
    });