我使用以下JavaScript代码打开了一个网络摄像头:

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

是否有任何JavaScript代码停止或关闭网络摄像头?


当前回答

因为你需要音轨来关闭流,你需要流对象来获得音轨,我在Muaz Khan的回答的帮助下使用的代码如下:

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

当然,这将关闭所有活动的视频轨道。如果你有多个,你应该选择相应的。

其他回答

您可以直接使用成功处理程序中返回给getUserMedia的流对象来结束流。如。

localMediaStream.stop()

视频。Src =""或null只会从视频标签中删除源。它不会释放硬件。

因为你需要音轨来关闭流,你需要流对象来获得音轨,我在Muaz Khan的回答的帮助下使用的代码如下:

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

当然,这将关闭所有活动的视频轨道。如果你有多个,你应该选择相应的。

如果.stop()已弃用,那么我认为我们不应该像@MuazKhan剂量那样重新添加它。这是一个原因,为什么东西被弃用,不应该再使用。只需创建一个辅助函数…这是一个更es6的版本

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

使用下列函数:

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

FF, Chrome和Opera已经开始通过导航器公开getUserMedia。mediaDevices现在是标准(可能会改变:)

在线演示

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