Захват и загрузка веб-камеры Javascript на сервер с помощью PHP

У меня есть одна страница с удаленным холстом изображения с помощью файла загрузки javascript и PHP. вторая страница имеет успешный захват веб-камеры на холст и отображается правильно. Я пытаюсь адаптировать сценарий загрузки изображений с захватом камеры, объект live css ничего не делает … html: snap

<div id="upContent"> <div class="upload-wrapper"> <span id="upCanvas">Upload This Canvas</span> </div> <div class="return-data"></div> </div> <script src="js/interactioncam.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--script src="js/holder.js"></script--> 

и java-скрипт:

• Как использовать php для передачи данных в автозаполнение jQuery?
• Использование AJAX для отправки переменных lat & lng в PHP для расчета близости
• Как связать ссылку с другой php-страницей с помощью события onclick из javascript?
• не получая электронные письма формы
• Зачем нужно использовать JSON в php и AJAX

 //interactioncam.js - grab a pic (function() { var data; var dataURL; var streaming = false, video = document.querySelector('#video'), cover = document.querySelector('#cover'), canvas = document.querySelector('#canvas'), photo = document.querySelector('#photo'), startbutton = document.querySelector('#startbutton'), width = 320, height = 240; navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia( { video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream; } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev){ if (!streaming) { height = video.videoHeight / (video.videoWidth/width); video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); function takepicture() { canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); var dataURL = canvas.toDataURL(); photo.setAttribute('src', data); }; startbutton.addEventListener('click', function(ev){ takepicture(); ev.preventDefault(); }, false); // Convert DataURL to Blob object function dataURLtoBlob(dataURL) { // Decode the dataURL var dataURL = canvas.toDataURL(); var binary = atob(dataURL.split(',')[1]); // Create 8-bit unsigned array var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } // Return our Blob object return new Blob([new Uint8Array(array)], {type: 'image/png'}); } // Send IT $("#upCanvas").live("click", function(){ $("#upCanvas").html("<img src='img/load.gif' alt='load'>&nbsp;&nbsp;&nbsp;Uploading .."); // Convert Canvas DataURL var dataURL= canvas.toDataURL(); // Get Our File var file= dataURLtoBlob(dataURL); // Create new form data var fd = new FormData(); // Append our image fd.append("imageNameHere", file); $.ajax({ url: "uploadFile.php", type: "POST", data: fd, processData: false, contentType: false, }).done(function(respond){ $("#upCanvas").html("Upload This Canvas"); $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast"); }); }); })(); 

загрузка php:

 <?php $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"] < 20000) && in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "Stored in: " . "upimg/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; } ?> 

любые предложения относительно того, почему я не могу получить холст, преобразованный в файл, и сценарий загрузки для работы?

 <?php $img = !empty($_REQUEST['imgBase64']) ? $_REQUEST['imgBase64'] : die("No image was posted"); $imgName = $_REQUEST['imgName']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $fileData = base64_decode($img); //saving file_put_contents($imgName, $fileData); 

 (function() { // The width and height of the captured photo. We will set the // width to the value defined here, but the height will be // calculated based on the aspect ratio of the input stream. var width = 320; // We will scale the photo width to this var height = 0; // This will be computed based on the input stream // |streaming| indicates whether or not we're currently streaming // video from the camera. Obviously, we start at false. var streaming = false; // The various HTML elements we need to configure or control. These // will be set by the startup() function. var video = null; var canvas = null; var photo = null; var startbutton = null; function startup() { video = document.getElementById('video'); canvas = document.getElementById('canvas'); photo = document.getElementById('photo'); startbutton = document.getElementById('startbutton'); navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia({ video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev) { if (!streaming) { height = video.videoHeight / (video.videoWidth / width); // Firefox currently has a bug where the height can't be read from // the video, so we will make assumptions if this happens. if (isNaN(height)) { height = width / (4 / 3); } video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); startbutton.addEventListener('click', function(ev) { takepicture(); ev.preventDefault(); }, false); clearphoto(); } // Fill the photo with an indication that none has been // captured. function clearphoto() { var context = canvas.getContext('2d'); context.fillStyle = "#AAA"; context.fillRect(0, 0, canvas.width, canvas.height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } // Capture a photo by fetching the current contents of the video // and drawing it into a canvas, then converting that to a PNG // format data URL. By drawing it on an offscreen canvas and then // drawing that to the screen, we can change its size and/or apply // other changes before drawing it. function takepicture() { var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); $.ajax({ type: "POST", url: "upload.php", data: { imgBase64: data, imgName: "webcam.png" } }).done(function(o) { console.log('saved'); }); } else { clearphoto(); } } // Set up our event listener to run the startup process // once loading is complete. window.addEventListener('load', startup, false); })(); 

 #video { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #photo { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #canvas { display:none; } .camera { width: 340px; display:inline-block; } .output { width: 340px; display:inline-block; } #startbutton { display:block; position:relative; margin-left:auto; margin-right:auto; bottom:32px; background-color: rgba(0, 150, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2); font-size: 14px; font-family: "Lucida Grande", "Arial", sans-serif; color: rgba(255, 255, 255, 1.0); } .contentarea { font-size: 16px; font-family: "Lucida Grande", "Arial", sans-serif; width: 760px; } 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <meta charset='utf-8'> </head> <body> <div class="contentarea"> <div class="camera"> <video id="video">Video stream not available.</video> <button id="startbutton">Take photo</button> </div> <canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="The screen capture will appear in this box."> </div> </div> </body> </html> 

 .canvas{display:block;}