Webviewer-video why get request repeat

Product:
Product Version:
@pdftron/webviewer": “^8.3.0”,
@pdftron/webviewer-audio": “^2.10.0”,
@pdftron/webviewer-video": “^4.19.0”,

(this source)

Please give a brief summary of your issue:
(Think of this as an email subject)

why resource get request is repeat

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

download this source and npm install and npm start.

chrome debug tool “network”.
video get request 3 times.

push play button and chrome debug tool “network”.
Look like not using cache

The above is an unclear point.
Thank you.

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

Hello,

Thanks for the bug report. What does your call to loadVideo look like? Are you using the ‘headers’ option? Documentation Module: @pdftron/webviewer-video

The chrome developer console in your screenshot shows a code file and line number. Could you click on those and send me screenshots of the code? That would help me track down where the issue is.

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

Hello,
Thank you for your reply.

Are you using the ‘headers’ option?
no.
This is the code published by your company.
image
webviewer-video-sample/App.js at master · PDFTron/webviewer-video-sample · GitHub

Could you click on those and send me screenshots of the code?
the code from developer tools.

Thank you for your reply.
Best Regards,

Thank you for your reply. Did clicking on main.js:2 or main.js:52 specify a line number? This would really help me out track this down. Thanks!

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Thank you for your reply.

I’m sorry.
I forgot the screenshot.

main.js:2

main.js:52

Best Regards,

Thanks for the images.

They are very long lines of code, so it is hard to tell where the issue. The code can be pretty printed by clicking the { } button on the very bottom left of the developer tools. If you could get me new images of the code being pretty-printed, I might be able to tell what is happening then. See the image below for the location of the button:

Screen Shot 2022-03-30 at 2.32.56 PM

I am curious, can you replicate the issue at this demo link? It is running the exact same sample: https://webviewer-video.web.app/

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Hi,
Thank you for your reply.

My chrome debug tools pritty is not work…

Attach the copied code.
main.js:2
mainjs2.zip (258.6 KB)
main.js:52
mainjs52.zip (98.6 KB)

and console log.

I am curious, can you replicate the issue at this demo link?
https://webviewer-video.web.app/

Yes, I can.
This Link too.

Thank you for your reply.
Best Regards,

Hello,

Thanks for the files. I was able to track down one of the extra requests and I am going to fix it. I am not sure about the third fetch. I will fix the first one and you can test again.

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Hello,

Thank you for your reply.

We are developing using this function.
Thank you for your support.

Best Regards,

Hello,

I have another question, are is the webviewer-video app running from your server or client side?

Could you also send me a picture of the Headers of the first 200 request for the video. I am interested in seeing the ‘General’ section and the ‘Request’ section.

If you are running this from your server and the link is public then you could just link to me and would be the easiest. Thanks!

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Hello,
Thank you for your replay.

I have another question, are is the webviewer-video app running from your server or client side?

It is running from client side.

Could you also send me a picture of the Headers of the first 200 request for the video. I am interested in seeing the ‘General’ section and the ‘Request’ section.
If you are running this from your server and the link is public then you could just link to me and would be the easiest. Thanks!

I created a webApp on azure and published it.
https://mango-water-0ee65d700.1.azurestaticapps.net/



Best Regards,

Hello,

Awesome thanks for the public link! I took a look and the result of the public link is more in line with what I expected. See screenshot:

The first fetch with status 200. Is a fetch head request for the metadata of the video and is pretty small. The are two other fetches for the full video. One is to generate the waveform and the other is to determine the real frame rate of the video file. Once this data is cached in local storage, then these fetches will no longer be needed.

We can potentially refactor these fetches to be only one fetch. But it proved to be a little bit complicated than I thought and will take some time.

As a temporary workaround you can disable one of the fetches by removing the ffprobe folder from the public folder of the webviewer-video-sample. This will disable getting the accurate frame count for the video but it won’t affect too many things. Alternatively, the fetch for the waveform can be disabled by disabling the audio capabilities. This can be done by not passing in the AudioComponent prop to initializeVideoViewer.

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Hello,
Thank you for the detailed explanation!!

One is to generate the waveform and the other is to determine the real frame rate of the video file. Once this data is cached in local storage, then these fetches will no longer be needed.

I understand that it works to get 61MB each for waveforms and video files.

We can potentially refactor these fetches to be only one fetch. But it proved to be a little bit complicated than I thought and will take some time.

All right.
As a side note, Product development uses only video components.

The remaining unclear point is that I got it again after pressing the play button.

Thank you for your replay.
Best Regards,

Hello,

If you are only using the video component then you can disable it by commenting out the property mentioned in my previous reply. That will save one fetch.

When you hit play, the browser handles the streaming of the video. Those requests are partial requests and we are not in control of them. There is no source code line in the initiator column. They originated from the browser.

It is strange that the time column values are so large. Is the video not playing well? 20 seconds for 500kb seems extreme. Maybe your internet connection is slow?

Best Regards,
Kristian Hein
Developer - WebViewer
PDFTron Systems, Inc.

Hello,

I understand.

Maybe your internet connection is slow?

Oh, My connection must have been as fast as a turtle when at this time. :’(

you can disable it by commenting out the property mentioned in my previous reply.

I’ll try this method on our website under development.
I’ll let you know if I have any questions.

Thank you for your response.
Best Regards,