php调取摄像头实现拍照功能

最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能，找资料研究了下，终于黄天不负有心人，成功了，下面我分步骤将代码贴出来，希望能有帮助

代码有点多，但是每一步都很好理解，首先是HTML代码，写一个form表单，到时候上传图片时ajax异步提交，不需要引入别的js,h5有方法能直接调取媒体设备。

不过要注意的是好几个浏览器比如谷歌，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) {//最新的标准APInavigator.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) {//旧版APInavigator.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 提取图片 imagefunction convertCanvasToImage(canvas) {//新Image对象，可以理解为DOMvar image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URL// 指定格式 PNGimage.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调取摄像头实现拍照功能相关推荐

C#摄像头实现拍照功能的简单代码示例
C#摄像头实现拍照功能的简单代码示例 2009-11-20 来自:网上整理字体大小:[大中小] ·摘要:这里将介绍一个C#摄像头实现拍照功能的简单代码示例,代码虽然不短,但是基本上实现了相对应的功能 ...
vue调取电脑摄像头实现拍照功能
实现效果图: 拍照前&拍照后(我电脑摄像头挡住的,所以图片是灰色) 1.点击拍照上传功能调取电脑摄像头权限 2.选择允许使用摄像头之后,页面摄像头区域开始显示画面 3.点击拍照按钮,右侧显示拍 ...
IE11怎么调取摄像头并拍照
2021/01/31最近公司需求做一个人脸识别系统,但是前端需要使用IE11浏览器,我们从网上搜集了很多资料证明,IE只能使用flash才行(此时flash已经宣布停止维护,但是它的ActiveX依旧 ...
VUE实现调用摄像头和拍照功能
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.cs ...
用html5和javascript调用摄像头实现拍照功能
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
html5 摄像头拍摄视频教程,html5实现调用摄像头并拍照功能
相关介绍: 我们知道通常情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onl ...
php h5 调用摄像头_html5实现调用摄像头并拍照功能
相关介绍: 我们知道通常情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onl ...
pc端调起电脑的摄像头进行拍照功能
我的需求是在电脑端调起电脑上面的摄像头,有可能是电脑自带的摄像头也可能是插入的USB摄像头下面这个是如果用户有两个摄像头的话,会将这两个摄像头都列出来,用户可以自己选择使用哪个摄像头. 下面是htm ...
用js调用摄像头实现拍照功能兼容到ie8
最近公司要求做个项目刷脸登陆要求既能兼容高版本浏览器,又要能兼容到ie8及ie以上,欧米噶,虽然ie让我脑壳疼,但是还是得解决,在网上看了很多资料,最终选用jquery.webcam来实现ie的拍照 ...

php调取摄像头实现拍照功能

php调取摄像头实现拍照功能相关推荐

最新文章

热门文章