We currently have our webRTC video chat in beta, and we have noticed a strange issue with the aspect ratio of the video changing.
When we request video using the following.
navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})
everything starts off fine, but we have received feedback that users are seeing video "stretching" for a few seconds before returning to normal. We have managed to replicate this locally by pausing the video feed, through inspecting the video it seems that the aspect ratio changes from 400x300 to 300x150 (which coincides with the intrinsic values here https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video).
Can anyone think why this would be happening?
Your application is expected to handle video of any aspect ratio and resolution.
For starters, the stream you get with getUserMedia may not be the size you request. 400x300 is not a normal resolution, and not all browsers are going to crop or scale what they get from the webcam to accommodate your application. Even if you did use something more common like 640x480, there is still a chance that the camera doesn't support it and will send video at a different resolution.
Next, particularly with mobile devices, rotation can occur so your video that was originally 4:3 aspect ratio could now be 3:4. These resolution changes happen mid-stream without any warning.
Finally, due to changing bandwidth or CPU conditions, the browsers can choose to scale the video at any time. Maybe one of the devices starts to overheat or has a low battery. This can cause sporadic video scaling. I've never seen it change aspect ratio when this occurs, but it sounds plausible, especially when using oddball video sizes.
Consider setting the following CSS on the video element for which you're playing video:
object-fit: cover;
If you need to actually get the height/width, use the videoHeight and videoWidth properties of the video element.
Related
I have this movie that is in 4:3 ratio. The properties clearly say 1920x1440, however, what's puzzling me is the Video codec below. The actual played video indeed has dimensions of 1920x1440 as seen in the screenshot.
H.264/AVC 1920x1080 (4:3)
What does it mean and how is that possible?
What is the actual resolution of the media file?
There are several terms defining aspect ratios in a video stream like Pixel Aspect Ratio (PAR), Display Aspect Ratio (DAR), Storage Aspect Ratio (SAR).
And yes, video might encode non-square pixels, in which case you may see disparity as in your case, when physical resolution of the video has 1920x1080 dimensions (16:9 aspect ratio), but displayed at different proportions (4:3 in your case). I don't know why player (which one?) shows 1920x1440 - I guess it is an internal implementation detail of a particular video player stretching an input video into a larger resolution to show it with designed proportions; another video player would do this in a different way.
Non-square pixels were very common in DVD times due to limitations of hardware of that time. Nowadays, such video streams occur very rarely.
I've a brief question that I'm sure some AS3 genius knows.
I'm surprised I haven't seen any other topics on this after 30 minutes of Google-fu, StageVideo seems to be largely silent.
So I've been trying out the StageVideo API in place of traditional Videos for better video playback. This is for a Flash video streamer I am creating. While I'm quite certain the only videos I'll be using it for are 16:9, I'd like for it to be versatile enough to handle other aspect ratios. So for those other ratios, how do I center the video that's shown in the StageVideo object? I just want it to be letterboxed - no scaling, zooming, or cropping.
Changing the viewPort stretches the video to fit it, which is not what I want. And the videoHeight & videoWidth properties are read-only, so it's not like I can just change those to force the video to sit back. I read on the documentation that the video aligns to the stage's top-left, maybe I can change this?
Can I center videos in StageVideo? Is this not possible, and if so, must I use a regular Video object?
Thanks for any help you can give me
Can't believe I didn't see this - I just needed to change the start x & y of the Rectangle for the viewPort. Guess I forget how Rectangles worked briefly.
I'm developing a webgl application (a simple solar system) and everything looks fine on Chrome and Firefox on ONE monitor
But if I start eyefinity (three monitors each full hd + bezel compensation) the solarsystem is distorted in chrome.
In Firefox it looks correct and really nice:
http://kritten.org/pictures/firefox.jpg
In Chrome it looks like this:
http://kritten.org/pictures/chrome.jpg
It seems that the principal point (is this the right name?) is in the wrong location.
If I move forward in Firefox I actually move forward, but in Chrome I move to the right. So it keeps this distortion any time.
Are there any ideas what could be wrong?
The issue with Chrome is it's got a limit on the size a canvas can be. This is part of the WebGL spec although arguably Chrome should fix it. You can try to encourage them to fix it here.
The specific issue is that the WebGL spec says that even though you may ask for a canvas of a certain size WebGL might give you a smaller drawingbuffer. This was specifically because graphics cards have a size limit. Some are as low as 1024. Let's say some card has a limit of 2048. You've got one monitor that's 1280x1024. No problem.
You now add a second monitor for a total desktop space of 2560x1024. You now stretch a window across both monitors. You ask for a canvas of size 2560x1024. What should happen? WebGL can't make one that big, the GPU says it has a limit of 2048. So there were 3 option
Crash. That's no go
Force the canvas to stay under 2048
Let the canvas be stretched to 2560 but make the drawingbuffer the limit which is 2048 in this example
The WebGL committee picked #3 because it's the one least likely to cause problems. The worst that happens is you get a distorted image but the user can scale the window back down until things are normal so your webpage doesn't die.
Unfortunately 99.99% of WebGL programs ignore this feature of WebGL and so you get this distorted image when you run into that part of the spec.
In this particular case though the limit isn't in your GPU it's in Chrome. The proof is that it works in Firefox. Again you can try to encourage them to fix it here.
If you'd like to make your program work around it you need to look up what size the canvas's drawing buffer was actually made and use that in the correct places. You can find out but checking gl.drawingBufferWidth and gl.drawingBufferHeight
That means first set the camera aspect to the size the canvas is actually displayed. You really should always do this
aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
perspective = yourPerspectiveFunction(fov, aspect, zNear, zFar);
In three.js that would be
camera.aspect = renderer.domElement.clientWidth /
renderer.domElement.clientHeight;
camera.updateProjectionMatrix();
You should set your viewport to the size of the drawingbuffer
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawBufferHeight);
In three.js that would be
renderer.setViewport(0, 0, renderer.context.drawingBufferWidth,
renderer.context.drawingBufferHeight);
That should also always work.
If you're doing anything else related to the width and height of the canvas (picking, scissor, etc..) you'll need to do the appropriate math to convert from the size the canvas is being displayed to the size of its drawingbuffer
That will get rid of the distortion, of course since Chrome will actually only be creating a smaller drawingBuffer you'll get some scaling.
I'm looking at a site with a fullscreen video background on the home page. Now I'm using YTPlayer which pulls in a video from YouTube so they can do all the heavy lifting when it comes to buffering etc.
The problem I'm having is the video quality in Chrome is rubbish until it kicks up to the desired quality after quite a few seconds. It's perfect in IE, Safari and Firefox but the latest Chrome isn't playing ball.
Does anyone know how I can get Chrome to use the set quality from load rather than serving up this lower quality version straight away? (I'm open to other full screen video methods too).
Set video quality in YTplayer properties
Choose hd720, large, medium, or small. For example:
ytp.proxy.suggestedQuality = "hd720";
/* hd270: Sets video quality to 720p* HD video.
large: Sets video quality to 480p.
medium: Sets video quality to 320p.
small: Sets video quality to the 240p.*/
You can change the quality setting in line 47 of the javascript. also add add &hd=1 into line 34.
Still problem? jump to any of these plugins.
a.) http://dfcb.github.io/BigVideo.js/
b.) http://syddev.com/jquery.videoBG/
c.) http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2
I'm trying to build a very simple proof-of-concept for the guys I work for to demonstrate something for them. As of right now, I've got everything working, except that in my (obviously extremely crude) website, I'm trying to embed a video and FORCE the video to completely fill a certain size. The main problem that I'm facing is that if I try to embed a video with:
<video width="1920" height="1080">
then it increases the size of the video screen (though not to those actual dimensions - it stops at a much smaller size), but keeps the actual viewable video size at the original dimensions and just adds a lot of black space into the video player.
Clearly, this isn't the right way to do this. I know HTML is usually regarded as pretty easy, but this is literally the first webpage I've had to do, haha. Any help is greatly appreciated!
I found this # http://www.w3schools.com/html5/att_video_height.asp
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the height and width attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a page.
So guess you can't scale up a video with width and height tags. Just define it's dimensions so the browser can reserve space for it while loading a webpage.