i need to stream a video over webrtc & play it on web page, it works properly on all desktop browser window & mac os. it works on android browsers too. but on safari iOS the video is rotated as landscape. it's rotated on both ( when capturig the video with iOS safari and when receiving the stream on chrome or safari desktop).
I tested it with the default basic getUserMedia example demo on webrtc site with safari iOS ans its the same issue. how can fix it or if any other solution please ?
Something that may be relevant that I've come across -
Requesting { width: 640, height: 480 } on iOS in portrait mode will return a camera MediaStream which is { width: 480, height: 640 }, and on orientation change the MediaStream flips its dimensions. Be careful around hardcoding the html elements width and height. Can cause warping. People should stick to known resolutions e.g those listed in en.wikipedia.org/wiki/Display_resolution. When you use an atypical resolution WebRTC spec states the browser will try emulate your desired feed. However this makes poor cross-browser code. If you want a consistent camera feed I would avoid this.
source:
getUserMedia (Selfie) Full Screen on Mobile
Related
Rendering of on different browsers in all cases are not similar. I havent any crossbrowser problems on Windows by using FF, Chrome, Opera, but all of these in Mac Os give me a new color distort. Some browser render video lighter, some is dark, opera render it with a more blue.
I tried to use JS - with canvas i get top/left pixel of video background and apply it to body but it didnt work in all browsers ( like in Opera ) and color what takes is not correct. Any idea of a correct solution to fix it? final task is - similar body and video bg.
thanks
I have a very specific screen size that I am designing to: 1920x1080 with Windows' 150% scaling applied.
I use Chrome Dev Tools and want to use it's emulated devices feature to emulate this screen size but I don't understand how I should configure the custom device to match. The Device Pixel Ratio doesn't match up with the display scaling in Windows.
Okay so I got it. I used a screen resizer extension to see what the viewport size is when I set my screen to that resolution and determined that I just need to configure chrome to use a DPR of 1, with a resolution of 1279x589 (if bookmark bar is enabled in chrome, otherwise height would be a little more.)
My desktop screen resolution is 1080x1920 (the monitor is using portrait orientation). I noticed a website I'm working on is showing up in tablet mode in FireFox (Chrome and IE work fine). The media query for tablet styling is
#media only screen and (max-width: 959px) { ... }
So even with some loss for window borders and scroll bars I should have plenty of width for the full desktop site. I checked screen.width and it is returning 864. I noticed this is the width IE and Chrome report when zoomed to 125%, but firefox is zoom is at 100%. Is there some setting I'm missing in FF or do I just have to set my default zoom to 80%?
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
I'm developing an application that has to display some html content that contains an html5 video (no flash/silverlight plugins). The html and the video are playing fine in safari, but when displayed inside the webview in my application i get a black box where the video should be. But the video seems to be playing, because if i click fullscreen, the video goes fullscreen and is correclty displayed, and also the audio is present, in fullscreen and non fullscreen mode. It seems like the video is played behind the page.
Maybe i'm missing something as a newbe?
does anyone has an html5 video correctly displayed inside a webview on a mac os x 10.6?
Thanks a lot!