How can I keep HTML5 webcam rotated upright on website for tablets
Question
I'm trying to display the tablet user's webcam as upright in any tablet orientation. When the user rotates the tablet, the webcam rotates with it, and the stream comes out rotated.
I think this would be easy enough if I had access to the window.orientation property, but this comes back undefined in both Firefox and Chrome.
My code so far is capable of rotating the image, but all I can know based on the resize event is whether it is in portrait or landscape mode and I believe I need to know which of the 4 sides of the tablet is on the bottom in order to rotate the canvas' context the correct amount.
My test code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video id="myVideo" width = "250" height="200"></video>
<canvas id="myCanvas" width="250" height="200"></canvas>
<script src="../plugins/jquery/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
var video = $('#myVideo');
var canvas = $('#myCanvas').get(0);
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI / 2);
context.translate(canvas.width / -2, canvas.height / -2);
webcam_setup();
video.hide();
});
// Listen for orientation change
$(window).resize(function() {
// Announce new orientation number - Comes back undefined
// console.log(window.orientation);
});
function DrawToCanvas(video, context) {
//context.rotate(Math.PI/2);
context.drawImage(video,0,0, 250, 200);
setTimeout(DrawToCanvas, 35, video, context);
};
function webcam_setup() {
navigator.myGetMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.myGetMedia({video: true}, webcam_connect, webcam_error);
};
function webcam_connect(stream) {
var video = $('#myVideo').get(0);
var canvas = $('#myCanvas').get(0);
var context = canvas.getContext('2d');
video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
video.play();
waitForStream(video, context);
};
function waitForStream(video, context) {
if (video.readyState < 4) {
console.log("wait");
setTimeout(waitForStream, 2000, video, context);
}
else {
console.log("done waiting");
DrawToCanvas(video, context);
};
return false;
};
function webcam_error(e) { console.log(e); };
</script>
</body>
</html>
Any ideas?
1 answers
solution1
1 2014-07-21 20:37:07
Maybe I'm not completely understanding what you're trying to accomplish, but can't you just use .on('orientationchange',…) for what you're talking about?
And Realistically, you should only need two orientations, not four, one for portrait and one for landscape, right? The tablet should never orient where the bottom is at the "top" of the screen towards the user.
If that's the case, then all you should have to do (since you realistically can't get at screen.orientation yet; it's not widely-supported), is just compare $(window).height() against $(window).width() to get orientation.
$(window).on('orientationchange resize',function(){
if ($(window).height() <= $(window).width()) {
// Landscape
} else {
// Portrait
}
});
Would that suffice for what you're talking about? Or am I misunderstanding your question?
Here's a quick fiddle I threw together that should demonstrate this: http://jsfiddle.net/vfK2w/2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.