单击屏幕录制功能的 "Stop Capture" 按钮时弹出窗口没有消失

Question

我遇到了弹出窗口的问题。当我 select“从桌面获取音频”并单击“开始录制”时，会出现另一个浏览器弹出窗口，询问我另一个决定（它是关于 select 屏幕和共享音频。我意识到如果我 select“共享音频”并单击蓝色按钮“共享”。它开始录制并出现一个模式：“网站正在共享屏幕和音频”但是如果我通过单击“停止捕获”按钮停止录制，“网站正在共享...”的模式仍然出现。有人可以帮助我或解释我是否可以在我单击“停止捕获”时消失该模式。谢谢。

codepen我留下了link，设计有点乱，但是有功能代码，谢谢

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

图片：1, 2, 3。我把工作流程写得很仔细了，谢谢。

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      valueMicAudioToggle: false,
      valueAudioToggle: false,
      valuestopBtn: true,
      valueCaptureBtn: false,
      valueStart: false,
      stream: "",
      rec: ""
    };
  },
  methods: {
    startBtn() {
      let blobs;
      let blob;

      const videoElement = document.getElementById("videoElement");
      const startBtn = document.getElementById("startBtn");

      const mergeAudioStreams = (desktopStream, voiceStream) => {
        const context = new AudioContext();
        const destination = context.createMediaStreamDestination();
        let hasDesktop = false;
        let hasVoice = false;
        if (desktopStream && desktopStream.getAudioTracks().length > 0) {
          // If you don't want to share Audio from the desktop it should still work with just the voice.
          const source1 = context.createMediaStreamSource(desktopStream);
          const desktopGain = context.createGain();
          desktopGain.gain.value = 0.7;
          source1.connect(desktopGain).connect(destination);
          hasDesktop = true;
        }

        if (voiceStream && voiceStream.getAudioTracks().length > 0) {
          const source2 = context.createMediaStreamSource(voiceStream);
          const voiceGain = context.createGain();
          voiceGain.gain.value = 0.7;
          source2.connect(voiceGain).connect(destination);
          hasVoice = true;
        }

        return hasDesktop || hasVoice
          ? destination.stream.getAudioTracks()
          : [];
      };

      let voiceStream;
      let desktopStream;
      // const captureBtn = document.getElementById("captureBtn");
      const download = document.getElementById("download");
      const audioToggle = document.getElementById("audioToggle");
      const micAudioToggle = document.getElementById("micAudioToggle");
      const self = this;
      const captureBtn = async () => {
        download.style.display = "none";
        const audio = audioToggle.checked || false;
        const mic = micAudioToggle.checked || false;

        desktopStream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
          audio: audio
        });

        if (mic === true) {
          voiceStream = await navigator.mediaDevices.getUserMedia({
            video: false,
            audio: mic
          });
        }

        const tracks = [
          ...desktopStream.getVideoTracks(),
          ...mergeAudioStreams(desktopStream, voiceStream)
        ];

        console.log("Tracks to add to stream", tracks);
        self.stream = new MediaStream(tracks);
        console.log("Stream", self.stream);
        videoElement.srcObject = self.stream;
        videoElement.muted = true;

        blobs = [];

        self.rec = new MediaRecorder(self.stream, {
          mimeType: "video/webm; codecs=vp8,opus"
        });
        self.rec.ondataavailable = (e) => blobs.push(e.data);
        self.rec.onstop = async () => {
          // blobs.push(MediaRecorder.requestData());
          blob = new Blob(blobs, { type: "video/webm" });
          const url = window.URL.createObjectURL(blob);
          download.href = url;
          download.download = "test.webm";
          download.style.display = "block";
        };
        this.valuestopBtn = false;
        this.valueStart = true;
        this.valueCaptureBtn = true;
        this.valueAudioToggle = true;
        this.valueMicAudioToggle = true;
        // this.stopBtn = true
        this.rec.start();
      };
      captureBtn();
    },

    // const startBtn = document.getElementById('startBtn')
    // const stopBtn = document.getElementById('stopBtn')
    stop() {
      const videoElement = document.getElementById("videoElement");

      // this.startBtn = true
      // this.stopBtn = false

      this.valueAudioToggle = false;
      this.valueMicAudioToggle = false;
      this.valueStart = false;
      // this.stopBtn = true
      this.valuestopBtn = true;
      // const self = this

      this.rec.stop();

      this.stream.getTracks().forEach((s) => s.stop());
      videoElement.srcObject = null;
      this.stream = null;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <div class="pointer video-list__container">

    <video id="videoElement" autoplay controls loop muted />
  </div>
  <div>
    <v-row>
      <v-col class="d-flex justify-center" cols="6">
        <v-checkbox id="audioToggle" :disabled="valueAudioToggle" label="Get Audio from Desktop" />


        <!-- <input
                        id="audioToggle"
                        :disabled="valueAudioToggle"
                        type="checkbox"
                      >

                      <label for="audioToggle">Capture Audio from Desktop</label> -->
      </v-col>
      <v-col class="d-flex justify-center" cols="6">
        <v-checkbox id="micAudioToggle" :disabled="valueMicAudioToggle" label="Get Audio from Microphone" />


        <!-- <input
                        id="micAudioToggle"
                        :disabled="valueMicAudioToggle"
                        type="checkbox"
                      >
                      <label for="micAudioToggle">Capture Audio from Microphone</label> -->
      </v-col>
    </v-row>

    <v-container>
      <v-row>
        <v-col class="d-flex justify-center" cols="12" />
        <v-btn id="download" class="accent-3 blue px-10" :disabled="buttonStateDownload">
          <a id="download1" align="center">Download</a>
        </v-btn>
        </v-col>
      </v-row>
    </v-container>
    <v-container>
      <v-row>
        <v-col class="d-flex justify-center" cols="12" />
        <v-col class="d-flex justify-center ml-0" cols="12">
          <p id="message" />
        </v-col>
      </v-row>
    </v-container>
  </div>

  <v-row>
    <v-col class="d-flex justify-center" cols="6">
      <v-btn id="startBtn" class="accent-3 blue" :disabled="valueStart" @click="startBtn">
        Start Recording
      </v-btn>
    </v-col>
    <v-col class="d-flex justify-center" cols="6">
      <v-btn id="stopBtn" class="accent-3 blue" :disabled="valuestopBtn" @click="stop">
        Stop Capture
      </v-btn>
    </v-col>
  </v-row>
</div>
</div>

Answer 1

在您的 stop 函数中，您停止了 this.stream 上的所有曲目。这包括桌面流中的视频轨道，但仅包括合并音频流中的音轨。来自桌面和麦克风的原始、单独的音轨不会停止，因此就浏览器而言，它们仍然处于活动状态。

这是停止原始流的一种方法：

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 = []
      // ...
    }
  },
})

单击屏幕录制功能的 "Stop Capture" 按钮时弹出窗口没有消失

Pop up doesn't disappear when I click "Stop Capture" button of screen recording functionality

javascript

vue.js

web-audio-api

vue-component

vuejs2