<script>
// Event erstellen Kurztfassung (Standart)
window.addEventListener("DOMContentLoaded", function()
{
// Variabeln
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e)
{
alert('Fehler', e)
};
// Kamera ansprechen
if(navigator.mediaDevices || navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia(mediaConfig).then
(function(stream)
{
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e)
{
video.src = window.webkitURL.createObjectURL(stream);
video.play();
};
}
);
}
);
}, false);
);
</script>
Nun noch ein bischen Style, damit man auch was sieht.
<style>
video
{
background: rgba(0,0,0,1);
border: 1px solid #ccc;
}
</style>
<video id="video" width="100%" autoplay></video>
<canvas id="canvas"></canvas>
Getestet mit: Firefox, Edge, Chrome, Android und WinPhone.
Danke an: Eric Bidelman für die Idee.
Und nun machen wir ein Bild und speichern es auf unserem “Sever”.
Wir brauchen dazu das Script, und eine upload.php
<head>
<script>
// Ereignis Listener erstellen
window.addEventListener("DOMContentLoaded", function()
{
// elemente holen, usw
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) {console.log('Fehler', e)};
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream)
{
video.src = window.URL.createObjectURL(stream); video.play();
});
}
function drawImageActualSize()
{
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
ctx.drawImage(this, 0, 0, this.width, this.height);
}
else if(navigator.getUserMedia)
{ // Standard
navigator.getUserMedia(mediaConfig, function(stream)
{
video.src = stream;
video.play();
}, errBack);
}
else if(navigator.webkitGetUserMedia)
{ // WebKit-prefixed
navigator.webkitGetUserMedia(mediaConfig, function(stream)
{
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia)
{ // Mozilla-prefixed
navigator.mozGetUserMedia(mediaConfig, function(stream)
{
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById('snap').addEventListener('click', function()
{
context.drawImage(video, 0, 0, 1280, 640); // Bilddgröße
});
}, false);
document.getElementById('png').addEventListener('click', function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
});
</script>
</head>
<body>
<p>
<center>
<video id="video" width="100%" autoplay></video>
</br>
<button id="snap" class="Button" style="height:75px; width:640px" >Klick</button>
</br>
<canvas id="canvas" width="1280px" height="640px" height="auto" ></canvas>
<div>
<input type="button" style="height:75px; width:640px" onclick="uploadEx()" value="Upload" />
</div>
<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden" />
</form>
<script>
function uploadEx()
{
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL("image/png");
document.getElementById('hidden_data').value = dataURL;
var fd = new FormData(document.forms["form1"]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload_data.php', true);
xhr.upload.onprogress = function(e)
{
if (e.lengthComputable)
{
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
alert('Succesfully uploaded');
}
};
xhr.onload = function() {};
xhr.send(fd);
};
</script>
</center>
</p>