getUserMedia 如何关闭摄像头

关于这个问题我搜了一些答案,经过自身验证,以下为正确关闭方法

一、先说如何调用

 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
const media = (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
const mediaStreamTrack;
 if (media) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then((stream) => {
      // 视频播放
        const video = document.querySelector('video');
        video.srcObject = stream;
        video.play();
        // 视频分析
       mediaStreamTrack = stream;
      });
  }

二 、 关闭摄像头

查到网上的答案是这个localMediaStream.stop();
但是出现报错提示:
Uncaught TypeError: localMediaStream.stop is not a function

于是我多console了俩条;

console.log(this.mediaStreamTrack);
console.log(this.mediaStreamTrack.getTracks());

发现console.log(this.mediaStreamTrack.getTracks());
的结果是:

0: MediaStreamTrack {
	 kind: "audio", 
	id: "{e5e82aa8-c3d0-2b48-8339-510b27543492}", 
	label: "Internal Microphone",
	muted: false
		​​
	onended: null
	​​
	onmute: null
	​​
	onunmute: null
	​​
	readyState: "ended"
	}1: MediaStreamTrack{
	enabled: true
	​​
	id: "{02e73efe-ffed-9643-98a2-61532d9dc263}"
	​​
	kind: "video"
	​​
	label: "FaceTime高清摄像头"
	​​
	muted: false
	​​
	onended: null
	​​
	onmute: null
	​​
	onunmute: null
	​​
	readyState: "ended"
}
​​

遇到问题多console也许会有不一样的结果

所以最后用以下俩个stop,成功关闭。

 if (mediaStreamTrack) {
 	console.log(this.mediaStreamTrack);
    console.log(this.mediaStreamTrack.getTracks());
    this.mediaStreamTrack.getTracks()[0].stop();
    this.mediaStreamTrack.getTracks()[1].stop();
  }
发布了25 篇原创文章 · 获赞 7 · 访问量 9209

猜你喜欢

转载自blog.csdn.net/Beth__hui/article/details/103744215