How to delete ivs-player correctly when using vue for single page application?

[coooo77]

Describe the bug
When using player for SPA(single page application) in vue, leaving and entering the route using player may cause player malfunction.

To Reproduce

1. clone code

git clone https://github.com/coooo77/ivs-player.git
cd ivs-player

2. Install dependencies and run app

npm install
npm run serve

3. open app in local environment http://localhost:8080/

4. enter back and forth between Home and About page

Expected behavior
ivs player can be delete correctly and works correctly when creating player.

Screenshots

_2021_06_21_14_26_58_264.mp4

Desktop (please complete the following information):

• OS: win10
• Browser Chrome
• Version v89

Additional context

1. Using delete method from ivs-player causes player malfunction, while using dispose method from videojs, it works but accumulating amazon-ivs-wasmworker.min.js and leading to memory leak (as shown above in Screenshots).
2. if we dont delete player, get waring from videojs and player fails to work:

VIDEOJS: WARN: Player "videojs-player" is already initialised. Options will not be applied.
Player is ready to use

[tonyjin]

Thank you for the detailed report! We'll take a look.

[alphacentauri82]

@coooo77 This is more an issue of appropriately handling the life cycle of a component in Vue.js than an IVS issue per se. Here’s a suggested solution:

<template>
  <div class="playerContainer">
    <video
      ref="videoPlayer"
      id="videojs-player"
      class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
      controls
      playsinline
    />
  </div>
</template>

<script>
import videojs from 'video.js'
import { registerIVSQualityPlugin, registerIVSTech } from 'amazon-ivs-player'

// @ts-ignore
import wasmBinaryPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'
import wasmWorkerPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js'

export default {
  name: 'IVS-Player',
  data () {
    return {
      player: null,
      videoOptions: {
        autoplay: true
      }
    }
  },
  mounted () {
    // register the tech with videojs
    registerIVSTech(videojs, {
      wasmWorker: this.createAbsolutePath(wasmWorkerPath, document.URL).toString(),
      wasmBinary: this.createAbsolutePath(wasmBinaryPath, document.URL).toString()
    })

    // register the quality plugin
    registerIVSQualityPlugin(videojs)

    // create the player with the appropriate types. We're using @types/video.js VideoJsPlayer, and intersecting our Player and Quality Plugin interface
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      console.log('Player is ready to use!')
      // enable the quality plugin

      const liveStreamUrl =
        'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'

      this.player.src(liveStreamUrl)
    })
    this.player.enableIVSQualityPlugin()

    // listen to IVS specific events
    const events = this.player.getIVSEvents()
    const ivsPlayer = this.player.getIVSPlayer()
    ivsPlayer.addEventListener(events.PlayerState.PLAYING, () => {
      console.log('IVS Player is playing')
    })
  },
  beforeDestroy () {
    
    if (this.player) {
      this.player.dispose()
    }
  },

  methods: {
    createAbsolutePath (assetPath) {
      console.log(document.URL)
      return new URL(assetPath, document.URL).toString()
    }
  }
}
</script>

<style scoped>
.playerContainer {
  width: 1060px;
  height: 480px;
  margin: auto;
}
</style>

I reproduced your issue and noticed you don’t destroy amazon-ivs & videojs at the same time. In the solution I propose, I embedded it all in a single variable called player.

[coooo77]

hi @alphacentauri82
i notice that your solution does't using AmazonIVS as techOrder in videoOptions (videojs uses Html5 as default tech), according to Basic VideoJS Tech demo, i add it to your solution and same problem reproduced (memory leak). Is it right way to implement IVS in videojs without setting techOrder?

By the way i get error from Vue using your solution.

I reproduced your issue and noticed you don’t destroy amazon-ivs & videojs at the same time

wondering that do i have to using both dispose and delete function to destroy ivsplayer?

beforeDestroy () {
    if (this.player) {
      // destroy  videojs
      this.player.dispose()

      // destroy  amazon-ivs
      const player = this.player.getIVSPlayer()
      player.delete()
    }
}

[alphacentauri82]

Here's a simple example with Vue and Video.js https://github.com/alphacentauri82/ivs-vue
You can also see a tutorial i wrote on ionic-vue for reference https://dev.to/superdiana/build-an-amazon-ivs-player-app-with-ionic-vue-1d20

[coooo77]

_2021_06_30_14_28_22_169.mp4

I add vue-router to your code in repo and still got same problem.

Code with problem

[pioug]

Bandlab.com is an SPA too and we had an issue with stopping the player then loading a different stream URL (reusing the same <video> element). We solved it by updating to v1.5.0 💦

[tonyjin]

Thanks for following up @pioug! Does upgrading to v1.5.0 fix your problem @coooo77?

[coooo77]

Sadly it doesn't fix the problem. I have updated it to the latest version 1.4.x by that time but got same problem.
I just using the code from the comment written on 30 Jun and update it to latest version. It reproduces same problem.

We made a SPA with videos in carousel, it keeps creating players while carousel rotates and results in memory leak finally.

[mohamadlotfy]

@tonyjin @coooo77 @alphacentauri82 @pioug
Any updates regarding this issue.
I'm facing this exact behavior in a nextJs project while trying to use Amazon IVS player with videoJs. Disposing the VideoJs player using dispose() does not delete the amazon-ivs-wasmworker.min.js from the memory.

VideoJs version 8.9.0
Amazon IVS player version 1.26.0

[davidskaarup]

We are also experiencing this issue. Any updates @tonyjin ?