javascript - Stoppa/Stänga webbkameraström som öppnats av navigator.mediaDevices.getUserMedia

Jag öppnade en webbkamera genom att använda följande JavaScript-kod:

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

Finns det någon JavaScript-kod för att stoppa eller stänga webbkamera?

Svar #1

Eftersom detta svar ursprungligen publicerades har webbläsarens API förändrats. .stop() är inte längre tillgängligt på den ström som skickas till callbacken. Utvecklaren måste få åtkomst till de spår som utgör strömmen (ljud eller video) och stoppa varje spår individuellt.

Mer information här: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Exempel (från länken ovan):

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

Webbläsarstöd kan variera.

Tidigare gav navigator.getUserMedia dig en ström i succécallbacken, du kunde kalla .stop() på den strömmen för att stoppa inspelningen (åtminstone i Chrome, verkar som FF inte gillar det)

Svar #2

Använd någon av dessa funktioner:

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

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

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

Svar #3

Använd inte stream.stop(), det är föråldrat

MediaStream-föråldringar

Använd stream.getTracks().forEach(track => track.stop())

Svar #4

FF, Chrome och Opera har börjat exponera getUserMedia via navigator.mediaDevices som standard nu (Kan ändras :)

online-demonstration

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

Svar #5

Antag att vi har strömmande i video-taggen och id är video - <video id="video"></video> då bör vi ha följande 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;

Svar #6

Starta webbkameravideo med olika webbläsare

För Opera 12

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

För Firefox Nightly 18.0

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

För Chrome 22

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

Stoppa webbkameravideo med olika webbläsare