关于H5页面调取麦克风方法mediaDevices.getUserMedia

想做一个H5页面,在微信端打开,调取手机麦克风进行录音,因为一些原因 不打算用微信的JSSDK提供的音频接口,于是查到了mediaDevices.getUserMedia()方法,经过测试,说一下兼容性问题

<audio controls="controls"></audio>
<div class="recorderControl">录制</div>
<script>
    var promise = navigator.mediaDevices.getUserMedia({
        audio: true
     });
     promise.then(function(stream) {
        alert(stream)

        recorder.ondataavailable = function() {
          //收集媒体设备 获得到的 可以使用的 媒体流数据
          console.log(event.data)
        }
     });

     promise.catch(function(error) {
          alert(error.name)
          alert(error.message)
     });
</script>

1.ios手机:

    在http环境下,在微信端打开,不弹任何东西;

    在https环境下,在微信端打开,不弹任何东西

    在http环境下,在safari中打开,走catch方法,分别弹(NotAllowedError)(The request is not allowed by the user agent or the plateform in the current context,possibly because the user denied permission);

    在https环境下,在safari中打开,直接弹是否想要访问麦克风,说明调起麦克风成功

2.安卓手机: 

    在http环境下,在微信端打开,走catch方法,分别弹(NotSupportedError)(only secure origins are allowed(see: https://goo.gl/YOZkNV));

    在https环境下,在微信端打开,直接弹是否想要访问麦克风,说明调起麦克风成功

    在http环境下,在safari中打开,走catch方法,分别弹(PermissionDeniedError)();

    在https环境下,在safari中打开,直接弹是否想要访问麦克风,说明调起麦克风成功

猜你喜欢

转载自www.cnblogs.com/znLam/p/10139337.html