广州奕联网站开发,研究生院 网站 建设,网站开发和合同,合肥市公司网站建设最近在做webRtc相关音视频项目#xff0c;碰到了很多用户不知道自己设备是否被支持发起webRtc#xff0c;所以特意总结相关实用方法#xff1b; HTML
/*id方便一会把媒体流赋值过去, autoPlay: 自动播放 */
audio iddevDetectionMicroRef autoPlay… 最近在做webRtc相关音视频项目碰到了很多用户不知道自己设备是否被支持发起webRtc所以特意总结相关实用方法 HTML
/*id方便一会把媒体流赋值过去, autoPlay: 自动播放 */
audio iddevDetectionMicroRef autoPlay/audio
/*video建议知道宽高, autoPlay: 自动播放 */
video iddevDetectionVideoRef autoPlay width640 height480/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) {// 获取音频默认采集设备idlet 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) {// 获取视频默认采集设备idlet deviceId tracks[i].getSettings().deviceId ;tracks[i].stop();}}).catch((error) {console.log(error, error);})}break;}
},
