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是不行的。
到這里就基本上可以實現拍照上傳了，如果有什么問題可以留言我們一起討論，互相學習。
總結
以上是生活随笔為你收集整理的php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《互联网金融投资理财一册通》一一第2章
- 下一篇： 科目一在线考试系统php,单机考试系统/