利用网页摄像头进行拍照的基础代码

Admin | 2016-4-23 9:10:48 | 被阅次数 | 7018

温馨提示!

如果未能解决您的问题，请点击搜索；登陆可复制文章，点击登陆

　　如今有了HTML5和各大浏览器的支持，想要在网页上调用摄像头直接拍照，已变得轻而易举。下面就为大家介绍如何在网页上调用摄像头然后进行拍照的教程。下面的代码的基础性代码，您学会后，再进行适当修改，就变成我们自己的代码了。

　　一、页面控件

　　页面控件非常简单，一个video对象，用来实时显示摄像头视频流的。两个按钮。最后一个是canvas画布，该画布是用来进行拍照的，即摄像头的视频流在播放的时候，如果进行拍照，那么，拍照到的图片就放在这个canvas对象里面。

　　二、先看例子

　　做好之后，你会看到上面的这些效果。当你打开页面的时候，会提示要共享摄像头，此时，应点击“共享选中的设备”，否则在网页中就看不到摄像头了。

　　看到的摄像头视频流，会显示在video对象里面，如下图。

　　当然，显示了视频流之后，我们要的结果就是要进行拍照，因此，如下图一样。

　　左边的video对象是摄像头，点击“拍照”之后，右边的canvas显示的是拍照到的图像。大体如下。

　　三、功能代码

　　<script>
    window.addEventListener("DOMContentLoaded", function() {
        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
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { // Firefox-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
    }, false);

　　function MyPhoto()
　　{
　　 var video = document.getElementById("video");
　　 var context = document.getElementById("canvas").getContext("2d");
　　 context.drawImage(document.getElementById("video"),0,0,320,240);
　　 var imgData=document.getElementById("canvas").toDataURL("image/png");
　　 var data64=imgData.substr(22);
　　}
　　function saveItAsImage()
　　{
　　 var myCanvas = document.getElementById("canvas");
　　 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
　　 window.location.href=image;
　　}
　　</script>