Cześć,
Piszę aplikację, która zrobi zdjęcie a następnie to zdjęcie zapisze na serwerze. Jednak mam pewien problem z jego zapisaniem. W katalogu upload tworzy mi się plik z zdjęciem, jednak nie da się go odtworzyć, pisze, że plik jest uszkodzony, ma 0 B.
Gorąca prośba o pomoc.


Mój kod:

[JAVASCRIPT] pobierz, plaintext 
  1. // Set constraints for the video stream
  2. var constraints = { video: { facingMode: "environment" }, audio: false };
  3. // Define constants
  4. const cameraView = document.querySelector("#camera--view"),
  5.     cameraOutput = document.querySelector("#camera--output"),
  6.     cameraSensor = document.querySelector("#camera--sensor"),
  7.     cameraTrigger = document.querySelector("#camera--trigger")
  8. // Access the device camera and stream to cameraView
  9. function cameraStart() {
  10.     navigator.mediaDevices
  11.         .getUserMedia(constraints)
  12.         .then(function(stream) {
  13.         track = stream.getTracks()[0];
  14.         cameraView.srcObject = stream;
  15.     })
  16.     .catch(function(error) {
  17.         console.error("Oops. Something is broken.", error);
  18.     });
  19. }
  20. // Take a picture when cameraTrigger is tapped
  21. cameraTrigger.onclick = function() {
  22.     cameraSensor.width = cameraView.videoWidth;
  23.     cameraSensor.height = cameraView.videoHeight;
  24.     cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
  25.     cameraOutput.src = cameraSensor.toDataURL('image/png');
  26.     cameraOutput.classList.add("taken");  
  27.     // track.stop();
  28. };
  29. // Start the video stream when the window loads
  30. window.addEventListener("load", cameraStart, false);
  31.  
  32.  
[JAVASCRIPT] pobierz, plaintext



Plik index.php

[PHP] pobierz, plaintext 
  1. <!doctype html>
  2.     <html lang="pl">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta http-equiv="x-ua-compatible" content="ie=edge">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. 		<title>Camera App</title>
  8.         <link rel="stylesheet" href="style.css"> 
  9.        <!-- <script type="text/javascript" src="skrypt.js"> </script>-->
  10.  
  11. 	</head>
  12.      <body>
  13.     <form method="POST" action="storeImage.php">    
  14.     <!-- Camera -->
  15.     <main id="camera">
  16.         <!-- Camera sensor -->
  17.         <canvas id="camera--sensor"></canvas>
  18.         <!-- Camera view -->
  19.         <video id="camera--view" autoplay playsinline></video>
  20.         <!-- Camera output -->
  21.         <img src="//:0" alt="" id="camera--output">
  22.         <!-- Camera trigger -->
  23.         <button id="camera--trigger">Take a picture</button>
  24.     </main>
  25.     <!-- Reference to your JavaScript file -->
  26.     <script src="app.js"></script>
  27. </form>
  28. </body>
  29. </html>
  30.  
[PHP] pobierz, plaintext


plik storeImage.php

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.     $img = $_POST['image'];
  4.     $folderPath = "upload/";
  5.  
  6.     $image_parts = explode(";base64,", $img);
  7.     $image_type_aux = explode("image/", $image_parts[0]);
  8.     $image_type = $image_type_aux[1];
  9.  
  10.     $image_base64 = base64_decode($image_parts[1]);
  11.     $fileName = uniqid() . '.png';
  12.  
  13.     $file = $folderPath . $fileName;
  14.     file_put_contents($file, $image_base64);
  15.  
  16.     print_r($fileName);
  17.  
  18. ?>
[PHP] pobierz, plaintext


Po kliknięciu Take a picture pojawiają mi się błędy jak niżej sad.gif

blad