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?
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>
Please also mark the comments that contributed to the solution of the article
Content-Key: 310910
Url: https://administrator.de/contentid/310910
Printed on: April 19, 2024 at 19:04 o'clock
3 Comments
Latest comment
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.
Regards
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>