Unable to load webviewer-video and webviewer-audio scripts. Cannot read properties of undefined...

Technical Support WebViewer
,
1

WebViewer Version:

  • WebViewer = 10.12.0
  • WebViewer Video = 4.35.7
  • WebViewer Audio = 2.21.7

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

Please give a brief summary of your issue:
Error loading webviewer-video/main.js: Uncaught TypeError: Cannot read properties of undefined (reading ‘forwardRef’)

Error loading webviewer-audio/main.js: Uncaught TypeError: Cannot read properties of undefined (reading ‘useLayoutEffect’)

Please describe your issue and provide steps to reproduce it:
My main issue is I don’t really know how to get WebViewer Video running in vanilla Javascript, without React. The sample seems to be in react. I did find this sample on GitHub:
webviewer-video-sample/samples/compare/index.html at master · ApryseSDK/webviewer-video-sample (github.com)

I modified the HTML file to just this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyVideo.mp4</title>
    <script src='/static/node_modules/@pdftron/webviewer/webviewer.min.js' crossorigin></script>
    <script src='/static/node_modules/@pdftron/webviewer-video/dist/main.js' crossorigin></script>
    <script src='/static/node_modules/@pdftron/webviewer-audio/dist/main.js' crossorigin></script>
</head>
<body>
</body>
</html>

The contents of /static/lib/WebViewerVideo and /static/lib/WebViewerAudio are the node packages.

When I run that I get the following results:

Uncaught TypeError: Cannot read properties of undefined (reading 'forwardRef')
    at 3220 (main.js:2:195247)
    at o (main.js:2:906870)
    at 5656 (main.js:2:203202)
    at o (main.js:2:906870)
    at 5502 (main.js:2:888028)
    at o (main.js:2:906870)
    at 9468 (main.js:2:208529)
    at o (main.js:2:906870)
    at 9052 (main.js:2:897103)
    at o (main.js:2:906870)

(index)
Value
WebViewer Audio version	'2.21.7'
<a printout of the WebViewer Audio object>

main.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
    at Object.<anonymous> (main.js:6:16931)
    at Object.<anonymous> (main.js:6:17113)
    at n (main.js:1:552)
    at Module.<anonymous> (main.js:144:3568)
    at n (main.js:1:552)
    at Object.<anonymous> (main.js:6:19906)
    at n (main.js:1:552)
    at Object.<anonymous> (main.js:135:20973)
    at n (main.js:1:552)
    at main.js:1:1351

Is it possible to run WebViewer Video / Audio without React or do I need to make the app a React application?

2

Hello Steven,

Thank you for contacting WebViewer Forums.

Please take a look at our documentation page here on how to integrate WebViewer Video and Audio into your project: Video | Apryse Documentation

The following link shows how to integrate WebViewer without React which may be useful as well: Manually | Apryse Documentation

Regards,
Luke

3

Hi Luke,

The following link shows how to integrate WebViewer without React

I am able to use WebViewer without React. Just not Audio or Video.

Please take a look at our documentation page

All of the Video examples show React, or don’t show enough to determine if React is being used or not. All full examples in documentation, videos, and on GitHub use React. The errors in the first post show problems calling functions which are provided by the React framework. So my conclusion is that for Video (and probably Audio) you must be using React.