调用摄像头拍照

<div id="sxt" style="width:335px;height:300px;position: relative;"></div>

<div id="paiZhao" style="display: none;">
  <a href="javascript:void(0)" class="easyui-linkbutton c6 mlr10" iconcls="icon-ok" onclick="TrainingRecordScene_PaiZhao()" style="width: 70px;margin-top: 14px;">拍照</a>
  <a href="javascript:void(0)" class="easyui-linkbutton c6 mlr10" iconcls="icon-cancel" onclick="TrainingRecordScene_QuXiao()" style="width: 70px;margin-top: 14px;">取消</a>
</div>
<input type="hidden" id="ss" />

//拍照用
var video = null;
var canvas = null;
var context = null;
var imageData = '';//存拍照base64
var paiZhaoRen = 0;//考核员拍照用(4,考核人员签到 5,安全员签到 6,考核人员签退 7,安全员签退)
var StaffID = 0;//学员ID
var SignType = 0;//学员签到传1,签退传2
var AKqiantui = 0;

//签到签退
function TrainingRecordScene_SignInbtn(num){
    //console.log('qd',num);
    ChouJianFQQ = 0;
    StaffID = 0;
    SignType = 0;
    paiZhaoRen = num
    //57安全,46考核

    var str = "";
    str += "<video id='video' width='335px' height='300px' controls></video><canvas id='canvas' width='335px' height='300px' style='position: absolute;z-index: 99;left: 0;top:0;'></canvas>";
    $("#sxt").html(str);
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    $("#paiZhao").show();
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video : {width: 335, height: 300}}, success, error);
    } else {
        $.messager.alert("提示", "不支持访问用户媒体", "", function () {});
    }
    
}
//拍照按钮,上面方法#paiZhao div显示才能用
function TrainingRecordScene_PaiZhao(){
    context.drawImage(video, 0, 0, 335, 300);
    imageData = canvas.toDataURL("image/jpeg").split(',')[1];
    $("#ss").val(imageData) //照片base64存到隐藏input
    Record_SignInOutRecord(paiZhaoRen); //发请求
}
//访问用户媒体设备的兼容方法
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元素的源
    //console.log(stream);

    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}

function error(error) {
    console.log("访问用户媒体设备失败${error.name}, ${error.message}");
}
//取消拍照
function TrainingRecordScene_QuXiao(){
    $("#video").remove();
    $("#canvas").remove();
    $("#paiZhao").hide();
    StaffID = 0;
    SignType = 0;
    paiZhaoRen = 0;
    ChouJianFQQ = 0;
    TimesID = 0;
}
//照发请求
function Record_SignInOutRecord(UpdType){
    $.ajax
}

 

posted @ 2025-01-10 14:32  石头记1  阅读(27)  评论(0)    收藏  举报