webRtc麦克风摄像头检测

最近在做webRtc相关音视频项目,碰到了很多用户不知道自己设备是否被支持发起webRtc,所以特意总结相关实用方法;

HTML
html 复制代码
/*id方便一会把媒体流赋值过去, autoPlay: 自动播放 */
<audio id="devDetectionMicroRef" autoPlay></audio>
/*video建议知道宽高, autoPlay: 自动播放 */
<video id="devDetectionVideoRef" autoPlay width="640" height="480"></video>
检测麦克风相关
typescript 复制代码
/* 全局变量 */
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();
        });
    }
}
检测摄像头相关
typescript 复制代码
/*全局变量*/
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();
        });
    }
}
获取默认采集设备
typescript 复制代码
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;
    }
},
相关推荐
旧味清欢|几秒前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾18 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin29 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox42 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员