Annotation Thumbnail in Video

Technical Support WebViewer
, ,
1

WebViewer Version: 10.0.0
WebViewer-Video Version: 4.34.0

Do you have an issue with a specific file(s)? Video Files
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server? Docker
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework?
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
(Think of this as an email subject)
Annotation Thumbnails in videos show black square only

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
When adding an annotation to video, the annotation contains a thumbnail window but its always black.
Can we disable that thumbnail or how can we make it show content?

Please provide a link to a minimal sample where the issue is reproducible:
https://recordit.co/FHNpPqHjqD

2

Hi Johanne
Is there any sample video you could share? It seems on my end, it works with my sample video

Best
Jack

3

Here is the sample video i have loaded to the webviewer-video

4

Hi
I have used this sample to try to reproduce your issue. But it looks good on my end.

Screenshot 2023-05-05 at 12.01.42 AM
Screenshot 2023-05-05 at 12.01.42 AM1909×874 130 KB

Could you please recheck this sample with the video you have sent to me?

5

I have uploaded my HAR file:
har.zip (3.7 MB)

When I installed the webviewer-video, it was required to install react and react-dom to have a successful build. Initially version 16.14.0 was installed, I tried to set it at v18.2.0 but I think there are some not compatible with the v18. Can I know what version is the correct stable version for webviewer-video?

6

Hi Johanne,
After double check, the most stable version we use is react 16.13.1

Best,
Jack

7

@jhou Thanks! I applied that version but still no thumbnail. Maybe there are events I need to listen to or I need to load?

Any findings on my HAR file?

8

Also I could not select the video / audio mode in the upper left menu, even though I have audio in the video.
I could not see the spectrum.

I was thinking I was missing out the react.useEffect in the webviewer but It throws me invalid hook, I think the react was loaded double but I’m not sure. I’m still looking ways to show the thumbnails…

Do you have any other sample in setting up the webviewer-video in an angular 15 component?

image
image1607×794 88.5 KB

9

Hi Johanne
Forget to mention, I cannot open your Har file on my end. Is that okie you could give me a zip file?
Can you check out this sample in your end? GitHub - PDFTron/webviewer-video-sample: Annotate videos frame-by-frame collaboratively
Please let me know if you still have the same problem.

Best,
Jack

10

tenant.7z (2.9 MB)

I have attached tenant.7z … it is a compressed file of my har file.
I have already tried the video sample but when I tried adding the useEffect, I was having an invalid hook error. I removed it and the error went away.

Also I was trying to load the main-with-react but I was having error:

image
image997×130 13 KB

11

Hi Johanne,

is there a particular reason you are trying to load the main-with-react version? I would recommend just importing like

import { initializeVideoViewer } from '@pdftron/webviewer-video';

especially if you already have react installed in your package.

Best,
Will

12

Any findings on the HAR file?
Was still not able to show the thumbnails in the annotation panel

13

@WillW

when I tried adding an annotation in the demo, it was getting the serialized thumbnail with just the data:image/png call.

image
image1914×711 109 KB

When we post an annotation to our service: It looks like this:

image

image

Do I have to serialize the image and include in the xfdfData or somewhere else?

14

I’m looking at the code on how we’re adding the annotations to the notes panel. You may have to set the start time for the annotations. In the XFDF it would be under custom data trn-video-start-time.

This might be a bit hard to debug like this, so we’ll see if this helps and maybe we can get in a call otherwise.

Best,
Will

15

I have added an annotation somewhere between the video and here is the xfdf data:
It includes the start time and end time. No thumbnail was generated still.
Yes maybe we should be in a call if I’m still looking at the wrong direction.

<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<xfdf xmlns=\"http://ns.adobe.com/xfdf/\"
      xml:space=\"preserve\">\n<fields/>\n<add>
		<square page=\"0\"
		        rect=\"282.220,474.030,393.490,582.810\"
		        color=\"#E44234\"
		        flags=\"print\"
		        name=\"af88e54c-e80b-a1f4-8dff-3697cfedffe1\"
		        title=\"1\"
		        subject=\"Rectangle\"
		        date=\"D:20230517143715+08'00'\"
		        creationdate=\"D:20230517143714+08'00'\">
			<trn-custom-data bytes=\"{&quot;trn-video-start-time&quot;:&quot;3.268887&quot;,&quot;trn-video-end-time&quot;:&quot;3.268887&quot;}\"/>
		</square>
	</add>\n<modify/>\n<delete/>\n</xfdf>

image
image1918×805 59 KB

16

@WillW

This seems to have been resolved by adding wss://*.amazonaws.com to CORS Policy on our config

17

Hi Johanne,

I’ll note this down in case this issue comes up again for another customer. Glad to see that it’s figured out though, was thinking there was an issue somewhere else.

Thanks!
Will

18

@WillW would like to ask if there is a documentation that requires us to connect to amazonaws.com to make some functions work?