`left-room` event is not being emitted or triggered on leave

[jarquafelmu]

Describe the bug Attaching a method to <vue-webrtc v-on="myMethod", "myMethod" method never gets called. v-on:joined-room works correctly.

I was doing your (incorrectly assumed you were the author of the linkedin video "Building a Video Chat App with Vue.js and Firebase" so I apologize for that, but i am still having the issue) linkedin/learning tutorial on making a video-chat app with vue and firebase, and I've been trying to figure out why my leave button click doesn't complete all the way. The video exits but the webRTCID never gets cleared. I believe that I have narrowed it down to the left-room event just not happening.

The joined-room event works correctly and is fired, for example after calling this.$refs.webrtc.join(). But after calling this.$refs.webrtc.leave() the video goes away but there's never a left-room event raised.

Additionally, when adding :enableLogs="true" to vue-webrtc, logs show for joining a room, but nothing shows when trying to leave a room

To Reproduce Steps to reproduce the behavior:

1. Isolate the sample project here
2. in App.vue add @left-room="logEvent" to vue-webrtc dom element.
3. add button to dom with @click="leaveRoom"
4. add to app:

   methods: {
   leaveRoom: function () {
     this.$refs.webrtc.leave();
   },
   logEvent: function (event) {
     console.log(`Event: ${event}`);
   },
   },

5. click leave button
6. See video exits, see no event in console.log

alternatively,

1. get the finished video-chat code as provided by the linked.in/learning video
2. run the server
3. create / login user
4. create room / click join
5. click leave
6. see that the podcast glyph is still green, indicating that webRTCID for the user was not cleared

Expected behavior I expected that left-room to be raised so that I could use it clean up the user on the client's side

Screenshots on joining, both the joining webrtc and got join event can both be seen in the console. however, on leaving only the leaving webrtc can be seen

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox / Chrome
• Version 82.02 / 86.0.4240.111
  • vue-webrtc 1.2.2

Additional context Add any other context about the problem here.

[ogarvey]

@jarquafelmu

I've just finished the same course, so I thought I'd see if could reproduce this but unfortunately it seems to work for me.

It looks like in your doAttendeeLeft() method, you're missing the final .doc(this.user.uid) and so the ref is actually to the collection and not the document. Adding that should resolve it 🤞

[westonsoftware]

Ahh, I think I see the confusion, left-room is only called when other people leave the room. Since you are calling .leave() on a button click, you can clean yourself up there in the click event. I haven't seen the course code, so don't know about that.

[kirschkern]

I have the same issue. "left-room" never gets send. However it seems to work correct in Chrome but not in Firefox. In Crome the event is beeing sent even when I leave the room. Probably the main issue comes from the used RTCMultiConnection lib.