How to create annotations in a video

Technical Support
, ,
1

Product:
webViewer
webviewer-video
windows
angular
Product Version:
“@pdftron/webviewer”: “^8.7.0”,
“@pdftron/webviewer-video”: “^4.25.4”,
“typescript”: “^4.8.4”,
“@angular/core”: “^14.0.6”,

Please give a brief summary of your issue:
(Think of this as an email subject)
How to create annotations in a video

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

PDFTron Systems Inc. | Documentation
An error occurs in setStartTime, setEndTime.

error TS2339: Property ‘setStartTime’ does not exist on type ‘RectangleAnnotation’
error TS2339: Property ‘setEndTime’ does not exist on type ‘RectangleAnnotation’

Please provide a link to a minimal sample where the issue is reproducible:
nothing.

Best Regard.

2

Hi,

Are you able to reproduce the issue with the latest version? Thanks!

Wanbo

3

Thank you for your reply.

Can’t use latest version.

Because we are developing on this version.

thanks!

4

Same result with version “@pdftron/webviewer”: “^8.11.0”.

5

Hello,

Sorry for the late reply. I was away for some of the holidays. Could you send me some example code of how you are calling initializeVideoViewer and then accessing setStartTime? Also could you check if the property startTime exists on the annotation?

initializeVideoViewer adds the setStartTime and endStartTime functions to the annotations. So maybe you are calling these functions before initializeVideoViewer.

Best regards,
Kristian

6

Thank you for your reply.

sample code.

ngAfterViewInit() {
  WebViewer(
    {
       path: '/webviewer',
       disabledElements: this.getDisabledElements(),
     },
     viewerRef.nativeElement
   ).then(async (instance: WebViewerInstance) => {
     
   this.viewerVideoInstance = await initializeVideoViewer(instance, {
     license: LicenseKey, 
     enableRedaction: false, 
     showFullscreenButton: true, 
     showSubtitlesButton: false, 
     showFrames: false, 
     showTooltipPreview: true, 
   });

   this.viewerVideoInstance.loadVideo(
      'video url'
    );

  });
}


clickButtonAddAnnotation() {
      const annot =
        new this.viewerInstance.Core.Annotations.RectangleAnnotation({
          Author: 'Test Author',
          Subject: 'Rectangle',
          ToolName: 'AnnotationCreateRectangle',
          Width: 231.5,
          Height: 182.5,
          X: 321,
          Y: 40,
          Listable: true,
          Color: new this.viewerInstance.Core.Annotations.Color(
            78,
            125,
            233,
            1
          ),
          StrokeColor: new this.viewerInstance.Core.Annotations.Color(
            78,
            125,
            233,
            1
          ),
          StrokeThickness: 5,
          Opacity: 1,
        });

      // :::::Error TS2339:::::
      annot.setStartTime(0);
      annot.setEndTime(100);

      const video = this.viewerVideoInstance.getVideo();
      this.viewerInstance.Core.annotationManager.addAnnotations([annot]);

      video.updateAnnotationsToTime(0);
}

Thank you!!
Best Regards