I'm seeing some code about capture video in html5
It works fine with this tutorial,(http://www.html5rocks.com/ko/tutorials/getusermedia/intro/)
but it differently work each device. phone and my notebook.
Because phone and my notebook's cam screen size are different.
So, I want to get each device's camera width and height, and adjust code with this value.
How can I get these values? or How can I get each device's whole screen value ?
you can use loadedmetadata event to get video height and width.
video.addEventListener("loadedmetadata", function () {
find_video_size();
}, false);
function find_video_size(){
if (isStreaming++ <= 10) {
// videoWidth isn't always set correctly in all browsers
if (video.videoWidth > 0){
cwidth = video.videoWidth;
cheight = video.videoHeight;// / (video.videoWidth / cwidth);
$("#tutcanvas").attr("width", cwidth).attr("height", cheight);
isStreaming = 11;
}else{
setTimeout(find_video_size, 200);
}
}else{
$("#tutcanvas").attr("width", cwidth).attr("height", cheight);
}
}
Related
I am trying to place markers on points of interest (poi) on an Image.
These poi have been set in a different software and were stored in a database. The position is determined by their pixel position relative to the original Image. In my webapp the Images are scaled down thanks to panzoom.js (a plugin irrelevant to my question I think). I got the right formula to scale the markerposition, the only Problem is:
In firefox I'm unable to read the Images size in time (In Chrome that's not an Issue).
This is the Code
$(document).ready(function ()
{
var imagectrl = document.getElementById('<%= img.ClientID %>');
var hiddenfield = document.getElementById('<%= hf.ClientID %>');
if (hiddenfield.value == "")
{
var myWidth;
var myHeight;
myWidth = imagectrl.clientWidth;
myHeight = imagectrl.clientHeight;
hiddenfield.value = myWidth + ';' + myHeight;
__doPostBack();
}
});
If I do a postback manually (clicking a button that shows the Image in higher quality) the size gets written correctly.
I've also tried calling an identical function from Code behind when my X or Y are 0, but nothing worked.
What can i do to get the Images size when first loading the page?
Firefox has a different implementation on asynchronous operations like image loading than Chrome. I guess this could be the reason why in Chrome you can access the image right away with $(document).ready, but in Firefox the image source gets loaded after the document is ready - thus clientWidth and clientHeight will be undefined.
Solution: Define an onload event handler on your image and put your logic into that method:
$(document).ready(function ()
{
var imagectrl = document.getElementById('<%= img.ClientID %>');
var hiddenfield = document.getElementById('<%= hf.ClientID %>');
imagectrl.onload = function() {
if (hiddenfield.value == "")
{
var myWidth;
var myHeight;
myWidth = imagectrl.clientWidth;
myHeight = imagectrl.clientHeight;
hiddenfield.value = myWidth + ';' + myHeight;
__doPostBack();
}
}
});
I found a Solution:
No matter what I did, the Image itself can't be measured in time.
So i gave the Image the height of it's surrounding control via CSS and used
AddHandler dvGalerieFill.Load, AddressOf Me.measure_height
in the Page_Load method to react to the loading of the surrounding control.
In "measure_height" I called my Javascript function.
Through the height of the control (wich is the height of my image)
I can calculate the width of my image as height and width rescale with the same factor.
My mobile game android app should be in landscape mode,
when I maximize after minimize the app it will display in landscape mode and screen not rotated, but the problem is height and width are interchanged. So it was displayed half of the screen only remaining was blank screen.
If we lock and unlock the device, automatically the height and widths are fit according to screen size.
I handled the above problem using Event.ACTIVATE, if app is active then i reset the width,height,scaleX and scaleY. In 4.0, 4.1, 4.2 versions of android it is working fine but when we used 4.4, 5.1 it will shows same problem. How can we rectify this ?
NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, handleActivate, false, 0, true);
private function handleActivate(event:Event):void
{
NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
if ( main.mainMcProperties.width > main.mainMcProperties.height )
{
gametble.width = main.mainMcProperties.width;
gametble.height = main.mainMcProperties.height;
gametble.scaleX = main.mainMcProperties.scaleX;
gametble.scaleY = main.mainMcProperties.scaleY;
}
else
{
gametble.width = main.mainMcProperties.height;
gametble.height = main.mainMcProperties.width;
gametble.scaleX = main.mainMcProperties.scaleY;
gametble.scaleY = main.mainMcProperties.scaleX;
}
}
I'm calculating a width of a div and setting it using javascript. But occasionally on safari on the mac it will not render the size. Even though I clearly have the width style on the element and no important statements overriding it the calculated width remains 0. It's really strange and only happens occasionally. See screenshot.
http://i.imgur.com/XGfjxCe.jpg
Has anyone had this problem before or could please offer any suggestions?
Thanks
Edit js code
setResizeFlag = function(){
resizeComplete = true;
clearInterval(periodicalResize);
windowSize = window.getSize();
siteWidth = header.getSize().x;
content.setStyle('width',siteWidth + 'px');
}
window.addEvent('resize', function(){
resizeComplete = false;
if(periodicalResize) clearInterval(periodicalResize);
periodicalResize = setResizeFlag.periodical(500);
});
I am trying to create a banner that had 3 versions of 1 slide containing 1 image.
I know how to do this with display: none but that means all the content is loaded and it will effect load speeds on slow networks or mobiles.
I'm not a javascript or jquery wiz so the simpler the better please.
What i would like to do is:
on screen resolutions up to 620px
{Load this HTML }
on screen resolutions 621px to 920px
{ Load this HTML }
on screen resolutions 921px and above
{ Load this HTML }
Is this possible?
You could handle this with CSS screen queries but like you say it will load them all and hide them. So you would have to go down the route of JQuery me thinks.
I think the better way to do this's with CSS.
Per example, to make all images responsive:
img {
max-width: 100%;
height: auto;
}
check the another tricks>>
Or you can do this via #media's:
#media (max-width: 979px) {
(css here - widths < 979)
}
#media all and (max-width: 767px) and (min-width: 400px) {
(widths between 400 and 767)
}
#media all and (max-width: 399px) and (min-width: 0px) {
(widths between 399-0px)
}
Hope I helped.
"Is this possible?"
Yes, but in order to maintain code simplicity you'll need to use a different method: Send the user to one of three different pages depending on his screen width, instead of loading a new div in the same page. I'll explain how you can do it step by step. Here we go:
How to check the user's screen width with JavaScript:
if(window.innerWidth <= 620){
// The window width is less or equal to 620px.
}
if(window.innerWidth > 620 && window.innerWidth <= 920){
// The window width is greater than 620px and less or equal to 920px.
}
if(window.innerWidth > 920){
// The window width is greater than 920px.
}
You can also simplify this code a little bit if you store the window.innerWidth value in a width variable, like this:
var width = window.innerWidth;
Then you can use if(width > 620){/* Code here */} to check if the window width is greater than 620px.
Now you'll create two or more pages, each one with a modification and then send the user to another page if his screen size is X. To do so you'll only need to use location.href="#"; inside the above ifs and replace "#" with the other pages URL.
Handling page resize:
The above codes are examples on how you can check the user window width, but the browser will run this code when the page has loaded, one time only, but not when it's resized. To make this code run anytime the browser is resized you'll need to wrap these ifs in a function and call it using an EventListener, that'll say to the code when the browser is resized.
Final code result:
Here's the final code ported to a function, called inside an EventListener and sending the user to another page:
function checkWidth(){
var width = window.innerWidth;
if(width <= 620){
location.href = "#"; // The window width is less or equal to 620px.
}
if(width > 620 && width <= 920){
location.href = "#"; // The window width is greater than 620px and less or equal to 920px.
}
if(width > 920){
location.href = "#"; // The window width is greater than 620px.
}
}
window.addEventListener('resize', checkWidth);
checkWidth();
JSFiddle Demo
I have a weird bug on iPad iOS7 landscape mode.
What i was able to investigate is that in iOS7 window.outerHeight is 692px and
window.innerHeight 672px; while in previous versions both values are 672px.
Even though my <html> and <body> tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae
You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.
Even when i set the height of both tags to height: 672px !important and position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).
I'm running the release candidate version of iOS7
thanks for any help.
I used this JavaScript solution for solving that problem:
if (
navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) &&
window.innerHeight != document.documentElement.clientHeight
) {
var fixViewportHeight = function() {
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
};
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
I believe this is a bug in iOS 7 - if you rotate it to portrait mode, it sets both (innerHeight/outerHeight) to the same value. If it isn't a bug, then portrait mode has one because the behavior isn't consistent.
You could detect iOS 7/mobile Safari and use window.innerHeight if iOS 7.
I'll combine the answers. Thanks all!
You can do something like this:
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('#yourDivID').height(window.innerHeight);
window.scrollTo(0, 0);
}
The window.scrollTo solves the issue of the bar overlapping in landscape when rotating.
Cheers!
I reproduce the same problem in iOS 8.
Here is my solution.
I listened resize, scroll, orientationChange event, to ensure when user trigger screen size change, will call reset height function.
I wrote a debounce to prevent multiple call.
And It's in a closure and no dependent (no jQuery).
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
//ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();