浏览器调用摄像头

2021-09-11 22:00:02 阅读：153 来源： 互联网

标签：调用浏览器 back height width video var navigator 摄像头

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        video {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }

        canvas {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <video autoplay id='video'></video>
    <canvas id="output"></canvas>
</body>

</html>
<script>
    //var video = document.getElementById('video')
    //var back = document.getElementById('output')
    var video = $("#video").get(0)
    var back = $("#output").get(0)
    //console.log(back,video)
    var backcontext = back.getContext('2d')
    function draw() {
        backcontext.drawImage(video, 0, 0, back.width, back.height)
        try {
            backcontext.drawImage(video, 0, 0, back.width, back.height)
        } catch (e) {
            if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                return setInterval(draw, 200)
            } else {
                throw e
            }
        }
        setTimeout(draw, 200)
    }
    var success = function (stream) {
        console.log('摄像头开启成功')
        try {
            videoUrl = window.URL.createObjectURL(stream)
            video.src = videoUrl
        } catch (error) {
            video.srcObject = stream
        }
        draw()
    }
    var error = (error) => {
        alert('调用失败')
    }
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
    navigator.getUserMedia({ video: true, audio: false }, success, error)
</script>

标签：调用,浏览器,back,height,width,video,var,navigator,摄像头
来源： https://blog.csdn.net/m0_49811662/article/details/120243862

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浏览器调用摄像头