//顯示拍照
function showVideo(){
    canvas.width = video.offsetWidth * ratio;
    canvas.height = 200;
    context = canvas.getContext("2d");
    if(navigator.getUserMedia){
        navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
            video.srcObject = stream;
        buffer = stream;
        video.play()
    }, (error) => {
            //ios11 上傳圖片或者拍照 在低版本蘋果上調(diào)用攝像頭失敗 就讓用戶點(diǎn)擊選擇拍照或者選擇自拍照
            $(".unDerIos11").show();
            $(".others").hide();
            console.log(error.name || error)
        })
    }else{
        $(".unDerIos11").show();
        $(".others").hide();
    }
}

• 拍照完畢后要進(jìn)行一個(gè)是顯示提示顯示照片 關(guān)閉了攝像頭

//方法關(guān)閉攝像頭
function closeCamera() {
    buffer && buffer.getTracks()[0].stop();
}

• 拍照后圖片上傳到后端進(jìn)行人像的對(duì)比

//拍照按鈕的單擊事件
$('#capture').click(function () {
    //繪制畫面
    context.drawImage(video,0,0,video.offsetWidth * 1 ,video.offsetHeight * 1 );
    switch ($(this).find('a').text()){
        case '識(shí)別':
            $('#canvas').show();
            $('#video').hide();
            $(this).addClass("reRec").find('a').html('重新識(shí)別');
            //上傳圖片的Base64
            uploadImg((canvas.toDataURL('image/png')),2);
            break;
        case '重新識(shí)別':
            $('#video').show();
            $('#canvas').hide();
            faceImg = 0;
            $('#video').show();
            $(".reRec-load").hide();
            $(this).removeClass("reRec").find('a').html('識(shí)別');
            break;
    }
});

以下是html5身份證上傳的js部分 使用FileReader

 <input id="upload"  class="weui-uploader__input" type="file" accept="image/*" multiple="">

//身份證上傳
var reader = new FileReader();
$('.card-face_wrap').on('change','#upload',function(){//圖片上傳
    var that =$(this).parents(".card-face_wrap");
    imgType = that.attr('val');
    //var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節(jié))（ 2 M = 2097152 B ）超過2M上傳失敗
    var rd=new FileReader();  //創(chuàng)建文件讀取對(duì)象
    var file=$(this)[0].files[0];
    //var imgSize = file.size;
    rd.readAsDataURL(file);  //讀取類型為base64
    $(this).clone().replaceAll(file=this);
    rd.onload=function (ev) {
        //圖片顯示且上傳
        var str = '<input id="upload"  class="weui-uploader__input" type="file" accept="image/*" multiple=""><img id="imgDetail" src='+this.result+' />';
        that.html(str);
        if(imgType==1){
            curImg = this.result;
        }else if(imgType==2){
            curImg = this.result;
        }
        uploadImg(curImg,imgType);
    }

});