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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了php调取摄像头实现拍照功能的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6201字，纯文字阅读大概需要9分钟。

内容图文

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

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

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

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

需求：

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

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

php调取摄像头实现拍照功能的方法 - 文章图片

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

php调取摄像头实现拍照功能的方法 - 文章图片

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

样式文件：

.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">&#xe67c;</i>拍照
                    </button>
                    <button type="button" id="uppicture" class="layui-btn" >
                        <i class="layui-icon">&#xe67c;</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调取摄像头实现拍照功能的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/125669.html

来源：【匿名】

【上一篇】PHP-curl通过GET或POST方式实现http及https请求【下一篇】PHP 5 数据对象 (PDO) 抽象层与 Oracle

更多 ►

【php调取摄像头实现拍照功能的方法】教程文章相关的互联网学习教程文章

最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能，找资料研究了下，终于黄天不负有心人，成功了，下面我分步骤将代码贴出来，希望能有帮助。代码有点多，但是每一步都很好理解，首先是HTML代码，写一个form表单，到时候上传图片时ajax异步提交，不需要引入别的js,h5有方法能直接调取媒体设备。不过要注意的是好几个浏览器比如谷歌，QQ，360等因为安全原因，没有HTTPS协议的网站一律认为是不安全的，所以，调取不到，要记得...

PHP+FLASH做了个在线摄像头拍照，怎么将图片保存在本地

摄像头调用部分自己已经写好，因为拍摄的照片较多，现在想先把摄像头拍摄的照片保存在本地，然后用FTP上传，问题是照片拍好后，不知道怎么保存在本地，请各位给我个例子，思路也行，不胜感激！回复讨论(解决方案) 先保存到web服务器，用户可以选择下载、删除、还是做个照册。从安全角度来想，浏览器应该不允许flash操作本机的文件。现在做的这个系统必须要摄像头进行拍照，我在网上找的例子都是存服务器里的，现在...

[急求]ubuntu下使用php调用ffmpeg转换视频格式、抽帧、摄像头实时录入不成功，是php设置问题？还是代码的问题？

我是按照http://blog.sina.com.cn/s/blog_568f35c701016tzb.html上的方法安装的LAMP，然后又按照http://dsec.pku.edu.cn/~lyj/Programming/configure_php.html上说的修改了一下这个是转换视频的php代码，test.avi放在主文件夹目录里，直接用终端输ffmpeg -i test.avi outtest.asf能正常转换格式 $cmd="ffmpeg -i test.avi outtest.asf"; exec($cmd,$out,$status); print_r($out); print_r($status);//0是成功 1是失败 ...

php程序能不能捕捉摄像头画面解决方法

php程序能不能捕捉摄像头画面想做一个视频捕捉程序，看了看网上都是C，JAVA,C#,VB,VC == 唯独没有PHP的请问各位大侠，PHP程序能不能捕捉摄像头里的画面（USB摄像头），能不能给点思路，能不能参照C语言源文件写一个出来呢------解决方案-------------------- 你要捕获的是服务器的摄像头呢还是客户端的？ ------解决方案--------------------好像不能 ------解决方案--------------------貌似不能，因为PHP是服务器端的语言，开...

flash+php怎么控制远程摄像头

flash+php如何控制远程摄像头啊网上查了下资料，说是靠flash+php实现，但是如何用flash实现啊，假设远程摄像头的ip(127.0.0.1)，验证密码是:123456，请高手提供下详细的思路，需要查找哪些资料，php方面自己没有问题，关键是flash、如何调用远程摄像头------解决方案-------------------- 一般需要接口的你可以百度下

PHP+FLASH做了个在线摄像头拍照，如何将图片保存在本地

PHP+FLASH 做了个在线摄像头拍照，怎么将图片保存在本地摄像头调用部分自己已经写好，因为拍摄的照片较多，现在想先把摄像头拍摄的照片保存在本地，然后用FTP上传，问题是照片拍好后，不知道怎么保存在本地，请各位给我个例子，思路也行，不胜感激！------解决方案--------------------本帖最后由 xuzuning 于 2013-03-02 19:05:18 编辑如果 Flash 不能做到读写本地文件，那么要用 Flash 还有何用？ js 都是可以的（只不过要弹...

如何在微信直接调用摄像头拍照

想在微信中直接调用摄像头拍照，省得再自己选摄像头，怎么在微信里的网页实现？谢谢回复内容：想在微信中直接调用摄像头拍照，省得再自己选摄像头，怎么在微信里的网页实现？谢谢这个调用摄像头应该是取决于浏览器的支持吧，微信应该不会做这么底层的东西试试HTML5的摄像头函数，也许可以。另外直接选择图片会提示是拍照还是选择照片的。V2EX: HTML5通过webRTC直接调用摄像头！目前没有开放这类接口，以后应该也不会。

javascript-node-webkit应用中视频通信的摄像头调用被360阻止

我用node-webkit封了一个简单的应用（main直接指向我的一个网站），当中webrtc的视频通信，可是经常被360等流氓阻止摄像头的调用。可有办法破之？回复内容：我用node-webkit封了一个简单的应用（main直接指向我的一个网站），当中webrtc的视频通信，可是经常被360等流氓阻止摄像头的调用。可有办法破之？360是驱动层面的阻拦摄像头的，要破解有点难。要不然当应用检测到摄像功能不能正常使用的时候，提示用户暂时退出安全软件，给...

php-让用户将网站中的网络摄像头链接到流

我还没有找到适合我的方案的具体解决方案.我主要使用PHP(CodeIgniter)和AngularJS 我希望能够开始在线游戏(比如说“飞镖”)当您与其他玩家在线比赛时,您应该可以打开网络摄像头,作为得分正确的证明.我知道Google环聊可以做到这一点,但是环聊摄像头将超出主窗口. 我也想让观众成为可能,因此他们将凸轮视为实时流.使用视频群聊,每个人都必须加入视频群聊聊天,我不希望人们这样做是为了提高用户体验. 因此,我想在网页中链接两个或多个...

Javascript网络摄像头捕获并使用PHP上传到服务器【代码】

我有一个页面,其中包含使用javascript和PHP上传文件的成功图像上传表单画布.第二页成功捕获了网络摄像头并将其捕获到画布并正确显示.我正在尝试使用cam捕获图像来修改图像上传脚本,以使实时CSS对象什么都不做…的HTML是：卡 <div id="upContent"><div class="upload-wrapper"><span id="upCanvas">Upload This Canvas</span></div><div class="return-data"></div> </div> <script src...

使用PHP从浏览器通过Android摄像头捕获图像【代码】

是否可以使用Android相机通过浏览器使用PHP或其他PHP库来捕获图像？我知道它可以通过电话差距来完成,但我正在尝试用PHP来做.因为我的其他项目也使用PHP. 任何人都可以帮我找到解决方案吗？解决方法:我发现它可以用于Android 3.0设备.它启动相机,拍照时返回页面.资料来源：https://stackoverflow.com/a/7811843/1536522<input type="file" accept="image/*;capture=camera">