zoukankan html css js c++ java

HTML调用PC摄像头【申明：来源于网络】

HTML调用PC摄像头【申明：来源于网络】 ———- 地址：http://www.oschina.net/code/snippet_2440934_55195

<!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><br>
    <button id="snap" >点击拍照</button>  <br>
    <canvas id="canvas" width="640" height="480"></canvas>  
</body>
</html>

这里写图片描述

辛勤的耕种，才可以得到丰收！

查看全文

相关阅读:
PAT乙级-1037. 在霍格沃茨找零钱（20）
PAT乙级-1041. 考试座位号(15)
PAT乙级-1047. 编程团体赛(20)
css3 实现背景图片显示
 块级元素与行内元素（内联元素）的区别和联系
 JS变量
 导航条菜单的制作滑动缓慢
 HTML中Id和Name的区别
 全面理解Javascript中Function对象的属性和方法
 理解盒子模型

原文地址：https://www.cnblogs.com/yearHeaven/p/6741329.html