Interrompi / chiudi webcam che viene aperta da navigator.getUserMedia


Risposte:


199

MODIFICARE

Da quando questa risposta è stata originariamente pubblicata, l'API del browser è cambiata. .stop()non è più disponibile sullo stream che viene passato al callback. Lo sviluppatore dovrà accedere alle tracce che compongono il flusso (audio o video) e fermarle singolarmente.

Maggiori informazioni qui: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=it#stop-ended-and-active

Esempio (dal link sopra):

stream.getTracks().forEach(function(track) {
  track.stop();
});

Il supporto del browser potrebbe essere diverso.

Risposta originale

navigator.getUserMediati fornisce uno stream nel callback di successo, puoi chiamare .stop()quello stream per interrompere la registrazione (almeno in Chrome, sembra che a FF non piaccia)


2
Penso che non stream.stop()funzioni per Chrome, mediaRecorder.stop()interrompe la registrazione, mentre non interrompe lo streaming fornito dal browser. Puoi dare un'occhiata a questo stackoverflow.com/questions/34715357/…
Muthu,

@Muntu, penso che dipenda, per me stream.stop () funziona (in Chrome). Perché ho un flusso webRTC. Quindi se stai registrando nel browser mediaRecorder.stop () funzionerà?
Johan Hoeksma,

sì, ma questo solleva un altro problema. Questa funzione per arrestare la registrazione dovrebbe verificarsi dopo aver concesso alcuni secondi / minuti di registrazione. Come puoi controllarlo: per fermarlo dopo un tempo predefinito di registrazione? Grazie!
Emanuela Colta,

1
Questo interrompe i flussi ma l'indicatore video su Chrome rimane ancora attivo fino al ricaricamento. C'è un modo per rimuovere anche quello?
Cybersupernova,

@Cybersupernova Hai trovato una soluzione per questo? Penso che l'aggiornamento della pagina potrebbe funzionare
samayo,

59

Utilizzare una di queste funzioni:

// stop both mic and camera
function stopBothVideoAndAudio(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live') {
            track.stop();
        }
    });
}

// stop only camera
function stopVideoOnly(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live' && track.kind === 'video') {
            track.stop();
        }
    });
}

// stop only mic
function stopAudioOnly(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live' && track.kind === 'audio') {
            track.stop();
        }
    });
}

Nota: la risposta è stata aggiornata il: 06/09/2020


2
Grazie per questo. mediaStream.stop è deprecato.
Dan Brown,

@DanBrown qual è la tua soluzione?
Webwoman

Scoraggerei fortemente la modifica del prototipo di un'API nativa per ripristinare una funzionalità che è stata ufficialmente deprecata e rimossa dal browser. È irregolare e può causare confusione in seguito. Quando devi interrompere tutte le tracce in uno stream, perché non farlo stream.getTracks().forEach(track => { track.stop() })? O se lo stai facendo abbastanza spesso da giustificare una scorciatoia, puoi sempre definire una funzione di supporto come stopAllTracks(stream).
callum

45

Non usare stream.stop(), è deprecato

Deprecazioni MediaStream

Uso stream.getTracks().forEach(track => track.stop())


1
Grazie mille, sta funzionando perfettamente, a causa del deprezzamento sta confondendo le persone con ciò che sta funzionando, ma a partire da marzo 2019 la soluzione sopra sta funzionando benissimo in cromo .. 🙂
PANKAJ NAROLA

10

FF, Chrome e Opera ha iniziato esponendo getUserMediavia navigator.mediaDevicescome standard ora (potrebbe cambiare :)

demo online

navigator.mediaDevices.getUserMedia({audio:true,video:true})
    .then(stream => {
        window.localStream = stream;
    })
    .catch( (err) =>{
        console.log(err);
    });
// later you can do below
// stop both video and audio
localStream.getTracks().forEach( (track) => {
track.stop();
});
// stop only audio
localStream.getAudioTracks()[0].stop();
// stop only video
localStream.getVideoTracks()[0].stop();

9

Avvio del video della webcam con diversi browser

Per Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Per Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

Per Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

Interruzione del video della webcam con diversi browser

Per Opera 12

video.pause();
video.src=null;

Per Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

Per Chrome 22

video.pause();
video.src="";

Con questo la luce della webcam si spegne ogni volta ...


10
Questo interrompe solo la visualizzazione del video nel tag <video>, ma non ferma la videocamera.
G. Führ,

8

Supponiamo di avere lo streaming nel tag video e l'id sia video - <video id="video"></video>quindi dovremmo avere il seguente codice -

var videoEl = document.getElementById('video');
// now get the steam 
stream = videoEl.srcObject;
// now get all tracks
tracks = stream.getTracks();
// now close each track by having forEach loop
tracks.forEach(function(track) {
   // stopping every track
   track.stop();
});
// assign null to srcObject of video
videoEl.srcObject = null;

6

È possibile terminare lo stream direttamente utilizzando l'oggetto stream restituito nel gestore dei successi per getUserMedia. per esempio

localMediaStream.stop()

video.src=""o nullrimuoverebbe semplicemente la sorgente dal tag video. Non rilascerà l'hardware.


Vedo. Ci proverò più tardi.
Shih-En Chou,

1
Non proprio ... Su Firefox non funziona. I documenti menzionano che questo metodo non è implementato in tutti i browser ...
Sdra,

La soluzione di cui sopra non ha funzionato per me. Questo l'ha fatto.
Scottmas,

5

Prova il metodo seguente:

var mediaStream = null;
    navigator.getUserMedia(
        {
            audio: true,
            video: true
        },
        function (stream) {
            mediaStream = stream;
            mediaStream.stop = function () {
                this.getAudioTracks().forEach(function (track) {
                    track.stop();
                });
                this.getVideoTracks().forEach(function (track) { //in case... :)
                    track.stop();
                });
            };
            /*
             * Rest of your code.....
             * */
        });

    /*
    * somewhere insdie your code you call
    * */
    mediaStream.stop();

4

Se .stop()è deprecato, non penso che dovremmo aggiungerlo di nuovo come la dose di @MuazKhan. È un motivo per cui le cose diventano deprecate e non dovrebbero più essere utilizzate. Basta creare una funzione di supporto invece ... Ecco una versione più es6

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}

1
for (let track of stream.getTracks()) { track.stop() }
ospite271314

7
stream.getTracks().forEach(function (track) { track.stop() })in ES5, questo evita lunghe trasformazioni di babele difor of
fregante,

3

Poiché hai bisogno delle tracce per chiudere lo streaming e hai bisogno del streamboject per raggiungere le tracce, il codice che ho usato con l'aiuto della risposta di Muaz Khan sopra è il seguente:

if (navigator.getUserMedia) {
    navigator.getUserMedia(constraints, function (stream) {
        videoEl.src = stream;
        videoEl.play();
        document.getElementById('close').addEventListener('click', function () {
            stopStream(stream);
        });
    }, errBack);

function stopStream(stream) {
console.log('stop called');
stream.getVideoTracks().forEach(function (track) {
    track.stop();
});

Naturalmente questo chiuderà tutte le tracce video attive. Se ne hai diversi, devi selezionare di conseguenza.


2

Devi interrompere tutti i brani (da webcam, microfono):

localStream.getTracks().forEach(track => track.stop());

0

L'uso di .stop () sullo stream funziona su Chrome quando è collegato tramite http. Non funziona quando si utilizza ssl (https).


0

Si prega di controllare questo: https://jsfiddle.net/wazb1jks/3/

navigator.getUserMedia(mediaConstraints, function(stream) {
    window.streamReference = stream;
}, onMediaError);

Ferma la registrazione

function stopStream() {
    if (!window.streamReference) return;

    window.streamReference.getAudioTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference.getVideoTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference = null;
}


0

Il seguente codice ha funzionato per me:

public vidOff() {

      let stream = this.video.nativeElement.srcObject;
      let tracks = stream.getTracks();

      tracks.forEach(function (track) {
          track.stop();
      });

      this.video.nativeElement.srcObject = null;
      this.video.nativeElement.stop();
  }

0

Avvia e ferma web camera, (Update 2020 React es6)

Avvia Web Camera

stopWebCamera =()=>

       //Start Web Came
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        //use WebCam
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
          this.localStream = stream;
          this.video.srcObject = stream;
          this.video.play();
        });
      }
 }

Interrompere la riproduzione della videocamera o del video in generale

stopVideo =()=>
{
        this.video.pause();
        this.video.src = "";
        this.video.srcObject = null;

         // As per new API stop all streams
        if (this.localStream)
          this.localStream.getTracks().forEach(track => track.stop());
}

La funzione Stop Web Camera funziona anche con flussi video:

  this.video.src = this.state.videoToTest;
  this.video.play();

-1

Avere un riferimento di stream da successHandle

var streamRef;

var handleVideo = function (stream) {
    streamRef = stream;
}

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});

1
Questa risposta è essenzialmente la stessa di molte altre che sono già state fornite.
Dan Dascalescu,

Non da molto tempo @DanDascalescu. Vedi, in questo esempio dimostra chiaramente la sua capacità di richiamare la funzione mappa.
Charlie con il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.