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;
    }
},
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5