调用摄像头拍照
<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 }

浙公网安备 33010602011771号