HTML调用PC摄像头代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML调用PC摄像头

作者: / 发布于2016/4/6/ 819

使用HTML５中的canvas和video技术实现调用PC摄像头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5调用电脑摄像头实例</title>
    <script type="text/javascript">   
        window.addEventListener("DOMContentLoaded", function() {  
            // Grab elements, create settings, etc.  
            var canvas = document.getElementById("canvas"),  
                context = canvas.getContext("2d"),  
                video = document.getElementById("video"),  
                videoObj = { "video": true },  
                errBack = function(error) {  
                    console.log("Video capture error: ", error.code);   
                };  
           
            // Put video listeners into place  
            if(navigator.getUserMedia) { // Standard  
                //alert("支持navigator.getUserMedia");
                navigator.getUserMedia(videoObj, function(stream) {  
                    video.src = stream;  
                    video.play();  
                }, errBack);  
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
                //alert("支持navigator.webkitGetUserMedia");
                navigator.webkitGetUserMedia(videoObj, function(stream){  
                    video.src = window.webkitURL.createObjectURL(stream);  
                    video.play();  
                }, errBack);  
            }  
            else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
                //alert("支持navigator.mozGetUserMedia");
                navigator.mozGetUserMedia(videoObj, function(stream){  
                    video.src = window.URL.createObjectURL(stream);  
                    video.play();  
                }, errBack);  
            }  
            // 触发拍照动作  
            document.getElementById("snap").addEventListener("click", function() {  
                context.drawImage(video, 0, 0, 640, 480);  
            }); 
 
        }, false);   
    </script>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap" >点击拍照</button>  
    <canvas id="canvas" width="640" height="480"></canvas>  
</body>
</html>

试试其它关键字

　摄像头　

同语言下

可能有用的

贡献的其它代码Label