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

最新推荐文章于 2024-06-07 14:23:34 发布

yearHeaven

最新推荐文章于 2024-06-07 14:23:34 发布

阅读量2.2k

点赞数

分类专栏： HTML 文章标签：摄像头

本文链接：https://blog.csdn.net/yearHeaven/article/details/53838505

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>

这里写图片描述

yearHeaven

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML调用PC摄像头【申明：来源于网络】

HTML调用PC摄像头【申明：来源于网络】 ———- 地址：http://www.oschina.net/code/snippet_2440934_55195 HTML5调用电脑摄像头实例
复制链接

扫一扫

专栏目录