Comments (10)
Hmm. Without any errors it's hard to say what's wrong.. Maybe you should try integrating video.js only first: https://docs.videojs.com/tutorial-react.html
from videojs-wavesurfer.
@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.
from videojs-wavesurfer.
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...
from videojs-wavesurfer.
Unfortunately, videojs-wavesurfer has no effect.
What kind of error messages etc are you seeing?
from videojs-wavesurfer.
Thanks @thijstriemstra 😃 The strange thing is that no error message is received. Nothing.
Everything seems to be fine, but videojs-wavesurfer
is apparently ignored altogether.
from videojs-wavesurfer.
@thijstriemstra Makes sense :) I'm going to do that.
Hmm. Without any errors it's hard to say what's wrong.. Maybe you should try integrating video.js only first: https://docs.videojs.com/tutorial-react.html
from videojs-wavesurfer.
@thijstriemstra Integrating the video.js
only first, and then adding videojs-wavesurfer
plugin, leads to an error. I'm trying to debug it 🙂
mediacms-io/mediacms#403 (comment)
from videojs-wavesurfer.
@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.
I managed to log the versions by commit mediacms-io/mediacms@5535841:
Note
But I'm doing so by logging inside componentDidMount()
method of React component. Maybe that's a step towards debugging 😄
from videojs-wavesurfer.
Finally, audio wave is visualized just fine by commit mediacms-io/mediacms@e12367e
Note
The audio wave is visualized fine. However, it is not played for some reason. I guess debugging why the audio isn't played would be a whole new problem I will have to tackle. So, let's close this issue and open another one for it 😄
from videojs-wavesurfer.
Here is the continuation of this problem:
Basically, I have to register and initialize videojs-wavesurfer
plugin alongside another custom videojs plugin. It's a bit tricky for me 😄
from videojs-wavesurfer.
Related Issues (20)
- Wavesurfer.js region events HOT 3
- Cannot see soundwaves HOT 1
- getPeaks() returns an empty array HOT 6
- autoplay:false but safari recognize it as autoplay HOT 2
- change src (player.src()) bug that duplicate event fire HOT 1
- Using zoom on videojs-wavesurfer HOT 1
- Cannot read properties of undefined (reading 'params'), Vue3 HOT 11
- Register manually HOT 4
- VIDEOJS: ERROR: Error: HTTP error status: 0 HOT 6
- Big Play Button is not visible HOT 1
- Loading data peaks HOT 1
- Zoom method not found in player.wavesurfer().surfer HOT 2
- Fullscreen mode does not work with wavesurfer plugins
- Waveform on top of a background image
- File size 1.6g Browser crashes
- File size is around 5g, browser crashes, memory exceeds HOT 1
- Support for wavesurfer.js 7.0 or newer HOT 2
- Record button not clickable
- BUG video.min.js:12 VIDEOJS: ERROR: TypeError: Cannot read properties of undefined (reading 'backend') HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from videojs-wavesurfer.