How to use inside a sophisticated react-js app

Description

I’m trying to use videojs-wavesurfer inside a sophisticated react-js app. I have studied and followed these docs:

https://collab-project.github.io/videojs-wavesurfer/#/usage https://collab-project.github.io/videojs-wavesurfer/#/react

But I have a hard time integrating videojs-wavesurfer into current code. I’m seeking help here. Can anybody help us figure out how videojs-wavesurfer should be used?

Steps to reproduce

The exact steps taken to do the integration are available here: https://github.com/mediacms-io/mediacms/pull/403

Results

Expected

I expected to see the videojs-wavesurfer effect while playing audio.

Actual

Unfortunately, videojs-wavesurfer has no effect.

Versions

"videojs-wavesurfer": "^3.8.0"

video.js": {
      "version": "7.12.3",

"wavesurfer.js": {
      "version": "5.2.0",

Browsers

Any browser.

OSes

Linux.

[Megidd]

Thanks @thijstriemstra 😄

For some reason, this error is thrown before I can do any logs:

Uncaught TypeError: Cannot read properties of undefined (reading ‘params’)

Simple demo

To better understand the error cause, I created this simple demo repository:

https://github.com/Megidd/videojs-wavesurfer-react

Based on this guide:

https://collab-project.github.io/videojs-wavesurfer/#/react

The simple demo code works fine:

So now, I will have to investigate further to figure out what I’m missing in the sophisticated React app…

[thijstriemstra]

@Megidd make sure the following code is working correctly, which prints all version numbers for the required javascript dependencies:

// print version information at startup
const version_info = 'Using video.js ' + videojs.VERSION +
    ' with videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
    ', wavesurfer.js ' + WaveSurfer.VERSION + ' and React ' + React.version;
videojs.log(version_info);

because it looks like you don’t have wavesurfer.js properly included.