지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > PHP를 사용하여 카메라를 호출하여 카메라 기능을 구현하는 방법

PHP를 사용하여 카메라를 호출하여 카메라 기능을 구현하는 방법

藏色散人
풀어 주다： 2023-04-07 22:14:01
앞으로
5701명이 탐색했습니다.

최근 작업한 가맹점 배경은 체크인하는 사용자의 사진을 찍기 위해 카메라를 호출하는 기능을 구현하는 데 필요했습니다. 정보를 검색하고 조사했습니다. 마침내 Huang Tian이 성과를 거두어 단계별로 코드를 게시하겠습니다. 아래 내용이 도움이 되기를 바랍니다.

코드가 조금 많지만 모든 단계는 이해하기 쉽습니다. 첫 번째는 HTML 코드입니다. 이미지를 업로드할 때가 되면 ajax가 이를 비동기적으로 제출합니다. H5에는 미디어 장치를 직접 호출하는 방법이 있습니다.

그러나 Google, QQ, 360 등 많은 브라우저는 보안상의 이유로 HTTPS 프로토콜이 없는 웹사이트는 안전하지 않은 것으로 간주되므로 검색할 수 없는 경우 반드시 신청해야 합니다. 웹사이트에 대한 HTTPS 인증서를 설치하고 테스트 단계에서 서버

에서 브라우저가 기본적으로 Flash와 카메라 장치를 꺼서 여러 입구를 검색했지만 체크인이 되지 않았습니다. 마지막으로 Firefox를 사용해 보았는데 Firefox 조정이 가능하므로 개발을 위해 테스트 단계에서는 Firefox 브라우저를 사용하는 것이 좋습니다. 사진을 찍으면 비디오 상자에 사진이 표시됩니다. 다시 찍으려면 카메라 활성화 버튼을 클릭하세요. 비디오 상자가 표시되고 사진 숨기기를 클릭한 다음 클릭하여 촬영하세요.

아래 그림과 같이 진행률 표시줄이 있는 비디오 상자에 표시된 것처럼 카메라가 성공적으로 검색되었습니다.

사진을 찍으려면 클릭하세요. 촬영이 성공하고 카메라를 활성화하는 버튼이 화면에 표시됩니다. 사실, 카메라를 클릭하지 않고 만족스럽지 않으면 클릭해서 사진을 찍을 수는 있지만 사진처럼 보이는 것은 볼 수 없습니다. :

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;
                $(&#39;#canvas&#39;).attr(&#39;width&#39;,v_width);
                $(&#39;#canvas&#39;).attr(&#39;height&#39;,v_height);
            });
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video : {width: 320, height: 240}}, success, error);
        } else {
            alert(&#39;不支持访问用户媒体&#39;);
        }
    }
    getnavigator();
    function showVideo(){
        $(&#39;#results&#39;).find(&#39;img&#39;).remove();
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#showVideo&#39;).css(&#39;display&#39;,&#39;none&#39;);
        getnavigator();
    }
    function showpicture(picture) {
        if($(&#39;#results&#39;).find(&#39;img&#39;).attr(&#39;src&#39;)){
            $(&#39;#results&#39;).find(&#39;img&#39;).attr(&#39;src&#39;,picture);
        }else{
            $(&#39;#results&#39;).append(&#39;<img  src="&#39;+picture+&#39;"/ alt="PHP를 사용하여 카메라를 호출하여 카메라 기능을 구현하는 방법" >&#39;);
        }
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#showVideo&#39;).show();
        $(&#39;.picture&#39;).val(1);
    }
    function hidepicture() {
        $(&#39;#results&#39;).find(&#39;img&#39;).remove();
        getnavigator();
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#showVideo&#39;).css(&#39;display&#39;,&#39;none&#39;);
    }
    $(&#39;#showVideo&#39;).click(function () {
        showVideo();
    });
    document.getElementById(&#39;capture&#39;).addEventListener(&#39;click&#39;, function () {
        let video = document.getElementById(&#39;video&#39;);
        let canvas = document.getElementById(&#39;canvas&#39;);
        let context = canvas.getContext(&#39;2d&#39;);
        context.drawImage(video, 0, 0);
        //获取网页中的canvas对象
        var mycans=$(&#39;canvas&#39;)[0];
        //调用convertCanvasToImage函数将canvas转化为img形式
        var img=convertCanvasToImage(mycans);
        if(img.src){
            $(&#39;#results&#39;).find(&#39;#image_code&#39;).val(img.src);
            // $(&#39;#capture&#39;).text(&#39;修改&#39;);
            $(&#39;#video&#39;).css(&#39;display&#39;,&#39;none&#39;);
            $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;block&#39;);
            $(&#39;#showVideo&#39;).show();
        }
    })
//点击图片上传按钮
$(&#39;#uppicture&#39;).click(function () {
    var userId = $(&#39;.userId&#39;).val();
    var image_code = $(&#39;#image_code&#39;).val();//图片值
    if(!userId){
        alert(&#39;用户不存在&#39;);return;
    }
    if(!image_code){
        alert(&#39;请先拍照&#39;);return;
    }
    $.post("{:url(&#39;upPicture&#39;)}", {&#39;userId&#39;:userId,&#39;image_code&#39;:image_code}, function(res){
        // console.log(res);
        if(1 == res.code){
            layer.alert(res.msg, {title: &#39;友情提示&#39;, icon: 1});
            $(&#39;.picture&#39;).val(1);
        }else{
            layer.alert(res.msg, {title: &#39;友情提示&#39;, icon: 2});
        }
    });
});
</script>
로그인 후 복사
백그라운드로 제출하면 PHP가 처리하므로 나중에 돌아올 때 tp의 성공과 오류를 직접 사용할 수 있습니다. 편리합니다. 첫 번째 매개변수는 msg이고, 두 번째 매개변수는 URL, 세 번째 매개변수는 데이터입니다. 

 public function upPicture(){
        $image_code = input(&#39;image_code&#39;);
        if(empty($image_code)){
            $this ->error(&#39;照片为空&#39;);
        }
        $uId = input(&#39;userId&#39;);
       //处理接收过来的图片
        $img = str_replace(&#39;data:image/png;base64,&#39;, &#39;&#39;, $image_code);
        $img = str_replace(&#39; &#39;, &#39;+&#39;, $img);
        $data = base64_decode($img);
       // 图片名称
        $file_name = "./uploads/head/".time().".png";
        $fp = fopen($file_name, &#39;w&#39;);
        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(&#39;编辑成功！&#39;);
       }else{
           $this ->error(&#39;编辑失败，请刷新重试！&#39;);
       }
    }
로그인 후 복사

관련 추천: "PHP Tutorial"

위 내용은 PHP를 사용하여 카메라를 호출하여 카메라 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
php
원천：csdn.net
이전 기사：Sina Pictures 업로드 인터페이스 소스 코드 공유 다음 기사：PHP에서 일반적으로 사용되는 암호화 및 복호화 방법 요약
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
에서 2024-04-06 17:27:56
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿