客户端调用摄像头-系列配置

需求:需要在客户端验证人脸登录

　　所以需要做出一个功能调用客户端摄像头来进行拍照上传服务器验证人脸（1）

首先需要页面JS调用摄像头

function faceLoad(){
    //根据不同浏览器调用不同核心
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    function success(stream) {
        //兼容webkit内核浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        try {video.srcObject = stream;} 
        catch (error) {video.src = window.URL.createObjectURL(stream);}
        video.play();
    }

    function error(error) {
        return false;
        alert(‘访问用户摄像头失败‘);/*${error.name}, ${error.message}*/
    }

    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
　　//调用画图接口
    function getnavigator() {
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //获取video宽高
            var v_height,v_width;
            var myvObj = document.getElementById("video");
            myvObj.addEventListener("loadedmetadata", function () {
                v_height = this.videoHeight;
                v_width =this.videoWidth;
                $(‘#canvas‘).attr(‘width‘,v_width);
                $(‘#canvas‘).attr(‘height‘,v_height);
            });
            //调用用户媒体设备, 访问摄像头、
            getUserMedia({video:{width:320,height:240}},success,error);
        } else {
            alert(‘不支持访问用户媒体‘);
        }
    }
    getnavigator();
　　　　//显示视频
    function showVideo(){
        $(‘#results‘).find(‘img‘).remove();
        $(‘#canvas‘).css(‘display‘,‘none‘);
        $(‘#video‘).css(‘display‘,‘block‘);
        $(‘#signshowVideo‘).css(‘display‘,‘none‘);
        getnavigator();
    }
　　//显示图片
    function showpicture(picture) {
        if($(‘#results‘).find(‘img‘).attr(‘src‘)){
            $(‘#results‘).find(‘img‘).attr(‘src‘,picture);
        }else{
            $(‘#results‘).append(‘<img src="‘+picture+‘"/>‘);
        }
        $(‘#video‘).css(‘display‘,‘none‘);
        $(‘#canvas‘).css(‘display‘,‘none‘);
        $(‘#signshowVideo‘).show();
        $(‘.picture‘).val(1);
    }
　　//关闭图片
    function hidepicture() {
        $(‘#results‘).find(‘img‘).remove();
        getnavigator();
        $(‘#video‘).css(‘display‘,‘block‘);
        $(‘#canvas‘).css(‘display‘,‘none‘);
        $(‘#signshowVideo‘).css(‘display‘,‘none‘);
    }
　　
    $(‘#signshowVideo‘).click(function () {
        showVideo();
    });
　　//按钮点击不同功能
    document.getElementById(‘capture‘).addEventListener(‘click‘, function () {
        var video = document.getElementById(‘video‘);
        var canvas = document.getElementById(‘canvas‘);
        var context = canvas.getContext(‘2d‘).drawImage(video, 0, 0,canvas.width,canvas.height);
        //获取网页中的canvas对象
        var mycans=$(‘#canvas‘)[0];
        //调用convertCanvasToImage函数将canvas转化为img形式
        var img=convertCanvasToImage(mycans);
        if(img.src){
            $(‘#results‘).find(‘#image_code‘).val(img.src);
            // $(‘#capture‘).text(‘修改‘);
            $(‘#video‘).css(‘display‘,‘none‘);
            $(‘#canvas‘).css(‘display‘,‘block‘);
            $(‘#signshowVideo‘).show();
        }
    })

}

html

           <div class="ibox-content img-content">
                <form class="form-horizontal m-t" id="upPictureForm" method="post" action="">
                    <div class="form-group " id="input-picture">
                        <div class="img-box" id="results">
                            <input name="image_code" id="image_code" type="hidden" value=""/>
                            <canvas id="canvas" width="300" height="260"></canvas>
                        </div>
                    </div>
                    <div class="form-group">
                        <video id="video"  >
                        </video>
                    </div>
                    <div class="form-group">
                        <div class="input-but">
                            <button type="button" class="layui-btn" id="signshowVideo">激活摄像头</button>
                            <button type="button" class="layui-btn" id="capture">拍照</button>
                            <button type="button" id="uppicture" class="layui-btn" >上传</button>
                        </div>
                    </div>

上传服务器代码

    $(‘#uppicture‘).click(function(){
              var userId = $(‘#select‘).children(‘.userId‘).text();
              var groupId = $(‘#select‘).children(‘.groupid‘).text();
              var image_code = $(‘#image_code‘).val();//图片值
              if(!userId){
                  alert(‘用户不存在‘);return;
              }
              if(!image_code){
                  alert(‘请先拍照‘);return;
              }
              $.ajax({
                   type: "POST",
                   url: "__syface__UPload",
                   data: {
                    userId: userId,
                    groupId: groupId,
                    image_code:image_code
                   },
                   success: function(msg){
                    alert("采集成功 感谢您的支持！！！");
                     $(‘#select‘).children(‘.purl‘).html("<img src=‘"+msg.filepath+"‘ widht=‘27px‘ height=‘27px‘/>"); 
                      },
                   error:function(){
                    alert("无法访问人脸接口,请联系管理员");
                   }
                });
          });
    })

这里根据自己需求在调试一下就可以正常使用了