Web页面获取摄像头或麦克风

笔者的需求是在应用初始化时需要拿到摄像头 ，拿不到就放弃初始化应用。很多实时音视频都会有这个问题，百度一波后，自己写了一个方法供大家参考。

//检测是否支持媒体采集，设置媒体权限
window.addEventListener("DOMContentLoaded", function() {
    if (navigator.mediaDevices === undefined) {
        alert('未检测到可用的媒体设备！');
        return;
    }

    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;

    if (navigator.getUserMedia) {
            navigator.getUserMedia({
                audio: true,
                video: true
            },
            function(stream) {
                console.log(`同意开启，关闭摄像头占用`);

                //播放流可以通过document.getElementById('#video').srcObject=stream  播放
                //----------------------------------这里写同意摄像头以后需要做的业务逻辑-----------------------
                

                //这是关闭流的方法----------------start
                let tracks = stream.getTracks();
                for(var i = 0; i < tracks.length; i ++){
                    tracks[i].stop();
                }
                //这是关闭流的方法----------------end

            },
            function(err) {
                alert('请在浏览器设置中允许访问麦克风和摄像头！');
            }
        );
    } else {
        alert('您的设备暂不支持媒体采集！');
    }

}, false);

补充：API调用请查阅https://w3c.github.io/mediacapture-main/getusermedia.html#mediadevices-interface-extensions

如果想做摄像头、麦克风、或者扬声器的切换，可以参考上面的链接。

例如获取指定摄像头流，可以这样写

navigator.getUserMedia({
                video: {deviceId:设备ID}
         })

其他也类似