The annoying pop-up refuses to vanish even after clicking on the "Stop Capture" button during screen recording

Question

The annoying pop-up refuses to vanish even after clicking on the "Stop Capture" button during screen recording

I'm dealing with an issue regarding popups. Whenever I choose "get audio from desktop" and click on "Start Recording", another browser popup appears, prompting me to make another decision (this involves selecting the screen and sharing audio). I've noticed that if I select "Sharing Audio" and click the blue "share" button, the recording begins and a modal appears stating "website is sharing the screen and audio". However, when I stop the recording by clicking the "Stop Capture" button, the modal saying "Website is sharing..." continues to appear. Can someone please assist me or clarify if it's possible to make that modal disappear when I click "Stop Capture". Thank you.

Here is the link to the codepen, the design may be a bit messy but it contains the code for the functionality. Thank you.

https://codepen.io/gian1599/pen/QWpabWK?editors=1011

Images: 1, 2, 3. I have provided detailed information about the workflow, thank you.

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      valueMicAudioToggle: false,
      valueAudioToggle: false,
      valuestopBtn: true,
      valueCaptureBtn: false,
      valueStart: false,
      stream: "",
      rec: ""
    };
  },
  methods: {
    startBtn() {
      // Code for starting the recording
    },

    stop() {
      // Code for stopping the recording
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d7d4c4e1938fd9">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07717262736e617e4735297f">[email protected]</a>/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36404353425f504f7604184e">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

// HTML code

javascript vue.js vuejs2 vue-component web-audio-api

Answer 1

Answer №1

When you call the stop function, it stops all the tracks on this.stream. This action includes stopping the video tracks from the desktop stream, but only the audio tracks from the merged audio stream. The original audio tracks from the desktop and microphone remain active, unbeknownst to the browser.

To properly stop the original streams, you can follow this approach:

new Vue({
  // ...
  data () {
    return {
      // ...
      individualAudioStreams: [],
      // ...
    }
  },
  methods: {
    startBtn() {
      // ...

      const mergeAudioStreams = (desktopStream, voiceStream) => {
        // ...
        if (desktopStream && desktopStream.getAudioTracks().length > 0) {
          // ...
          this.individualAudioStreams.push(desktopStream)
        }
        if (voiceStream && voiceStream.getAudioTracks().length > 0) {
          // ...
          this.individualAudioStreams.push(voiceStream)
        }
        // ...
      }

      // ...
    },

    stop() {
      // ...
      this.individualAudioStreams.forEach(s => s.getTracks().forEach(t => t.stop()))
      this.individualAudioStreams = []
      // ...
    }
  },
})

Answer 2

When you call the stop function, it stops all the tracks on this.stream. This action includes stopping the video tracks from the desktop stream, but only the audio tracks from the merged audio stream. The original audio tracks from the desktop and microphone remain active, unbeknownst to the browser.

To properly stop the original streams, you can follow this approach:

new Vue({
  // ...
  data () {
    return {
      // ...
      individualAudioStreams: [],
      // ...
    }
  },
  methods: {
    startBtn() {
      // ...

      const mergeAudioStreams = (desktopStream, voiceStream) => {
        // ...
        if (desktopStream && desktopStream.getAudioTracks().length > 0) {
          // ...
          this.individualAudioStreams.push(desktopStream)
        }
        if (voiceStream && voiceStream.getAudioTracks().length > 0) {
          // ...
          this.individualAudioStreams.push(voiceStream)
        }
        // ...
      }

      // ...
    },

    stop() {
      // ...
      this.individualAudioStreams.forEach(s => s.getTracks().forEach(t => t.stop()))
      this.individualAudioStreams = []
      // ...
    }
  },
})

The annoying pop-up refuses to vanish even after clicking on the "Stop Capture" button during screen recording

Answer №1

Similar questions

Using Angular and Jade to pass an array from a controller to script tags

Verify modifications prior to navigating in React or Next.js

There seems to be an issue with FastAPI not sending back cookies to the React

After refreshing, Angular route using html5Mode leads to a 'Page Not Found' error page

Utilizing JQuery Template to Invoke JavaScript Functions

Tips for preventing redundant code in various functions using Vue.js

Jest testing in a Vue child component is failing due to the presence of lodash

Combining the first name, last name, and code in Javascript

Discovering the Week by week commencement and conclusion dates utilizing angularjs

Fetching data using JSONRequest sample code

The challenge of handling scopes in Angular-seed

Creating a Custom Alert Box in Javascript with Image Alignment

Is there a way to trigger a Tab key click event while typing in a text field?

Struggling to understand why I'm having trouble connecting my AJAX handler within WordPress

Creating Unique Numbers for Every <a> Element

Searching for a different method in JavaScript that can add items without duplication, as the prependTo function tends to insert multiple items

Can you provide an explanation for what the line "const { Nuxt, Builder } = require('nuxt')" is doing in this

A guide on showcasing real-time data with Angular's service feature

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

Designing a pop-up window for fetching data using AngularJS