Vuejs Component stop open http connection

Question

I have a vuejs component that streams an MP4 stream over http but once the component is destroyed the http connection stays open and keeps downloading content until i refresh the browser.

When the component is mounted i set a <video> tags src equal to the MP4 url, which in turn automatically opens the http connection to the MP4 and it starts downloading and displaying video, which is expected and desired. BUT when the component is destroyed in the destroyed() hook, the connection stays open and keeps downloading video.

I have tried to use XMLHttpRequest() to create the connection but thats not working either. Is there a way to essentially kill the http connection upon destroying the vue component?

vue component:

<template>
    <video muted :src="mp4Src"></video>
</template>

export default {
  data() {
    return {
        mp4Src: null
    }
  },
  mounted() {
      this.mp4Src = 'http://my-stream.com/123.mp4';
  },
  destroyed() {
    // Setting this to this.mp4Src = ''; doesnt work
    console.log('How to destroying stream?');
  }
}

Any code examples?

AndrewShmig
– AndrewShmig

2019-01-17 18:04:33 +00:00
Commented Jan 17, 2019 at 18:04 — AndrewShmig
– AndrewShmig, Commented Jan 17, 2019 at 18:04
@AndrewShmig Editied

user616
– user616

2019-01-17 18:39:00 +00:00
Commented Jan 17, 2019 at 18:39 — user616
– user616, Commented Jan 17, 2019 at 18:39

user616 · Accepted Answer · 2019-01-22 15:25:02Z

1

So in my case i was actually able to resolve this in the beforeDestroy() hook after finding out that my component wasnt being destroyed. The reason it wasnt being destroyed was because the components were dynamically created in a v-if loop and the :key binding wasnt a completely unique key, so this caused the components to not be updated/destroyed correctly. Once i corrected this :key binding it started to work as expected.

answered Jan 22, 2019 at 15:25

user616

8615 gold badges20 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gugadev · Accepted Answer · 2019-01-17 18:57:36Z

0

Add a ref property to the video element:

<video ref="video" muted :src="mp4Src"></video>

Then, on destroyed hook get the MediaStream and stop it:

this
  .$refs
  .video
  .srcObject
  .getTracks()
  .forEach(track => track.stop());
this.$refs.video.srcObject = null;

answered Jan 17, 2019 at 18:57

gugadev

2021 silver badge8 bronze badges

1 Comment

user616 Over a year ago

.srcObject is null in both destroyed() and beforeDestroy() hooks.

tony19 · Accepted Answer · 2022-07-16 00:50:48Z

0

If you look at the documentation, you should be using beforeDestroy

At this stage the instance is still fully functional

Instead of Destroyed api:

Vue instance have been unbound

Edit:

Seems like vue has trouble closing that connection in the video element. But I think the problem might be with the video element self. I read around I found that people had issues in the past to properly unload a video element.

I have created a work around, seems to close connections. Codepen

beforeDestroy() {
   this.$refs["mp4"].load();
 }

edited Jul 16, 2022 at 0:50

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 17, 2019 at 18:59

Jeremy Walters

2,15219 silver badges30 bronze badges

4 Comments

AndrewShmig Over a year ago

@JeremyWalters, it's not the Vue problem, it's the browser problem. Have searched answers for similar questions - the only working solution is to completely remove HTML-element and than re-create it.

Jeremy Walters Over a year ago

@AndrewShmig Thanks for confirming. Suspected that. Have you looked at my Codepen, that seems to work? You welcome to edit your finding in the answer.

AndrewShmig Over a year ago

@JeremyWalters, yes, I have seen your codepen and had another question: how do we measure and check if the browser is still loading the video or not in background? Your solutions seems fine.

Jeremy Walters Over a year ago

Open devtools: Disabled Cache. Open Network Tab. Select Media Filter. When you play the video you would see it downloading. When you press the stop button it would stop downloading. Destroying it normally without ` this.$refs["mp4"].load();`, you will it still downloads.

Collectives™ on Stack Overflow

Vuejs Component stop open http connection

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related