Zatrzymaj / Zamknij strumień kamery, który jest otwierany przez nawigatora.mediaDevices.getUserMedia [zamknięte]

Zamknięte . To pytanie musi być bardziej skoncentrowane . Obecnie nie przyjmuje odpowiedzi.

Chcesz poprawić to pytanie? Update the question so it edytując ten post.

Zamknięte 4 miesiące temu .

Popraw to pytanie

Otworzyłem kamerę internetową, używając następującego kodu JavaScript:

const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });

Czy jest jakiś kod JavaScript, aby zatrzymać lub zamknąć kamerę internetową? Dziękuję wszystkim.

Author: jameshfisher, 2012-07-25

16 answers

EDIT

Odkąd ta odpowiedź została pierwotnie opublikowana, interfejs API przeglądarki uległ zmianie. {[1] } nie jest już dostępna w strumieniu przekazywanym do wywołania zwrotnego. Programista będzie musiał uzyskać dostęp do ścieżek, które tworzą strumień (audio lub wideo) i zatrzymać każdą z nich indywidualnie.

Więcej informacji tutaj: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Przykład (z linku powyżej):

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

Obsługa przeglądarki może się różnić.

Oryginalna ODPOWIEDŹ

navigator.getUserMedia pozwala na wywołanie streamu w wywołaniu zwrotnym, możesz zadzwonić .stop() na tym strumieniu, aby zatrzymać nagrywanie (przynajmniej w Chrome, wydaje się, że FF tego nie lubi)

 234
Author: andrei,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-23 17:44:40

Użyj którejkolwiek z tych funkcji:

// 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();
        }
    });
}
 69
Author: Muaz Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-09 11:36:09

Nie używaj stream.stop(), jest przestarzały

MediaStream

Użyj stream.getTracks().forEach(track => track.stop())

 49
Author: sol404,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 19:00:14

FF, Chrome i Opera zaczęły wystawiać getUserMedia Poprzez navigator.mediaDevices już standardowo (może się zmienić:)

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();
 13
Author: Sasi Varunan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-06 09:57:05

Załóżmy, że mamy streaming w tagach video i id to video - {[1] } wtedy powinniśmy mieć następujący kod -

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;
 10
Author: Veshraj Joshi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-04 20:35:52

Uruchamianie wideo z kamery internetowej w różnych przeglądarkach

Dla Opery 12

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

Dla Firefoksa Nightly 18.0

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

Dla Chrome 22

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

Zatrzymywanie wideo z kamery internetowej w różnych przeglądarkach

Dla Opery 12

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

Dla Firefoksa Nightly 18.0

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

Dla Chrome 22

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

Z tym światło kamery gasną za każdym razem...

 9
Author: Alain Saurat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-08 18:20:48

Możesz zakończyć strumień bezpośrednio za pomocą obiektu stream zwróconego w programie obsługi sukcesu, aby uzyskaćusermedia. np.

localMediaStream.stop()

video.src="" lub null po prostu usunie źródło z tagu wideo. Nie wyda sprzętu.

 6
Author: Bhavin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-09 09:19:16

Wypróbuj metodę poniżej:

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();
 5
Author: imal hasaranga perera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-19 09:39:40

Jeśli {[1] } jest przestarzały, to chyba nie powinniśmy dodawać go ponownie jak @ muazkhan. Jest to powód, dla którego rzeczy stają się przestarzałe i nie powinny być już używane. Zamiast tego wystarczy utworzyć funkcję pomocnika... Oto bardziej es6 wersja

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}
 4
Author: Endless,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-01 09:18:27

Ponieważ potrzebujesz utworów, aby zamknąć streaming, i potrzebujesz stream boject, aby dostać się do utworów, kod, którego użyłem przy pomocy powyższej odpowiedzi Muaz Khana jest następujący:

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();
});

Oczywiście spowoduje to zamknięcie wszystkich aktywnych ścieżek wideo. Jeśli masz wiele, należy wybrać odpowiednio.

 3
Author: mcy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-16 12:53:29

Musisz zatrzymać wszystkie utwory (z kamery internetowej, mikrofonu):

localStream.getTracks().forEach(track => track.stop());
 2
Author: TopReseller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-15 11:57:38

Używanie .stop () na strumieniu działa na chrome po połączeniu przez http. Nie działa przy użyciu protokołu ssl (https).

 0
Author: ACEGL,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-10 11:01:20

Proszę sprawdzić to: https://jsfiddle.net/wazb1jks/3/

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

Zatrzymaj Nagrywanie

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
Author: Akshay Italiya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-15 10:05:17

Następujący kod zadziałał dla mnie:

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
Author: TechDo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-17 10:27:13

[[3]}Uruchom i zatrzymaj kamerę internetową, (aktualizacja 2020 React es6)

Start Kamera Internetowa

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();
        });
      }
 }

Stop Web Camera lub odtwarzanie wideo w ogóle

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());
}

Funkcja Stop Web Camera działa nawet ze strumieniami wideo:

  this.video.src = this.state.videoToTest;
  this.video.play();
 0
Author: Hitesh Sahu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-24 08:48:46

Mieć odniesienie do stream formularza successHandle

var streamRef;

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

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});
 -2
Author: Pankaj Anupam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-09 12:27:12