h5調用攝像頭


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> #canvas, #video { float: left; margin-right: 10px; background: #fff;
            } .box { overflow: hidden; margin-bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <video id="video" width="400" height="400"></video>
            <canvas id="canvas"></canvas>
        </div>
        <button id="live">直播</button>
        <button id="snap">截圖</button>
        <script>
            var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = video.width; var height = video.height; canvas.width = width; canvas.height = height; function liveVideo() { var URL = window.URL || window.webkitURL; // 獲取到window.URL對象
 navigator.getUserMedia({ video: true }, function(stream) { video.src = URL.createObjectURL(stream); // 將獲取到的視頻流對象轉換為地址
 video.play(); // 播放
                    //點擊截圖 
 document.getElementById("snap").addEventListener('click', function() { ctx.drawImage(video, 0, 0, width, height); var url = canvas.toDataURL('image/png'); document.getElementById('download').href = url; }); }, function(error) { console.log(error.name || error); }); } document.getElementById("live").addEventListener('click', function() { liveVideo(); }); </script>
    </body>

</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM