Javascript-Webcam Problem

Hallo, ich möchte über HTML/JS die Webcam ansprechen.
Das klappt alles, jedoch brauch ich das "Video" der Webcam in einem anderen Seitenverhältnis.
Jetzt ist alles in 4:2, möchte die Webcamausgabe in 3:2.
Das bekomme ich aber nicht hin, egal wie und wo ich es angebe.
Wie kann ich das machen?

<html lang="de">  
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<title>Test</title>
	<script type="text/javascript">  
		// Put event listeners into place
		window.addEventListener("DOMContentLoaded", function()   
		{
			// Grab elements, create settings, etc.
			var canvas = document.getElementById("canvas"),  
			context = canvas.getContext("2d"),  
			video = document.getElementById("video"),  
			videoObj = { video: { width: 750, height: 500 } },
			errBack = function(error) 
			{
				console.log("Video capture error: ", error.code);   
			};
			// Put video listeners into place
			if(navigator.getUserMedia) 
			{ // Standard
				navigator.getUserMedia(videoObj, function(stream) 
				{
					video.src = stream;
					video.play();
				}, errBack);
			} else if(navigator.webkitGetUserMedia) 
				{ // WebKit-prefixed
					navigator.webkitGetUserMedia(videoObj, function(stream){
					video.src = window.webkitURL.createObjectURL(stream);
					video.play();
				}, errBack);
				} else if(navigator.mozGetUserMedia) 
				{ // WebKit-prefixed
					navigator.mozGetUserMedia(videoObj, function(stream){
					video.src = window.URL.createObjectURL(stream);
					video.play();
				}, errBack);
			}
			function take_photo()
			{
				context.drawImage(video, 0, 0, 750, 500);
				$('#canvas').hide();  
			}
		}, false);
	</script>
</head>
<body>
	<video  id="video" autoplay>  
	</video>
	<canvas id="canvas" width="750" height="500"></canvas>  
</body>
<footer>
</footer>
</html>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 310910

Url: https://administrator.de/contentid/310910

Ausgedruckt am: 22.11.2024 um 21:11 Uhr

3 Kommentare

Neuester Kommentar

Moin
Flüchtig geschaut und in Zeile 13
videoObj = { video: { width: 750, height: 500 } },
gibts du doch das Verhältnis an sowie zeile 41
context.drawImage(video, 0, 0, 750, 500);
und bei Zeile 50
<canvas id="canvas" width="750" height="500"></canvas>
.
Da kannst du das doch Ändern.

Ja schon, aber egal was ich da eintrage, es ändert leider nichts am Bild.

Hi,
one sight into the docs and you can read that the supported resolutions depend on the webcam used.
So you can only define constraints but not all resolutions you define are supported!
So if you want another scale hide some parts of the video with two divs placed over the video hiding the required amount.

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<title>Test</title>
	<script type="text/javascript">  
		// Put event listeners into place
		window.addEventListener("DOMContentLoaded", function()   
		{
			// Grab elements, create settings, etc.
			var video = document.getElementById("video");  
			var s_1 = document.getElementById("s_1");  
			var s_2 = document.getElementById("s_2");  
			var wrapper = document.getElementById("videowrapper");  
			videoObj = {video:{width:{min:320,ideal:640}, height:{min:240,ideal:480}}};
			video.onplay = function(){
				window.setTimeout(function(){
					// 3:2 format stripes
					var stripesize = Math.round((video.videoWidth - ((video.videoHeight / 2) * 3))/ 2);
					wrapper.style.width = video.videoWidth + "px";  
					wrapper.style.height = video.videoHeight + "px";  
					s_1.style.width = stripesize + "px";  
					s_2.style.width = stripesize + "px";  
					s_1.style.height = video.videoHeight + "px";  
					s_2.style.height = video.videoHeight + "px";  
					s_1.style.display = "block";  
					s_2.style.display = "block";  
				},500);
			}
			errBack = function(error){console.log("Video capture error: ", error.code);};  
			if(navigator.getUserMedia){ // Standard
				navigator.getUserMedia(videoObj, function(stream){
					video.src = stream;
					video.play();
				}, errBack);
			} else if(navigator.webkitGetUserMedia){ // WebKit-prefixed
					navigator.webkitGetUserMedia(videoObj, function(stream){
					video.src = window.webkitURL.createObjectURL(stream);
					video.play();
				}, errBack);
			} else if(navigator.mozGetUserMedia){ // WebKit-prefixed
					navigator.mozGetUserMedia(videoObj, function(stream){
					video.src = window.URL.createObjectURL(stream);		
					video.play();
				}, errBack);
			}
		}, false);
	</script>
</head>
<style type="text/css">  
.stripe{background-color:black; z-index:10 !important; position:absolute; display:none}
#s_1 {left:0;top:0}
#s_2 {right:0;top:0}
</style>
<body>
	<div id="videowrapper" style="position:relative">  
    	<video id="video" style="z-index:0 !important; position:absolute;left:0px;top:0px"></video>  
        <div id="s_1" class="stripe"></div>  
        <div id="s_2" class="stripe"></div>  
    </div>
</body>
</html>

Regards