您的位置 首页 php

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

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

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

不过要注意的是好几个浏览器比如谷歌,QQ,360等因为安全原因,没有HTTPS协议的网站一律认为是不安全的,所以,调取不到,要记得给网站申请HTTPS证书,安装在服务器上

测试阶段,他们的浏览器默认是关闭的lash和摄像头设备的,打不开,找了各种找入口,就是没有打卡的按钮,最后试了试火狐的,火狐的可以调取,所以建议测试阶段用火狐浏览器开发

需求:

拍照和照片要在同一个位置,拍完以后视频框显示照片,如果想重拍点击激活摄像头按钮,视频框显示,照片隐藏,再点击拍,拍摄成功,点击上传。

调取成功摄像头,如图下会有进度条的视频框显示:

bf52d5735a2e4fced0202056e2c944f.png

点击拍照,拍摄成功,左边会显示激活摄像头的按钮,其实不点激活摄像头,不满意接着点拍照,是可以拍的,只不过看不到是什么样的,如图:

f6f1ea1fbc9ac944c28e82539ef5bbd.png

拍摄完成,点击上传,上传至后台进行数据操作。

样式文件:

.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调取摄像头实现拍照功能的方法

文章地址:https://www.zhihuclub.com/2497.shtml

关于作者: 智云科技

热门文章

发表回复

您的电子邮箱地址不会被公开。

网站地图