<!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);
}
