ОБНОВИТЬ:
Это весь код, который я в значительной степени копировал и вставлял.
<!DOCTYPE HTML> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script language="JavaScript" type="text/javascript"></script> <style> </style> </head> <body> <script> Webcam.set({ width: 320, height: 240, dest_width: 640, dest_height: 480, image_format: 'jpeg', jpeg_quality: 90, force_flash: false }); </script> <div id="web_camera" style="width:320px; height:240px;"></div> <div id="cam_result"></div> <script type="text/javascript" src="webcam.js"></script> <script language="JavaScript"> document.addEventListener("DOMContentLoaded", function(event) { Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#web_camera' ); function take_snapshot() { // take snapshot and get image data Webcam.snap( function(data_uri) { // display results in page document.getElementById('cam_results').innerHTML = '<h2>Here is your image:</h2>' + '<img src="'+data_uri+'"/>'; Webcam.upload( data_uri, 'upload.php', function(code, text) { // Upload complete! // 'code' will be the HTTP response code from the server, eg 200 // 'text' will be the raw response content }); } ); } }); </script> <a href="javascript:void(take_snapshot())">Take Snapshot</a> </body> Я использую эту ссылку
http://mycodingtricks.com/javascript/webcam-api/
Этот выглядит намного лучше, но может быть одним и тем же
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
То, что меня беспокоит, это data_uri, а также загрузка URL
Итак, веб-камера работает, показывает мое лицо, что бы то ни было, но я выдвигаю эту
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
и ничего не происходит. Я вижу маленькую серое окно внизу слева, говоря javascript: void (take_snapshot ()) Мне интересно, должен ли я помещать параметр …
Могут быть несколько проблем, я использую сопоставление доменов, и папка может быть указана некорректно или это может быть проблема с разрешением файла, я работал с www-данными
Это файл upload.php, предложенный или скорее заданный первой ссылкой
<?php // be aware of file / directory permissions on your server move_uploaded_file($_FILES['webcam']['tmp_name'], '/tabdater/uploads/webcam'.md5(time()).rand(383,1000).'.jpg'); ?>
Буду признателен за любую помощь.
Это должно стать отличной отправной точкой для вас. Я надеюсь, это поможет вам.
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Cam Snap</title> <script type="text/javascript" src="webcam.js"></script> <script language="JavaScript"> function take_snapshot() { Webcam.snap(function(data_uri) { document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="SaveSnap();">Save Snap</button>'; }); } function ShowCam(){ Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 100 }); Webcam.attach('#my_camera'); } function SaveSnap(){ document.getElementById("loading").innerHTML="Saving, please wait..."; var file = document.getElementById("base64image").src; var formdata = new FormData(); formdata.append("base64image", file); var ajax = new XMLHttpRequest(); ajax.addEventListener("load", function(event) { uploadcomplete(event);}, false); ajax.open("POST", "upload.php"); ajax.send(formdata); } function uploadcomplete(event){ document.getElementById("loading").innerHTML=""; var image_return=event.target.responseText; var showup=document.getElementById("uploaded").src=image_return; } window.onload= ShowCam; </script> <style type="text/css"> .container{display:inline-block;width:320px;} #Cam{background:rgb(255,255,215);}#Prev{background:rgb(255,255,155);}#Saved{background:rgb(255,255,55);} </style> </head> <body> <div class="container" id="Cam"><b>Webcam Preview...</b> <div id="my_camera"></div><form><input type="button" value="Snap It" onClick="take_snapshot()"></form> </div> <div class="container" id="Prev"> <b>Snap Preview...</b><div id="results"></div> </div> <div class="container" id="Saved"> <b>Saved</b><span id="loading"></span><img id="uploaded" src=""/> </div> </body> </html>
PHP (должен иметь каталог uploads) –
<?php define('UPLOAD_DIR', 'uploads/'); $img = $_POST['base64image']; $img = str_replace('data:image/jpeg;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = UPLOAD_DIR . uniqid() . '.png'; $success = file_put_contents($file, $data); print $success ? $file : 'Unable to save the file.'; ?>
Кредит на этот блог для php!
Он не работает, потому что вы включили take_snapshot() в document.addEventListener("DOMContentLoaded", function(event) { function.
Пожалуйста, следуйте инструкциям …
Код должен выглядеть так:
<!DOCTYPE html> <html> <head> <title>Javascript Webcam Demo - <MyCodingTricks/></title> <link href="http://mycodingtricks.com/demo/style.css" rel="stylesheet"/> </head> <body> <h3>Demonstrates simple 320x240 capture & display</h3> <div id="my_camera"></div> <!-- A button for taking snaps --> <form> <input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()"> </form> <div id="results" class="well">Your captured image will appear here...</div> <script src="http://mycodingtricks.com/demo/script.js"></script> <!-- First, include the Webcam.js JavaScript Library --> <script type="text/javascript" src="webcam.min.js"></script> <!-- Configure a few settings and attach camera --> <script language="JavaScript"> Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); function take_snapshot() { // take snapshot and get image data Webcam.snap( function(data_uri) { // display results in page document.getElementById('results').innerHTML = '<h2>Here is your image:</h2>' + '<img src="'+data_uri+'"/>'; Webcam.upload( data_uri, 'upload.php', function(code, text) { // Upload complete! // 'code' will be the HTTP response code from the server, eg 200 // 'text' will be the raw response content }); } ); } </script> </body> </html>