php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传

最近在做一个小应用，里面有一个功能就是需要打开摄像头拍照并且上传，今天就记录一下这个小功能。

HTML篇：

这里我是用的layui的样式，需要先引用layui的样式，才会有上图的效果。

* 照片：

点击拍照

点击上传

JS篇：

这里面我做了一个flag判断，防止用户在没有拍照的情况下就上传照片，这样肯定是不行的，然后里面还有一个 是将 base64 格式的图片上传，这个和普通的文件上传还有点不一样，在服务器里面需要把转base64的图片生成具体的图片文件，这个在后面服务端处理。

var flag = 0;

var width="200";

var height="300";

//访问用户媒体设备的兼容方法

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) {

alert('访问用户媒体设备失败');

}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {

//调用用户媒体设备, 访问摄像头

getUserMedia({video : {width: width, height: height}}, success, error);

} else {

alert('不支持访问用户媒体');

}

document.getElementById('capture').addEventListener('click', function () {

context.drawImage(video, 0, 0, width, height);

flag = 1 ;

})

function is_flag() {

if (flag){

uploadImage();

}else {

alert("请先拍照！谢谢！");

}

}

// ajax提交数据

function uploadImage() {

var imgData = canvas.toDataURL();

$.ajax({

type: "post",

//后端需要调用的地址

url: "{:url('baseimg_upload')}",

contentType : "application/json ; charset=utf-8",

data: JSON.stringify({

"image":imgData

}),

dataType: 'json',

success: function (res) {

// console.log(res);

if (res.status==1){

$('#upText').html('上传成功!!!');

$('#image').val(res.file);

} else {

layer.msg(res.info,{time:2000,icon:5});

}

},

error: function (res) {

layer.msg(res.info,{time:2000,icon:5});

}

})

}

PHP端：

这里我的后台是用的tp5框架。

public function baseimg_upload(){

$base64_img = input('image');

$base64_img = str_replace('', '+', $base64_img);

$up_dir = ROOT_PATH. DS . 'uploads' . DS . 'image'. DS .date('Ymd');

if(!file_exists($up_dir)){

mkdir($up_dir,0777,true);

}

if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){

$type = $result[2];

if(in_array($type, array('pjpeg', 'jpeg', 'jpg', 'gif', 'bmp', 'png'))){

$randStr = str_shuffle('1234567890'); //随机字符串

$rand = substr($randStr,0,4); // 返回前四位

$img_name=date('YmdHis').$rand.'.'.$type;

$new_img_path = DS . 'uploads' . DS . 'image'.DS.date('Ymd').DS.$img_name;

$new_file =$up_dir."/".$img_name;

$res_img= file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)));

if($res_img){

return json(["file"=>$new_img_path,"status" => 1]);

}

//上传失败

return json(['status' => 5, 'info' => "图片上传失败"]);

}

//文件类型错误

return json(['status' => 5, 'info' => "文件类型错误"]);

}

//文件错误

return json(['status' => 5, 'info' => "文件错误"]);

}

在这里还得提醒一下： 首先您得有摄像头这个东西，然后如果是本地使用的话，会有一个弹窗提示用户在是用您的摄像头，需要点击允许，如果是在服务器上远程(也就是通过域名网站打开)使用，就需要站点用ssl 也就是 https才可以调取成功，http是不行的。

到这里就基本上可以实现拍照上传了，如果有什么问题可以留言我们一起讨论，互相学习。