1

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!

2
  • Você está realizando POST mas está recuperando a variável via $_GET Commented 8/08/2018 às 15:58
  • O AJAX do jQuery não permite o tipo blob, tem que fazer uma requisição na mão ou usar mais alguma biblioteca
    – Costamilam
    Commented 8/08/2018 às 19:24

1 Resposta 1

0

Consegui resolver o problema utilizando um objeto FormData acrescentando um índice ao objeto que eu gostaria de passar do JS para o PHP com o método "append()". e depois passando o objeto FormData utilizando o método send do XMLHttpRequest...

document.getElementById("btnSave").addEventListener("click", event => {
   var fd = new FormData();
   var dataURL = canvas.toDataURL('image/jpeg', 1.0);
   fd.append("data", dataURL);
   var oReq = new XMLHttpRequest();
   oReq.open("POST","upload.php");
   oReq.send(fd);
});

Para acessar utiliza-se o $_POST normalmente, acessando o índice criado no objeto FormData. ex do código acima:

$_POST['data']

Obrigado a todos pela ajuda!!!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .