HTML
/*id方便一会把媒体流赋值过去, autoPlay: 自动播放 */
<audio id="devDetectionMicroRef" autoPlay></audio>
/*video建议知道宽高, autoPlay: 自动播放 */
<video id="devDetectionVideoRef" autoPlay width="640" height="480"></video>
检测麦克风相关
const audioSteam = {
current: null
}
handleMicrophoneDetection(){
navigator.mediaDevices.getUserMedia({audio: true})
.then(stream => {
audioSteam.current = stream;
handleStreamGetMicroName();
handleAudioPlay();
})
.catch(error => {
let errorMessage = error + '';
if (errorMessage.includes('Permission denied')) {
errorMessage = '请开启麦克风权限';
} else if (errorMessage.includes('Requested device not found')) {
errorMessage = '请检测麦克风是否插入';
};
console.log('error', errorMessage)
});
},
handleAudioPlay(){
const stream = audioSteam.current;
const elm: HTMLVideoElement | any = document.getElementById('devDetectionMicroRef');
if (elm) {
elm.srcObject = stream;
}
}
handleStreamGetMicroName(){
if (audioSteam.current) {
const audioTrack = audioSteam.current.getAudioTracks()[0];
console.log(audioTrack.label);
}
}
stopAudioSteam() {
if (audioSteam.current) {
audioSteam.current.getTracks().forEach((sender: any) => {
sender.stop();
});
}
}
检测摄像头相关
const videoSteam = {
current: null
}
handleCameraDetection() {
navigator.mediaDevices.getUserMedia({video: true})
.then((stream) => {
videoSteam.current = stream;
handleStreamGetCameraName();
handleVideoPlay();
}).catch((error) => {
let errorMessage = error + '';
if (errorMessage.includes('Permission denied')) {
errorMessage = '请开启摄像头权限';
} else if (errorMessage.includes('Requested device not found')) {
errorMessage = '请检测摄像头是否插入';
};
console.log('error', errorMessage);
})
}
handleVideoPlay() {
const stream = videoSteam.current;
const elm: HTMLVideoElement | any = document.getElementById('devDetectionVideoRef');
if (elm) {
elm.srcObject = stream;
}
}
handleStreamGetCameraName() {
if (videoSteam.current) {
const videoTrack = videoSteam.current.getVideoTracks()[0];
setGatherCameraName(videoTrack.label);
}
}
stopVideoSteam() {
if (videoSteam.current) {
videoSteam.current.getTracks().forEach((sender: any) => {
sender.stop();
});
}
}
获取默认采集设备
handleDefaultDeviceId(type: number) {
switch(type) {
case 1:
{
navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
const tracks = stream.getTracks();
for (let i in tracks) {
let deviceId = tracks[i].getSettings().deviceId + '';
tracks[i].stop();
}
}).catch((error) => {
console.log('error', error);
})
}
break;
case 2:
{
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
const tracks = stream.getTracks();
for (let i in tracks) {
let deviceId = tracks[i].getSettings().deviceId + '';
tracks[i].stop();
}
}).catch((error) => {
console.log('error', error);
})
}
break;
}
},