หยุด / ปิดสตรีมเว็บแคมซึ่งเปิดโดย navigator.mediaDevices.getUserMedia [ปิด]


156

ฉันเปิดเว็บแคมโดยใช้รหัส JavaScript ต่อไปนี้:

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

มีโค้ด JavaScript เพื่อหยุดหรือปิดเว็บแคมหรือไม่? ขอบคุณทุกคน

คำตอบ:


225

แก้ไข

เนื่องจากคำตอบนี้ได้รับการโพสต์ไว้แล้วเบราว์เซอร์ API จึงเปลี่ยน .stop()ไม่สามารถใช้งานได้อีกต่อไปบนสตรีมที่ส่งผ่านไปยังการโทรกลับ นักพัฒนาจะต้องเข้าถึงแทร็กที่ประกอบเป็นสตรีม (เสียงหรือวิดีโอ) และหยุดทีละเพลง

ข้อมูลเพิ่มเติมที่นี่: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=th#stop-ended-and-active

ตัวอย่าง (จากลิงค์ด้านบน):

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

การรองรับเบราว์เซอร์อาจแตกต่างกัน

คำตอบเดิม

navigator.getUserMediaให้สตรีมในการติดต่อกลับสำเร็จคุณสามารถเรียก.stop()สตรีมนั้นเพื่อหยุดการบันทึก (อย่างน้อยใน Chrome ดูเหมือนว่า FF จะไม่ชอบ)


4
ฉันคิดว่าใช้stream.stop()ไม่ได้กับ chrome mediaRecorder.stop()หยุดการบันทึกในขณะที่ไม่ได้หยุดสตรีมที่เบราว์เซอร์ให้ ดูในstackoverflow.com/questions/34715357/…
Muthu

@Muntu ฉันคิดว่ามันขึ้นอยู่กับฉัน stream.stop () ใช้งานได้ (ใน chrome) เพราะฉันมีสตรีม webRTC ดังนั้นหากคุณบันทึกในเบราว์เซอร์ mediaRecorder.stop () จะใช้งานได้หรือไม่?
Johan Hoeksma

ใช่ แต่สิ่งนี้ทำให้เกิดปัญหาอื่น ฟังก์ชันนี้เพื่อหยุดการบันทึกควรเกิดขึ้นหลังจากปล่อยให้บันทึกไม่กี่วินาที / นาที คุณจะควบคุมสิ่งนี้ได้อย่างไร: เพื่อหยุดการบันทึกหลังจากเวลาเริ่มต้นของการบันทึก ขอบคุณ!
Emanuela Colta

4
สิ่งนี้จะหยุดสตรีม แต่ตัวบ่งชี้วิดีโอบน Chrome ยังคงทำงานอยู่จนกว่าจะโหลดซ้ำ มีวิธีลบออกด้วยหรือไม่?
Cybersupernova

@Cybersupernova คุณพบวิธีแก้ปัญหานี้หรือไม่? ฉันคิดว่าการรีเฟรชหน้าอาจใช้งานได้
samayo

63

ใช้ฟังก์ชันเหล่านี้:

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

3
ขอบคุณสำหรับสิ่งนี้. mediaStream.stop กำลังเลิกใช้งาน
Dan Brown

@ DanBrown ทางออกของคุณคืออะไร?
Webwoman

1
ฉันไม่แนะนำอย่างยิ่งที่จะแก้ไขต้นแบบของ API ดั้งเดิมเพื่อคืนค่าคุณลักษณะที่เลิกใช้งานอย่างเป็นทางการและนำออกจากเบราว์เซอร์ มันผิดปกติและมีแนวโน้มที่จะทำให้เกิดความสับสนในภายหลัง เมื่อคุณต้องการหยุดทุกแทร็กในสตรีมทำไมไม่ลองทำดูstream.getTracks().forEach(track => { track.stop() })ล่ะ stopAllTracks(stream)หรือถ้าคุณกำลังทำจริงๆนี้มักจะเพียงพอที่จะปรับการจดชวเลขคุณสามารถกำหนดฟังก์ชั่นผู้ช่วยเช่น
callum

48

ไม่ใช้stream.stop()ก็เลิกใช้แล้ว

การเลิกใช้งาน MediaStream

ใช้ stream.getTracks().forEach(track => track.stop())


1
ขอบคุณมากมันใช้งานได้ดีโดยสิ้นเชิงเนื่องจากค่าเสื่อมราคาทำให้ผู้คนสับสนว่าอันไหนใช้งานได้ แต่ในเดือนมีนาคม-2019 โซลูชันข้างต้นใช้งานได้ดีใน Chrome .. 🙂
PANKAJ NAROLA

จะกลับมาติดตามได้อย่างไร?
Neeraj Jain

12

FF, Chrome และ Opera ได้เริ่มเปิดเผยgetUserMediaผ่านnavigator.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();

9

การเริ่มต้นวิดีโอเว็บแคมด้วยเบราว์เซอร์ต่างๆ

สำหรับ Opera 12

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

สำหรับ Firefox Nightly 18.0.0

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

สำหรับ Chrome 22

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

การหยุดวิดีโอเว็บแคมด้วยเบราว์เซอร์ต่างๆ

สำหรับ Opera 12

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

สำหรับ Firefox Nightly 18.0.0

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

สำหรับ Chrome 22

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

ด้วยเหตุนี้ไฟเว็บแคมจะดับลงทุกครั้ง ...


11
เพียงแค่หยุดแสดงวิดีโอในแท็ก <video> แต่ไม่ได้หยุดกล้อง
G.Führ

8

สมมติว่าเรามีการสตรีมในแท็กวิดีโอและรหัสเป็นวิดีโอ - <video id="video"></video>จากนั้นเราควรมีรหัสต่อไปนี้ -

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

คุณสามารถสิ้นสุดสตรีมโดยตรงโดยใช้อ็อบเจ็กต์สตรีมที่ส่งคืนในตัวจัดการความสำเร็จเพื่อ getUserMedia เช่น

localMediaStream.stop()

video.src=""หรือnullจะลบแหล่งที่มาจากแท็กวิดีโอ มันจะไม่ปล่อยฮาร์ดแวร์


ฉันเห็น. ฉันจะลองในภายหลัง
Shih-En Chou

1
ไม่จริง ... บน firefox ไม่ทำงาน เอกสารระบุว่าวิธีนี้ใช้ไม่ได้ในทุกเบราว์เซอร์ ...
Sdra

วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน สิ่งนี้ทำได้
Scottmas

5

ลองใช้วิธีการด้านล่าง:

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

หาก.stop()เลิกใช้แล้วฉันไม่คิดว่าเราควรเพิ่มอีกครั้งเช่นยา @MuazKhan เป็นเหตุผลว่าทำไมสิ่งต่างๆถึงเลิกใช้งานและไม่ควรใช้อีกต่อไป เพียงแค่สร้างฟังก์ชันตัวช่วยแทน ... นี่คือเวอร์ชัน es6 เพิ่มเติม

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

1
for (let track of stream.getTracks()) { track.stop() }
แขก 271314

7
stream.getTracks().forEach(function (track) { track.stop() })ใน ES5 สิ่งนี้หลีกเลี่ยงการเปลี่ยนแปลงของfor of
Babel ที่ยืดเยื้อ

3

เนื่องจากคุณต้องใช้แทร็กเพื่อปิดการสตรีมและคุณต้องมีstreamboject เพื่อไปยังแทร็กรหัสที่ฉันใช้ด้วยความช่วยเหลือของคำตอบของ 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();
});

แน่นอนว่านี่จะเป็นการปิดแทร็กวิดีโอที่ใช้งานอยู่ทั้งหมด หากคุณมีหลายรายการคุณควรเลือกตามนั้น


2

คุณต้องหยุดทุกแทร็ก (จากเว็บแคมไมโครโฟน):

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

0

การใช้ .stop () บนสตรีมทำงานบน chrome เมื่อเชื่อมต่อผ่าน http ไม่ทำงานเมื่อใช้ ssl (https)


0

โปรดตรวจสอบสิ่งนี้: https://jsfiddle.net/wazb1jks/3/

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

หยุดการบันทึก

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

รหัสต่อไปนี้ใช้ได้ผลสำหรับฉัน:

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

เริ่มและหยุดกล้องเว็บแคม (อัพเดต 2020 React es6)

เริ่ม 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();
        });
      }
 }

หยุดเล่นกล้องเว็บหรือวิดีโอโดยทั่วไป

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

ฟังก์ชั่น Stop Web Camera ใช้งานได้แม้กับสตรีมวิดีโอ:

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

-1

มีการอ้างอิงของรูปแบบสตรีม 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
คำตอบนี้ก็เหมือนกับคำตอบอื่น ๆ ที่ได้รับไปแล้ว
Dan Dascalescu

ไม่ใช่โดยยิงยาว @DanDascalescu ดูในตัวอย่างนี้เขาแสดงให้เห็นอย่างชัดเจนถึงความสามารถในการจำฟังก์ชันแผนที่
charliebeck กับ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.