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>
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 310910
Url: https://administrator.de/contentid/310910
Ausgedruckt am: 14.11.2024 um 01:11 Uhr
3 Kommentare
Neuester Kommentar
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>