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

2020/03/24
- 编程
0阅读

起因是之前刷到一篇文章扫脸登录网站：这可能是你能找到的最详细的 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>

开跑，欸。怎么图出不来？

看一下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>