Wie Schnappschuss mit einer webcam in eine HTML-Seite?
Wenn ich sparen <canvas>
enthält Zeichnung. Alles ist in Ordnung. Aber, wenn ich sparen möchte canvas
, das ein Bild enthält (ein Bild aus der webcam-stream), es funktioniert nicht und es sendet nicht alles zum server.
Hat jemand eine Idee darüber?
HTML:
<video id="VideoCamera" autoplay></video>
<canvas id="testCanvas" width="300" height="300"></canvas>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
<button onclick="saveViaAJAX();">Save Via AJAX</button>
<input id="button" type="button" value="photo" onclick="snapshot()" />
<input id="button1" type="button" value="bubble" onclick="bubble()" />
<script type="text/javascript">
//This portion webcam setup
var video = document.getElementsByTagName('video')[0];
var localMediaStream = null;
if (navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback(stream) {
video.src = stream;
localMediaStream = stream;
}
function errorCallback(error) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; }
}
else {
heading.textContent = "Native web camera streaming is not supported in this browser!";
}
//draw something in canvass
var canvas = document.getElementById("testCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
canvasContext.beginPath();
canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
canvasContext.fill();
}
//This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
function bubble() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.getContext("2d");
for (i = 0; i < 150; i++) {
canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
canvasContext.beginPath();
canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
canvasContext.fill();
}
}
//This portion of the code take snaphot from wecam
function snapshot() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.getContext("2d");
canvasContext.drawImage(video, 0, 0, 240, 320);
}
//This portion of the code save canvass to server
function saveViaAJAX() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.toDataURL("image/png");
var postData = "canvasData=" + canvasContext;
var debugConsole = document.getElementById("debugConsole");
debugConsole.value = canvasContext;
var ajax = new XMLHttpRequest();
ajax.open("POST", 'Save.php', true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.setRequestHeader('Content-TypeLength', postData.length);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
debugConsole.value = canvasContext + " " + debugConsole.value;
}
}
ajax.send(postData);
}
PHP save.php
code:
$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
Dank!
- möglich, Duplikat der Capture-Bild von der Kamera in form oder html5-canvas
- Bekommst du irgendwelche Fehler in der Fehlerkonsole beim Aufruf der Leinwand.toDataURL () - Methode?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bitte überprüfen Sie picEdit Projekt, das die Einnahme von Schnappschuss von der Kamera. Getestet auf PC und Android (mit Chrome scheint es, dass der native browser nicht unterstützt Zugriff auf die Kamera):