最近在做webRtc相关音视频项目，碰到了很多用户不知道自己设备是否被支持发起webRtc，所以特意总结相关实用方法；
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;
}
}
// 根据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) {
// 获取音频默认采集设备id
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) {
// 获取视频默认采集设备id
let deviceId = tracks[i].getSettings().deviceId + '';
tracks[i].stop();
}
}).catch((error) => {
console.log('error', error);
})
}
break;
}
},
