navigator.mediaDevices.getUserMedia()出现NotReadableError Could not start audio source错误的解决办法
in 前端 with 0 comment

navigator.mediaDevices.getUserMedia()出现NotReadableError Could not start audio source错误的解决办法

in 前端 with 0 comment

起因是之前刷到一篇文章 扫脸登录网站:这可能是你能找到的最详细的 WebAuthn 中文文章(和 wordpress 插件),想起之前做的搜图库感觉可以应用到这个登录技术上。

于是随手写了个调用摄像头的demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <div class="face-scan-box">
        <video id="face-stream" autoplay="autoplay"></video>
    </div>
    <a href="javascript:void(0)" id="scanBtn" class="btn btn-normal btn-primary">扫描</a>
    <script>
        let faceStream = document.querySelector('video')
        document.getElementById('scanBtn').addEventListener('click', function () {
            scanFace()
        })
        
        function scanFace() {
            let constraints = {
                video: true,
                audio: false
            };
            let promise = window.navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                faceStream.srcObject = MediaStream;
                faceStream.onloadedmetadata = function(e) {
                    faceStream.play();
                };
            }).catch(function (PermissionDeniedError) {
                if(PermissionDeniedError.toString() === 'NotFoundError: Requested device not found'){
                    console.log('找不到摄像头')
                } else {
                    console.log(PermissionDeniedError.toString());
                }
            })
        }
    </script>
</body>
</html>

开跑,欸。怎么图出不来?

微信图片_20200324190435.png

看一下console的错误:

NotReadableError Could not start audio source。

是代码的问题吗?

最初的想法是这份代码是不是太旧了,在79到80的版本中chrome放弃兼容了?

查了一下MDN发现这个方法是最新的,navigator.getUserMedia()才是不建议使用的那个。

又莫非最新的方法chrome还没更新进去? 换一份老接口的代码跑一下试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jello</title>
    <style>
        video{
            width: 30%;
            height: auto;
        }
    </style>
</head>
<body>
<video autoplay controls></video>
<button>Open Cam</button>
<script>
    function getCam(){
        window.navigator.mediaDevices.getUserMedia({video:true}).then((stream)=>{
            document.querySelector("video").srcObject = stream;
        }).catch(err=> console.log(err.name))
    }
    // getCam();
    document.querySelector("button").addEventListener("click", getCam);
</script>
</body>
</html>

运行之后发现,还是不行。

是chrome浏览器的问题?

于是我打开了Edge尝试运行代码,嗯?居然成功了?

批注 2020-03-24 172835.png

难道真的会是chrome么?想着就打开了win10虚拟机,里面也装着一个相同版本号(80.0.3987.149)的谷歌浏览器。

于是尝试在虚拟机中跑:(虚拟机可以通过 状态栏-虚拟机-可移动设备 挂载使用本机的摄像头)

批注 2020-03-24 173903.png

虚拟机中的chrome是能正常使用摄像头的啊,奇怪了。

微信图片_20200324190604.png

是系统升级之后导致的问题?

两者只有win10的版本号有差:虚拟机中的是1903而本机是1909。但要直接重装系统这是万万不行的啊。

找到问题了

后来在google上刷到一篇名为chrome 摄像头打不开的文章,其中有人提到了麦克风也有隐私设置

之后发现果然不知道啥时候把麦克风的权限关闭了,打开之后一切正常。

微信截图_20200324192512.png

Comments are closed.