代码有点多,然而每一一步都很好了解,起首是HTML代码,写一个form表单,到时分上传图片时ajax异步提交,没有需求引入此外js,h5无方法能间接调取媒体设施。
不外要留意的是好几个阅读器比方google,QQ,360等由于平安缘由,不HTTPS协定的网站一概以为是没有平安的,以是,调取没有到,要记患上给网站请求HTTPS证书,装置正在效劳器上
测试阶段,他们的阅读器默许是封闭的lash以及摄像头设施的,打没有开,找了各类找入口,就是不打卡的按钮,最初试了试火狐的,火狐的能够调取,以是倡议测试阶段用火狐阅读器开发
需要:
摄影以及照片要正在同一个地位,拍完当前视频框显示照片,假如想重拍点击激活摄像头按钮,视频框显示,照片暗藏,再点击拍,拍摄胜利,点击上传。
调取胜利摄像头,如图下会有进度条的视频框显示:
点击摄影,拍摄胜利,右边会显示激活摄像头的按钮,并不点激活摄像头,没有称心接着点摄影,是能够拍的,只不外看没有到是甚么样的,如图:
拍摄实现,点击上传,上传至后盾进行数据操作。
款式文件:
.coach-price{display: none} .input-but{display: inline-flex;} #canvas{display: none} #showVideo{display: none} #input-picture{width:100%;} HTML代码: <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>打卡头像</h5> </div> <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=""/> <input name="userId" class="userId" type="hidden" value=""/> //这是一个画布的容器 <canvas id="canvas" width="300" height="260"></canvas> </div> </div> <div class="form-group "> //要摄影的视频框 <video id="video" controls> </video> </div> <div class="form-group "> //各类按钮 <div class="input-but"> <button type="button" class="layui-btn" id="showVideo"> 激活摄像头 </button> <button type="button" class="layui-btn" id="capture"> <i class="layui-icon"></i>摄影 </button> <button type="button" id="uppicture" class="layui-btn" > <i class="layui-icon"></i>上传 </button> </div> </div> </form> </div> </div>
JS代码:
<script> //拜访用户媒体设施的兼容办法 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外围阅读器 let CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 console.log(stream); //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { 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'); $('#showVideo').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'); $('#showVideo').show(); $('.picture').val(1); } function hidepicture() { $('#results').find('img').remove(); getnavigator(); $('#video').css('display','block'); $('#canvas').css('display','none'); $('#showVideo').css('display','none'); } $('#showVideo').click(function () { showVideo(); }); document.getElementById('capture').addEventListener('click', function () { let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); context.drawImage(video, 0, 0); //猎取网页中的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'); $('#showVideo').show(); } }) //点击图片上传按钮 $('#uppicture').click(function () { var userId = $('.userId').val(); var image_code = $('#image_code').val();//图片值 if(!userId){ alert('用户没有存正在');return; } if(!image_code){ alert('请先摄影');return; } $.post("{:url('upPicture')}", {'userId':userId,'image_code':image_code}, function(res){ // console.log(res); if(1 == res.code){ layer.alert(res.msg, {title: '友谊提醒', icon: 1}); $('.picture').val(1); }else{ layer.alert(res.msg, {title: '友谊提醒', icon: 2}); } }); }); </script>
提交后盾,PHP进行解决,用的框架是tp5的,以是前面前往的时分间接用的tp的success以及error,很不便,它的第一个参数是msg,第二个是URL,第三个是data。
public function upPicture(){ $image_code = input('image_code'); if(empty($image_code)){ $this ->error('照片为空'); } $uId = input('userId'); //解决接纳过去的图片 $img = str_replace('data:image/png;base64,', '', $image_code); $img = str_replace(' ', '+', $img); $data = base64_decode($img); // 图片称号 $file_name = "./uploads/head/".time().".png"; $fp = fopen($file_name, 'w'); fwrite($fp, $data); fclose($fp); $array = array( "picture" => substr($file_name,1) ); $res = Db::table("table")->where("userId",$uId)->setField($array); if($res){ $this ->success('编纂胜利!'); }else{ $this ->error('编纂失败,请刷新重试!'); } }
相干保举:《PHP教程》
以上就是php调取摄像头完成摄影性能的办法的具体内容,更多请存眷资源魔其它相干文章!
标签: php php开发教程 php开发资料 php开发自学
抱歉,评论功能暂时关闭!