Kamera (Webcam, Handycam … ) benutzen und im Browser anzeigen

<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 &amp;&amp; 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>

1 Kommentar zu „Kamera (Webcam, Handycam … ) benutzen und im Browser anzeigen“

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.