Dừng / Đóng webcam được mở bởi navigator.getUserMedia

Tôi đã mở một webcam bằng cách sử dụng mã JavaScript sau: navigator.getUserMedia

Có mã JavaScript nào để dừng hoặc đóng webcam không? Cảm ơn mọi người.

BIÊN TẬP

Vì câu trả lời này đã được đăng ban đầu, API trình duyệt đã thay đổi. .stop()không còn khả dụng trên luồng được chuyển đến cuộc gọi lại. Nhà phát triển sẽ phải truy cập các bản nhạc tạo nên luồng (âm thanh hoặc video) và dừng từng bản nhạc riêng lẻ.

Thêm thông tin tại đây: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=vi#stop-ends-and-active

Ví dụ (từ liên kết ở trên):

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

Hỗ trợ trình duyệt có thể khác nhau.

Câu trả lời gốc

navigator.getUserMediacung cấp cho bạn một luồng trong cuộc gọi lại thành công, bạn có thể gọi .stop()luồng đó để dừng ghi âm (ít nhất là trong Chrome, có vẻ như FF không thích nó)

Sử dụng bất kỳ chức năng nào trong số này:

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

Lưu ý: Câu trả lời đã được cập nhật vào ngày: 06/09/2020

Đừng dùng stream.stop(), nó không dùng nữa

Khấu hao MediaStream

Sử dụng stream.getTracks().forEach(track => track.stop())

FF, Chrome và Opera đã bắt đầu hiển thị getUserMediathông qua navigator.mediaDevicestiêu chuẩn ngay bây giờ (Có thể thay đổi :)

bản demo trực tuyến

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

Bắt đầu webcam Video với các trình duyệt khác nhau

Dành cho Opera 12

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

Dành cho Firefox hàng đêm 18.0

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

Dành cho Chrome 22

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

Dừng video webcam với các trình duyệt khác nhau

Dành cho Opera 12

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

Dành cho Firefox hàng đêm 18.0

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

Dành cho Chrome 22

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

Với điều này, đèn webcam sẽ tắt mọi lúc ...

Giả sử chúng ta có phát trực tuyến trong thẻ video và id là video - <video id="video"></video>thì chúng ta nên có mã sau -

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;

Bạn có thể kết thúc luồng trực tiếp bằng cách sử dụng đối tượng luồng được trả về trong trình xử lý thành công cho getUserMedia. ví dụ

localMediaStream.stop()

video.src=""hoặc nullsẽ chỉ loại bỏ nguồn từ thẻ video. Nó sẽ không phát hành phần cứng.

Hãy thử phương pháp dưới đây:

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

Nếu .stop()không được chấp nhận thì tôi không nghĩ chúng ta nên thêm lại như liều @MuazKhan. Đó là một lý do tại sao mọi thứ bị phản đối và không nên được sử dụng nữa. Chỉ cần tạo một hàm trợ giúp thay thế ... Đây là phiên bản es6 hơn

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

Vì bạn cần các bản nhạc để đóng luồng và bạn cần stream nhạc để đến các bản nhạc, mã tôi đã sử dụng với sự trợ giúp của câu trả lời của Muaz Khan ở trên như sau:

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

Tất nhiên điều này sẽ đóng tất cả các bài hát video hoạt động. Nếu bạn có nhiều, bạn nên chọn cho phù hợp.

Bạn cần dừng tất cả các bản nhạc (từ webcam, micrô):

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

Sử dụng .stop () trên luồng hoạt động trên chrome khi được kết nối qua http. Nó không hoạt động khi sử dụng ssl (https).

Vui lòng kiểm tra điều này: https://jsfiddle.net/wazb1jks/3/

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

Dừng ghi âm

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

Các mã sau đây làm việc cho tôi:

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

Khởi động và dừng máy ảnh web, (Cập nhật 2020 React es6)

Khởi động máy ảnh Web

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

Dừng Web Camera hoặc phát lại video nói chung

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

Dừng chức năng Camera Web hoạt động ngay cả với các luồng video:

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

Có một tài liệu tham khảo về hình thức truyền phát thành công

var streamRef;

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

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