浏览器调用摄像头

最新推荐文章于 2024-07-19 10:24:06 发布

m0_49811662

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量351

点赞数 1

文章标签： html5 html jquery

本文链接：https://blog.csdn.net/m0_49811662/article/details/120243862

版权

<!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>

m0_49811662

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器调用摄像头

<!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"&.
复制链接

扫一扫