Hallo,
ich hab mir auf meiner Seite eingerichtet das ich meine Webcam starten kann und ein Foto schissen kann. Das geht auch soweit in Chrome, das Foto wird automatisch abgespeichert mit einem Php Script.
Das Problem ist nur das ich das unter Firefox brauche und da wird zwar die Webcam ausgegeben aber nicht das Foto gemacht. ich sitze jetzt seid Tagen dran aber weiß immer noch nicht wieso.
und die PHP
Ich hoffe jemmand kann mir da ein Tipp geben weil ich bei google nichts gefunden habe.
ich hab mir auf meiner Seite eingerichtet das ich meine Webcam starten kann und ein Foto schissen kann. Das geht auch soweit in Chrome, das Foto wird automatisch abgespeichert mit einem Php Script.
Das Problem ist nur das ich das unter Firefox brauche und da wird zwar die Webcam ausgegeben aber nicht das Foto gemacht. ich sitze jetzt seid Tagen dran aber weiß immer noch nicht wieso.
PHP-Code:
<video id="video"></video>
<canvas id="canvas"></canvas>
<img src="" hidden id="photo">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function () {
var streaming = false,
video = document.querySelector('#video'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 1400,
height = 0;
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);
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();
photo.setAttribute('src', data);
$.ajax({
type: "POST",
url: "screenshot.php",
data: {
imgBase64: data
}
}).done(function (o) {
console.log('saved');
});
}
document.onkeydown = function (event) {
if (event.keyCode == 120) {
event.cancelBubble = true;
event.returnValue = false;
takepicture();
ev.preventDefault();
}
return event.returnValue;
}
})();
</script>
PHP-Code:
<?php
class PacketFoto
{
public function machFoto()
{
define('UPLOAD_DIR', 'images/');
$bImg = $_POST['imgBase64'];
$bImg = str_replace('data:image/png;base64,', '', $bImg);
$bImg = str_replace(' ', '+', $bImg);
$sData = base64_decode($bImg);
$sFile = UPLOAD_DIR . 'pic.png';
$success = file_put_contents($sFile, $sData);
return $success;
}
}
$takePic = new PacketFoto();
$takePic->machFoto();
Kommentar