tingel
Goto Top

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>

Content-Key: 310910

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

Ausgedruckt am: 28.03.2024 um 18:03 Uhr

Mitglied: kaiand1
kaiand1 26.07.2016 um 21:29:23 Uhr
Goto Top
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.
Mitglied: tingel
tingel 26.07.2016 um 21:40:29 Uhr
Goto Top
Ja schon, aber egal was ich da eintrage, es ändert leider nichts am Bild.
Mitglied: 129813
129813 26.07.2016, aktualisiert am 27.07.2016 um 19:15:44 Uhr
Goto Top
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