0

I have a major issue that I've been unable to resolve for several days. The user takes a photo, the page displays the image, and if there is confirmation, the program sends the 1024x1200px image along with other data through an AJAX request :

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  document.querySelector('header').style.display = "none";
  document.querySelector('footer').style.display = "none";

  navigator.mediaDevices.getUserMedia({ video: true }) // ***caméra frontale***

    .then(function (mediaStream) {
      var video = document.querySelector('video');
      video.srcObject = mediaStream;
      video.play();

      var captureBtn = document.querySelector('#captureBtn');
      captureBtn.addEventListener('click', () => {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        canvas.width = 1000;
        canvas.height = 1200;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        var imageDataUrl = canvas.toDataURL('image/png');

        var imgPreview = document.querySelector('#imgPreview');
        imgPreview.src = imageDataUrl;
        video.style.display = 'none';
        imgPreview.style.display = 'block';

        setTimeout(() => {
          var modal = document.getElementById("myModal");
          captureBtn.style.display = "none";
          modal.style.display = "block";
          var saveBtn = document.getElementById("saveBtn");
          var cancelBtn = document.getElementById("cancelBtn");

          saveBtn.onclick = function () {
            var queryString = window.location.search;
            var params = new URLSearchParams(queryString);
            var client = params.get('client');
            var container = params.get('container');
            var idGrpColis = params.get('idGrpColis');

            var req = new XMLHttpRequest();
            req.open('POST', 'index.php?page=PhotosAPI', true);
            req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            req.onreadystatechange = function () {
              if (req.readyState === XMLHttpRequest.DONE && req.status === 200) {
                console.log('Réponse du serveur : ' + req.responseText);
              }
            };
            req.send('imageData=' + imageDataUrl + '&client=' + client + '&container=' + container + '&idGrpColis=' + idGrpColis);
            console.log(req);
            imgPreview.style.display = 'none';
            video.style.display = 'block';
            modal.style.display = "none";
            captureBtn.style.display = "block";
          }

          cancelBtn.onclick = function () {
            // Afficher à nouveau le flux vidéo
            imgPreview.style.display = 'none';
            video.style.display = 'block';
            modal.style.display = "none";
            captureBtn.style.display = "block";
          }
        }, 250);
      });
    })
    .catch(function (error) {
      console.log(error);
    });
}
else console.log('getUserMedia n\'est pas pris en charge dans ce navigateur.');

On the other side, I receive the image, save it in a specified folder, and store the link in the database :

if (isset($_POST['imageData'])) {
    $client = $_POST['client'];
    $container = $_POST['container'];
    $idGrpColis = $_POST['idGrpColis'];
    $imageData = $_POST['imageData'];
    $annee = date("Y");
    $semaine = date("W");
    $path = "PhotosSQ/Bananes/".$client."/".$annee."/Semaine ".$semaine."/".$container."/";

    $imageData = str_replace('data:image/png;base64,', '', $imageData);
    $imageData = base64_decode($imageData);
    date_default_timezone_set('Europe/Paris');
    $fileName = date('Ymd_His') . '.png';

    if (!is_dir($path)) {
        mkdir($path, 0777, true);
    }

    $urlPhoto = $path.$fileName;
    file_put_contents($urlPhoto, $imageData);

    $newPhotos = new Photos(['urlPhoto' => $urlPhoto, 'idGroupeColis'=>$idGrpColis]);
    PhotosManager::add($newPhotos);
}

When I execute it, I get a 500 error, and it's impossible to determine the source of the error. However, if I set the size of the photo to 50x50px, it works. It creates the folders, saves an (invisible) image in the folder, and inserts the link into the database.

Why is this happening? Could it be a file size issue on the IIS server? How can I fix this issue?

On the server, I have already increased the maximum length of content, URLs, and query strings, but it doesn't solve the issue.

0 Answers0