如何通过网页调用摄像头进行拍照,并将照片上传到服务器上呢?其实非常简单,因为支持html5的浏览器已经帮我们实现了硬件的支持,我们直接看代码吧:

web前端代码:

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

 

<video  id="video" autoplay style="width: 480px;height: 320px"></video>

<div>

    <button id="capture">Camera</button> <button id="upimg">Upload</button>

</div>

<canvas id="canvas" width="480" height="320"></canvas>

 

<script>  

    var video = document.getElementById('video');

    var canvas = document.getElementById('canvas');

    var capture = document.getElementById('capture');

    var upimg = document.getElementById('upimg');

    var context = canvas.getContext('2d');

    function getUserMediaToPhoto(constraints,success,error) {

        if(navigator.mediaDevices.getUserMedia){

            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

        }else if (navigator.webkitGetUserMedia) {

            //webkit

            navigator.webkitGetUserMedia(constraints,success,error);

        }else if(navigator.mozGetUserMedia){

            //firefox

            navigator.mozGetUserMedia(constraints,success,error);

        }else if(navigator.getUserMedia){

            //old API

            navigator.getUserMedia(constraints,success,error);

        }

    }

    function success(stream){

        // srcObject

        if ("srcObject" in video) {

            video.srcObject = stream;

        } else {

            video.src = window.URL.createObjectURL(stream);

        }

        video.onloadedmetadata = function (e) {

            video.play();

            videoPlaying = true;

        };

    }

    function error(error) {

        console.log('Access to user media failed : ',error.name,error.message);

    }

    if(navigator.mediaDevices.getUserMedia ||

        navigator.webkitGetUserMedia ||

        navigator.mozGetUserMedia || navigator.getUserMedia){

        getUserMediaToPhoto({video:{width:480,height:320}},success,error);

    }else{

        alert('Your browser does not support access to user media devices');

    }

    capture.addEventListener('click',function() {

        // video to canvas

        context.drawImage(video,0,0,480,320);

    })

    upimg.addEventListener('click',function() {

        var imgData=document.getElementById("canvas").toDataURL("image/png");

        var data=imgData.substr(22);

        //debugger;

        console.log(data);

        $.post('upimg.api',{'img':data});

    })

</script>

webpascal脚本代码:

<?

   //log(input.img,'xxx');

   $f:=Base64toFile(urlencode(input.img,65001,false),formatdatetime('yyyyMMddhhmmsszzz".png"',now));

   if $f<>'' then begin

      'success,file:'$f;' <img src="'$f'">'

   end else begin

      'error.';

   end;

?>

效果图: