<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="__JS__/jquery-1.7.2.min.js"></script> <script language="javascript">let URL = '__URL__/';let ROOT_PATH = '__ROOT__/';let APP = '__APP__/';</script> <title>H5 getUserMedia 調用媒體攝像頭</title> </head> <body> <!--使用video標籤調用攝像頭--> <video id="video" autoplay></video> <!--創建一個canvas 用來存放圖片--> <canvas id="canvas" style="display:none"></canvas> <!--用來顯示上傳到後臺保存的照片--> <div id="header_url"></div> <button οnclick="getUserMedias()">打開攝像頭</button><br><br> <button οnclick="closeUserMedias()">關閉攝像頭</button><br><br> <button οnclick="uploadImage()">拍照</button><br><br> <script type="text/javascript"> let video = document.getElementById('video');//攝像頭窗口 let canvas = document.getElementById('canvas');//存放圖片的畫布 let context = canvas.getContext('2d');//在畫布上繪圖的環境。當前唯一的合法值是 "2d" /** * 訪問用戶媒體設備的兼容方法 */ 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) { //firefox瀏覽器 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.src = CompatibleURL.createObjectURL(stream); //將視頻流設置爲video元素的源 video.srcObject = stream; video.play(); } function error(error) { console.log(error) alert('訪問用戶媒體設備失敗'); } /** * 打開攝像頭 */ function getUserMedias() { if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { getUserMedia({video : {width:200, height:200}}, success, error); } else { alert('不支持訪問用戶媒體'); } } /** * 關閉攝像頭 */ function closeUserMedias() { video.srcObject.getTracks()[0].stop(); } /** * 圖片上傳到服務器 * 獲取 Canvas 的編碼。 */ function uploadImage(){ let query = new Object(); canvas.width = 300; canvas.height = 300; context.drawImage(video, 0, 0, 300, 300);//利用畫布對象,進行繪製圖形 let imgData = canvas.toDataURL();//圖片的base64值 query.imgData = imgData; //上傳到後臺。 $.ajax({ type: "POST", url: APP + "Home/test/up_img", data: query, dataType:"json", success: function(data){ console.log(data) if(data.status) { alert(data.msg) let img= '<img src="'+data.header_url+'" />'; $("#header_url").html(img); }else{ alert(data.msg); } } }); } </script> </body> </html>
/** * 拍照上傳 驗證人臉 */ public function up_img(){ $uid = 1; //保存圖片到本地 $base64_string = $_POST['imgData']; $image = explode(',',$base64_string); $base64_string = $image[1]; $save_path = 'Upload/all_to_path/photo/'.date('YmdHis').rand(1000,9999).'.png'; $url_path = C('ROOT_URL').'/'.$save_path; //使用 file_put_contents 保存圖片 file_put_contents($save_path, base64_decode($base64_string)); //人臉識別 $data = []; $data['uid'] = $uid; $data['img_url'] = $url_path; $member = M('member')->where(['id'=>$uid])->field('id,is_face')->find(); $model = new AipFaceModel(); if($member['is_face']){ $res = $model->search_user_by_url($data); }else{ $res = $model->add_user_by_url($data); if($res['status']){ M('member')->where(['id'=>$uid])->save(['is_face'=>1]); } } //人臉識別完成之後 刪除圖片(如果刪除,header_url前臺就顯示不出圖片了) //unlink($save_path); $res['header_url'] = $url_path; $this->ajaxReturn($res); }