<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>摄像头拍照上传</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<video id="video" width="480" height="320" controls>
</video>
<div>
<button id="capture">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
<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);
}
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
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) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({
video: {
width: 480,
height: 320
}
}, success, error);
} else {
alert('不支持访问用户媒体');
}
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 480, 320);
var base64 = canvas.toDataURL('png');
console.log(base64);
$.ajax({
url: "save.php",
type: "POST",
data: {
image_base: base64
},
dateType: 'formData',
enctype: 'multipart/form-data',
async: false,
success: function (result) {
console.log(result);
}
});
})
</script>
</body>
</html>
<?php
function format($base64)
{
if (($l = strpos($base64, ';base64,')) !== false) {
$p = explode('/', substr($base64, 0, $l));
if (!empty($p[1])) {
return '.' . $p[1];
}
}
return '.unknown';
}
//echo $base64;
// $base64是获取到前端传递的src里面的值，也就是我们的数据流文件
$base64 = $_POST['image_base'];
// 设置文件路径和文件前缀名称
$path = "./";
$prefix = 'nx_';
$output_file = $prefix . time() . rand(100, 999) . format($base64);
// 'data:image/png;base64,'
$base64 = str_replace(substr($base64, 0, strpos($base64, ';base64,') + 8), '', $base64);
$path = $path . $output_file;
// 创建将数据流文件写入我们创建的文件内容中
$ifp = fopen($path, "wb");
fwrite($ifp, base64_decode($base64));
fclose($ifp);
// 第二种方式
// file_put_contents($path, base64_decode($base64));
// 输出文件
echo json_encode([
'message' => '上传成功',
'save_file' => $output_file,
], 256);
exit;
