浏览器唤起相机失败问题

最新推荐文章于 2024-01-11 16:46:41 发布

beata_zhang

最新推荐文章于 2024-01-11 16:46:41 发布

阅读量1.7k

点赞数 1

分类专栏： web前端学习

本文链接：https://blog.csdn.net/qq_30834535/article/details/114164683

版权

web前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

背景：浏览器是否可以唤起相机，依赖于接口的返回值，在此条件下，偶现唤起失败的情况，报的错误为file chooser dialog can only be shown with a user activation

原因：因为vivo浏览器安全机制原因，用户长时间操作无响应，浏览器会移除此次行为，写了个demo，发现只有情况1是可以唤起的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
</head>
<body>
    <button style="width: 200px;height:80px;margin-top: 100px;" id="button1">延迟 1s</button><br>
    <button style="width: 200px;height:80px;margin-top: 100px;" id="button2">延迟 2s</button><br>
    <button style="width: 200px;height:80px;margin-top: 100px;" id="button3">轮询后第二次点击无效</button><br>
    <input  style="width: 200px;height:80px;margin-top: 100px;" id="input" type="file" accept="video/*" capture="camcorder">
    <script>
        var num = 1;
        document.getElementById('button1').onclick = function(){ setTimeout(() => { document.getElementById('input').click() }, 1000) }
        document.getElementById('button2').onclick = function(){ setTimeout(() => { document.getElementById('input').click() }, 2000) }
        document.getElementById('button3').onclick = function(){ 
            var timer = setInterval(() => { 
            alert(num)
            if(num == 2) {
                document.getElementById('input').click() 
                clearInterval(timer)
            }
            num++;
        }, 500) }
    </script>
</body>
</html>

解决方案：尽量改交互吧，不依赖接口，或接口后置掉，防止类型情况发生