ฉันเปิดเว็บแคมโดยใช้รหัส JavaScript ต่อไปนี้:
const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });
มีโค้ด JavaScript เพื่อหยุดหรือปิดเว็บแคมหรือไม่? ขอบคุณทุกคน
ฉันเปิดเว็บแคมโดยใช้รหัส JavaScript ต่อไปนี้:
const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });
มีโค้ด JavaScript เพื่อหยุดหรือปิดเว็บแคมหรือไม่? ขอบคุณทุกคน
คำตอบ:
แก้ไข
เนื่องจากคำตอบนี้ได้รับการโพสต์ไว้แล้วเบราว์เซอร์ 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 จะไม่ชอบ)
ใช้ฟังก์ชันเหล่านี้:
// 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();
}
});
}
stream.getTracks().forEach(track => { track.stop() })
ล่ะ stopAllTracks(stream)
หรือถ้าคุณกำลังทำจริงๆนี้มักจะเพียงพอที่จะปรับการจดชวเลขคุณสามารถกำหนดฟังก์ชั่นผู้ช่วยเช่น
ไม่ใช้stream.stop()
ก็เลิกใช้แล้ว
ใช้ stream.getTracks().forEach(track => track.stop())
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();
การเริ่มต้นวิดีโอเว็บแคมด้วยเบราว์เซอร์ต่างๆ
สำหรับ 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="";
ด้วยเหตุนี้ไฟเว็บแคมจะดับลงทุกครั้ง ...
สมมติว่าเรามีการสตรีมในแท็กวิดีโอและรหัสเป็นวิดีโอ - <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;
คุณสามารถสิ้นสุดสตรีมโดยตรงโดยใช้อ็อบเจ็กต์สตรีมที่ส่งคืนในตัวจัดการความสำเร็จเพื่อ getUserMedia เช่น
localMediaStream.stop()
video.src=""
หรือnull
จะลบแหล่งที่มาจากแท็กวิดีโอ มันจะไม่ปล่อยฮาร์ดแวร์
ลองใช้วิธีการด้านล่าง:
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();
หาก.stop()
เลิกใช้แล้วฉันไม่คิดว่าเราควรเพิ่มอีกครั้งเช่นยา @MuazKhan เป็นเหตุผลว่าทำไมสิ่งต่างๆถึงเลิกใช้งานและไม่ควรใช้อีกต่อไป เพียงแค่สร้างฟังก์ชันตัวช่วยแทน ... นี่คือเวอร์ชัน es6 เพิ่มเติม
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
for (let track of stream.getTracks()) { track.stop() }
stream.getTracks().forEach(function (track) { track.stop() })
ใน ES5 สิ่งนี้หลีกเลี่ยงการเปลี่ยนแปลงของfor of
เนื่องจากคุณต้องใช้แทร็กเพื่อปิดการสตรีมและคุณต้องมีstream
boject เพื่อไปยังแทร็กรหัสที่ฉันใช้ด้วยความช่วยเหลือของคำตอบของ 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();
});
แน่นอนว่านี่จะเป็นการปิดแทร็กวิดีโอที่ใช้งานอยู่ทั้งหมด หากคุณมีหลายรายการคุณควรเลือกตามนั้น
คุณต้องหยุดทุกแทร็ก (จากเว็บแคมไมโครโฟน):
localStream.getTracks().forEach(track => track.stop());
การใช้ .stop () บนสตรีมทำงานบน chrome เมื่อเชื่อมต่อผ่าน http ไม่ทำงานเมื่อใช้ ssl (https)
โปรดตรวจสอบสิ่งนี้: 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;
}
รหัสต่อไปนี้ใช้ได้ผลสำหรับฉัน:
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();
}
เริ่ม 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();
มีการอ้างอิงของรูปแบบสตรีม successHandle
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
stream.stop()
ไม่ได้กับ chromemediaRecorder.stop()
หยุดการบันทึกในขณะที่ไม่ได้หยุดสตรีมที่เบราว์เซอร์ให้ ดูในstackoverflow.com/questions/34715357/…