Skip to main content

API reference

This page will contain the javascript API reference for the annotation tool.

Annotation class​

The annotation class is the main class of the annotation tool.

new Annotation(Element, Options);

Constructor​

Element: String | HTMLElement​

The selector of a <div> or the HTMLElement itself.

Options: Object​

An object containing the options for the annotation tool.


const options = {
  width: '100%',
  height: '100vh',
  pdf: 'https://playground.pathfindr.dev/hello.pdf', // or blob object
  language: 'en', // 'en' | 'de' | 'da'
  accessToken: 'documenta-tion-toke-n935-27ee26170781'
  filename: 'custom-filename', // optional, if not present the filename will be extracted from the URL
  mode: 'edit' // or 'view' | 'edit-wo-video', 
  showHeader: true, // or false
  skipWelcome: false, // or true 
  translations: {
    "en": {
      "welcome_modal.title": "Ahoi!",
      // ...
    },
    "fr": {
        "welcome_modal.title": "Bonjour",
        "welcome_modal.text": "Ici, vous pouvez annoter des documents et faire un enregistrement d'écran.",
        // ...
    }
  
};
width: String​

The width of the annotation tool.

height: String​

The height of the annotation tool.

pdf: String or Blob​

This option should containe a publicly accessible URL to a document in one of the supported format. We also support documents in a Blob object, if you want to avoid public URLs

The document to annotate. Supported formats:

  • .pdf
  • .doc
  • .xls
  • .ppt
  • .docx
  • .xlsx
  • .pptx
  • .ppsx
  • .jpg
  • .png
  • .tiff
note

The document is passed through our servers to convert it to a PDF. In case of using URLs, like this, we also avoid CORS issues.

note

Blob support is available since version 2.2.0

language: String​

The language of the annotation tool. Supported languages:

  • da (Danish)
  • en (English)
  • de (German)
accessToken: String​

The token that gives you permission to upload the document and video.

filename: String​

This is a custom filename that will be used when uploading the document and video. If not present, the filename will be extracted from the URL.

note

When using a Blob object, the filename cannot be extracted, so we recommend to set this option manually.

mode: String​

The mode of the annotation tool. Supported modes:

  • view: The user can only view the document and annotations.
  • edit: The user can view and edit the document and annotations.
  • edit-wo-video: The user can view and edit the document and annotations, but the video recording is disabled.
showHeader: Boolean​

Show or hide the header of the annotation tool.

skipWelcome: Boolean (after v3.0.0)​

Skips the welcome modal

translations: Object​

Allows you to override the default translations or implement a new language.

{
    translations: 
    {
        "da": {
          "welcome_modal.title": "Velkommen",
          "welcome_modal.text": "Her kan du kommentere i dokumenter og lave en skærmoptagelse.",
          "welcome_modal.button": "Okay",
          "permission_modal.title": "Du skal give adgang",
          "permission_modal.text": "Du skal give adgang til dit kamara og skærm for at optage.",
          "permission_modal.button_permission": "Giv adgang",
          "permission_modal.button_camera": "Kamera",
          "permission_modal.button_screencamera": "Skærm + Kamera",
          "permission_modal.button_audio": "Lyd",
          "permission_modal.button_no_permission": "Fortsæt uden video",
          "permission_modal.no_browser_support_title": "Ingen browser support",
          "permission_modal.no_browser_support_text": "Din browser understøtter ikke skærmoptagelse. Dette kan skyldes flere ting, såsom manglende sikkerhed, gamle browsere eller at mobiltelefoner ikke er understøttet.",
          "uploading_modal.title": "Uploader...",
          "success_modal.title": " Hurra!",
          "success_modal.text": "Dine filer er blevet sendt.",
          "error_modal.title": "Hov. Der er sket en fejl.",
          "error_modal.text": "Pokkers. Filerne kunne ikke sendes. Prøv igen eller download dine filer.",
          "error_modal.button_download_video": "Download video",
          "error_modal.button_download_pdf": "Download PDF",
          "error_modal.button_retry": "Prøv igen",
          "navbar.button_done": "Upload",
          "navbar.uploading_text": "Uploader...",
          "navbar.button_cancel": "Fortryd",
          "navbar.helper_text_not_ready": "Lav en optagelse eller rediger dokumentet",
          "navbar.helper_text_ready": "Klar til at uploade",
          "access_token_unvalid": "Dette er en prøve version og må udelukkende bruges til test og demonstration!"


          // since v3.0.0
          "Audio Player": "Lydafspiller",
          "Video Player": "Videoafspiller",
          "Play": "Afspil",
          "Pause": "Pause",
          "Replay": "Genafspil",
          "Current Time": "Aktuel tid",
          "Duration": "Varighed",
          "Remaining Time": "Resterende tid",
          "Stream Type": "Stream Type",
          "Loaded": "Indlæst",
          "Progress": "Fremskridt",
          "Progress Bar": "Fremskridtslinje",
          "progress bar timing: currentTime={1} duration={2}": "{1} af {2}",
          "Fullscreen": "Fuldskærm",
          "Non-Fullscreen": "Afslut fuldskærm",
          "Mute": "Lydløs",
          "Unmute": "Slå lyd til",
          "Playback Rate": "Afspilningshastighed",
          "Audio Track": "Lydspor",
          "Volume Level": "Lydstyrkeniveau",
          "Play Video": "Afspil video",
          "Modal Window": "Modal vindue",
          "No content": "Intet indhold",
          "Download the file": "Download filen",
          "An error occurred, please try again later.": "Der opstod en fejl, prøv venligst igen senere."

          "permission_waiting_title": "Venter på adgang",
          "permission_waiting_text": "Du skal give adgang i din browser for at kunne bruge kamera og mikrofon.",
          "permission_failed_title": "Browseren har blokeret adgangen",
          "permission_failed_text": "Du skal tjekke dine browser indstillinger.",
          "permission_failed_guide": "Hvis du har brug for hjælp, så læs",
          "permission_failed_link": "her",

          "permission_device_error_title": "Enheden er optaget",
          "permission_device_error_description": "Den anmodede enhed bruges af en anden applikation, eller browseren mangler OS-tilladelser",
          
          "permission_exotic_error_title": "Exotisk fejl",
          "permission_exotic_error_description": "Vis venligst dette til din it-person",
          "permission_retry": "Prøve igen",


          "uploading_waiting_title": "Uploading",
          "uploading_error_title": "Noget gik galt!",
          "uploading_error_text": "Der opstod en fejl- we are sorry! Du må prøve igen eller downloade din optagelse.",
          "uploading_error_button_retry": "Prøv igen",
          "uploading_error_button_download": "Download",
          "uploading_success_title": "Det lykkes!",
          "uploading_success_text": "Din optagelse er blevet uploadet og gemt!",

          "placeholder_text": "Optageren bliver vist et andet sted",
          "delete_recording_text": "Er du sikker på, at du ønsker at slette din optagelse?",
          "destroy_component_text": "Er du sikker på, at du ønsker at lukke optageren?",

          "microphone": "Mikrofon",
          "camera": "Kamera",

          "error_changing_camera" : "Fejl ved skift af kamera",
          "error_changing_microphone" : "Fejl ved skift af mikrofon",
          "error_no_device_selected" : "Ingen enhed valgt",
          "error_no_devices_found" : "Ingen tilgængelige enheder",
          "error_camera_stream_stop" : "Kamerastream stoppet",
          "error_screen_stream_stop" : "Skærmstreaming stoppet",
          "error_audio_stream_stop" : "Lydstream stoppet"
        },
        "fr": {
            "welcome_modal.title": "Bonjour",
            "welcome_modal.text": "Ici, vous pouvez annoter des documents et faire un enregistrement d'écran.",
            // ...
        }
    }
},

Methods​

The methods avaliable on the annotation class.

Toggle fullscreen:

toggleFullscreen(onOff?:boolean);

Upload the document and video:

upload();

Abort the upload:

abortUpload();

Destroy the component:

destroy();

Listens for events being emitted:

on(Event, Callback);

Event: String​

The name of the event

Callback: Function​

The function to be called when the event is emitted.

Events​

The events avaliable on the annotation class.

The annotation tool is initialized:

annotation.on('initialized', () => {
  console.log('initialized');
});

An error occured while loading the document:

annotation.on('document-error', () => {
  console.log('document-error');
});

An document has changed/has been annotated:

annotation.on('document-change', () => {
  console.log('document-change');
});

The recorder state has changed:

annotation.on('recorder-state-change', (data) => {
  console.log('recorder-state-change');
  console.log(data); // 'inactive' | 'recording' | 'paused'
});

The recording is complete:

annotation.on('recording-complete', () => {
  console.log('recording-complete');
});

The upload is in progress:

annotation.on('upload-progress', (data) => {
  console.log('upload-progress');
  console.log(data); // {total: 100, loaded: 50}
});

The annotation and uploading is complete:

annotation.on('complete', (data) => {
  console.log(data);
});

An error occured while uploading:

annotation.on('upload-error', () => {
  console.log('upload-error');
});

The upload has been aborted:

annotation.on('upload-aborted', () => {
  console.log('upload-aborted');
});