Cannot read properties of undefined (reading 'params'), Vue3

[yu0307]

Description

When using wavesurfer plugin, it seems the surfer never gets initiated which result in params not found within the wavesurfermiddleware.

Steps to reproduce

Vue component file

<template>
    <div id="media-canvas" class="relative">
        <video class="video-js vjs-default-skin" id="media-player" playsinline>
            <source v-for="media of medias" :key="media.media_path" :src="media.media_path">
        </video> 
    </div>
</template>
<script>
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import wavesurfer from 'videojs-wavesurfer';
export default {
    props: ['medias'],
    data() {
        return {
            player      : null,
            playing     : false,
            mediaConfig: {//https://github.com/videojs/video.js/blob/master/docs/guides/options.md
                controls  : true,
                bigPlayButton: false,
                loop      : false,
                autoplay  : false,
                fluid     : true,
                controlBar: {
                    deviceButton    : false,
                    pipToggle       : false,
                    recordToggle    : false,
                    fullscreenToggle: false
                },
                plugins   : {
                    wavesurfer: { //https://wavesurfer-js.org/docs/options.html
                        backend            : 'WebAudio',
                        displayMilliseconds: true,
                        debug              : true,
                        waveColor          : '#c2ebff',
                        progressColor      : 'black',
                        cursorWidth        : 2,
                        hideScrollbar      : true
                    }
                }
            }
        }
    },
    mounted() {
        toast.loading();
        this.initMedia().then(()=>toast.hide_loading());
    },
    beforeUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    },
    methods: {
        initMedia() {
            return new Promise((resolve, reject) => {
                try {
                    if (this.player) {
                        this.player.dispose();
                    }
                    this.player = videojs('#media-player', this.mediaConfig);
                    this.player.on('deviceReady', () => {
                        this.loading = false;
                        this.ready   = true;
                    });

                    this.player.on('error', (element, error) => {
                        this.mediaError.push(error);
                    });

                    resolve();
                } catch (e) {
                    reject(e);
                }
            });
        }
    }
}
</script>

Results

Expected

Please describe what you expected to see. wavesufer should display

Actual

when using the component and loading a webm file via the medias prop.getting error The error is coming from videojs.wavesurfer.js -> WavesurferMiddleware()-> var backend=this.player.wavesurfer().surfer.params.backend;

Seems wavesurfer().sufer is undefined.

Error output

Uncaught TypeError: Cannot read properties of undefined (reading 'params')
    at Object.setSource (videojs.wavesurfer.js?66e3:144:1)
    at setSourceHelper (video.es.js?31bb:10175:1)
    at setSourceHelper (video.es.js?31bb:10193:1)
    at Player.eval (video.es.js?31bb:9931:1)
    at eval (video.es.js?31bb:5140:1)

Versions

videojs/wavesurfer

video.js:7.17 videojs-wavesurfer:3.8.0 wavesurfer.js:6.0.1

Browsers

chrome

OSes

Linux

[thijstriemstra]

Can you check if you can access the wavesurfer version nr, e.g:

// create player
var player = videojs('myAudio', options, function() {
    // print version information at startup
    var msg = 'Using video.js '+ videojs.VERSION +
        ' with videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
        ' and wavesurfer.js ' + WaveSurfer.VERSION;
    videojs.log(msg);

    // load file
    player.src({src: 'media/hal.wav', type: 'audio/wav'});
});

[yu0307]

Can you check if you can access the wavesurfer version nr, e.g:

// create player
var player = videojs('myAudio', options, function() {
    // print version information at startup
    var msg = 'Using video.js '+ videojs.VERSION +
        ' with videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
        ' and wavesurfer.js ' + WaveSurfer.VERSION;
    videojs.log(msg);

    // load file
    player.src({src: 'media/hal.wav', type: 'audio/wav'});
});

No sir, the execution never reaches the callback. it's like wavesurfer was never initialized correctly.

[thijstriemstra]

Have you tried https://collab-project.github.io/videojs-wavesurfer/#/vue? Please check if that works for you.

[yu0307]

Have you tried https://collab-project.github.io/videojs-wavesurfer/#/vue? Please check if that works for you.

Yes, I have copied everything from that snippet and tried that, but not really working. I felt like the snippet isn't working for Vue3.

[thijstriemstra]

Yes, I have copied everything from that snippet and tried that

Instead of copying the snippet, follow all instructions and you'll have a working vue project. From there you can figure out the issue in your project.

I felt like the snippet isn't working for Vue3.

The @vue/cli package is using vue3 afaik.

[yu0307]

Yes, I have copied everything from that snippet and tried that

Instead of copying the snippet, follow all instructions and you'll have a working vue project. From there you can figure out the issue in your project.

I felt like the snippet isn't working for Vue3.

The @vue/cli package is using vue3 afaik.

Sorry, I mean I followed the instructions from there, and I walked through my code and even matching character cases and trying to get a working model, but still with no success. Were you able to replicate the error as well?

[thijstriemstra]

Were you able to replicate the error as well?

I'll give it a try at some point.

[tntsoft]

@thijstriemstra any news on the above? I'm also encountering the same issue.

[thijstriemstra]

Looks like vue had a new major release (v5). I followed the guide and ended up with errors while running npm run serve. I'll take a look at the problem later.

 ERROR  Failed to compile with 5 errors                                                                      3:43:14 PM

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'video.js/dist/video-js.css' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'video.js' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'wavesurfer.js' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'videojs-wavesurfer/dist/videojs.wavesurfer.js' in '/private/tmp/videojs-wavesurfer-app/src/components'

[thijstriemstra]

I fixed the issue in the guide, please try again.

[wangchihai]

@thijstriemstra it doesn't work,

VIDEOJS: Using video.js 8.3.0 with videojs-wavesurfer 3.9.0, wavesurfer.js 6.6.4 and vue.js 3.3.4