Estou tentando enviar dados binários do Blob por Ajax para fazer o upload via PHP. Porém, nao estou conseguindo acessar o $_GET. Retorna um erro dizendo índice indefinido:
responseText : "Nenhuma imgagem encontrada"
quando comento a linha do die() do upload.php:
responseText : " ↵Notice: Undefined index: obBlob in C:\xampp\htdocs\WEBCAM\upload.php on line 4
Retorno do AJAX 'error':
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} abort : ƒ (e) always : ƒ () catch : ƒ (e) done : ƒ () fail : ƒ () getAllResponseHeaders : ƒ () arguments : (...) caller : (...) length : 0 name : "getAllResponseHeaders" prototype : {constructor: ƒ} proto : ƒ () [[FunctionLocation]] : jquery-3.3.1.min.js:2 [[Scopes]] : Scopes[3] getResponseHeader : ƒ (e) overrideMimeType : ƒ (e) pipe : ƒ () progress : ƒ () promise : ƒ (e) readyState : 4 responseText : "Nenhuma imgagem encontrada" setRequestHeader : ƒ (e,t) state : ƒ () status : 200 statusCode : ƒ (e) statusText : "OK" then : ƒ (t,r,i) proto : Object
segue o codigo:
index.html (completo):
<!doctype html>
<html lang="pt">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Webcam TRIX</title>
</head>
<body>
<video src="" id="video" muted autoplay></video>
<canvas id="pic"></canvas>
<!-- colocar um form com um action para salvar a foto -->
<input type="text" id="blobOut" value="">
<img alt="" src="" id="picOut"/>Foto
<input type="button" id="btnStart" value="Tirar Foto">
<input type="button" id="btnSave" value="Salvar Foto">
<script type="text/javascript">
//inicializa um objeto stream
var tmpStream;
function setMedia(video, s){
tmpStream=s;
try{
video.srcObject = s;
}catch(error){
video.src = URL.createObjectURL(s);
}
}
//função para iniciar a camera
function startCamera(){
navigator.mediaDevices.getUserMedia({
video:{facingMode:"environment"},
audio: true
})
.then((stream) => {
setMedia(document.getElementById("video"),stream);
});
}
//função para parar a camera
function stopCamera(){
if(!tmpStream) return;
tmpStream.getVideoTracks().forEach(track => track.stop());
}
//ligar a camer automaticamente
window.addEventListener("DOMContentLoaded", startAll);
//incicializa tudo
function startAll()
{
startCamera();
//função para tirar foto
document.querySelector("#btnStart").addEventListener("click", event => {
canvas = document.getElementById("pic");
const context = canvas.getContext("2d");
const video = document.getElementById("video");
//tamanho da foto mesmo tamanho do video
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
//desenha o video no canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
});
}
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
$.ajax({
url : "upload.php",
type: "POST",
data: {obBlob: blob},
contentType: false,
processData: false,
dataType:"json",
success: function(resultado) {
console.log(resultado);
},
error: function(resultado) {
console.log(resultado);
}
});
});
});
</script>
</body>
</html>
upload.php (completo):
<?php
header("Content-Type: application/json", true);
if(empty($_GET["obBlob"])) die("Nenhuma imgagem encontrada");
$obBlob = $_GET["obBlob"];
$servername = "localhost";
$username = "root";
$password = "";
$database = "fotos";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO fotos (foto) VALUES ($obBlob)";
if(mysqli_query($conn, $sql)){
mysqli_close($conn);
echo $conn->error;
}else{
mysqli_close($conn);
die("Error:".$conn->error);
}
?>
EDIT:
tentei da seguinte forma, utilizando a API FormData com o AJAX, sem sucesso:
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
var formData = new FormData();
formData.append("obBlob", blob);
$.ajax({
url : "//localhost/webcam/upload.php",
type: "POST",
data: {obBlob: formData},
contentType: false,
processData: false,
success: function(resultado) {
console.log(resultado);
},
error: function(resultado) {
console.log(resultado);
}
});
});
});
e tentei assim também, fazendo o envio manual... tentei enviar o blob direto, ou convertendo em JSON (que no caso se mostra vazio quando jogo no console!):
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
json = JSON.parse(JSON.stringify(blob));
console.log(json);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'upload.php', true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.send(json);
});
});
como faço pra pegar o erro neste ultimo caso caso? alguma idéia do que poderia ser?
EDIT 2:
desisti de usar blob e tentei com canvas.toDataURL, mas o array chega vazio!!!
document.getElementById("btnSave").addEventListener("click", event => {
var dataURL = canvas.toDataURL();
$.ajax({
url : "//localhost/webcam/upload.php",
type: "POST",
data: {"imgBase64":dataURL},
contentType: false,
processData: false,
dataType:"json",
success: function(resultado) {
console.log(resultado);
},
error: function(resultado) {
console.log(resultado);
}
});
});
quando verifico o payload na aba network das ferramentas de desenvolvedor do Chrome o objeto está la!
já tentei de tudo e não sai disse... verifiquei o $_SERVER['REQUEST_METHOD'] e está retornando POST, tentei passar usando XMLHttpRequest... Não tenho idéia do que possa ser... estou na base da tentativa e erro!
POST
mas está recuperando a variável via$_GET
blob
, tem que fazer uma requisição na mão ou usar mais alguma biblioteca