I have a webcam capturing video at a certain resolution, but I want to display it at a lower resolution for preview purposes.
When I scale the video down using another another video object set at this lower res, the image quality seems to be quite bad.
What is the best way of doing this?
On the video object set
video.smoothing = true;
set smoothing to true and change the scaleX and scaleY properties.
myVideo.smoothing = true;
myVideo.scaleX = myVideo.scaleY = 0.5;
Related
I have a project that needs to be made in Animate CC using ActionScript3.
The situation is that I have to make resolution options, meaning that if I select a button it will change the resolution of my project to said resolution like 800x600 etc. Like video games you know.
i've tried using
res1.addEventListener(MouseEvent.CLICK, setRes1);
function setRes1(event:MouseEvent):void
{
stage.fullScreenSourceRect = new Rectangle(0, 0, 800, 600);
stage.displayState = StageDisplayState.FULL_SCREEN;
}
But it doesn't seem to work, is there even a way to do this?
Not using the Flash Player, but If you target AIR yes you can do it accessing the properties of NativeWindow. Stage.fullScreenSourceRect is read-only. But you can modify application size accessing NativeApplication.nativeApplication.nativeWindow.width = ...; This will not modify your pc screen resolution, but only resize the application window. You can change resolution in AIR though using the ScreenMode class. Detailed working is described here: https://helpx.adobe.com/flash-player/release-note/fp_31_air_31_release_notes.html#ScreenModeConfigurationforAIRDesktop
I'm building a mixed interaction AS3/AIR application. Some of my scenes use the regular CPU rendered display classes (flash.display.Sprite, flash.display.MovieClip) and another high-density graphics mode uses Starling. I can switch between and use these happily, and I can switch between windowed mode at 720p to fullscreen mode just fine.
However, I just added a StageWebView to easily add some HTML based content, and I'm having trouble with resize. If I don't call "new Starling()" then the StageWebView instance will correctly resize to maintain the same relative screen dimensions when I switch from windowed to FullScreen. However, as soon as I create a Starling instance, the StageWebView will not correctly resize on fullscreen; it retains the absolute dimensions originally specified. If I don't instantiate Starling, the StageWebView resizes perfectly.
Do I need an event handler for Event.RESIZE to specifically adjust the viewPort member of the StageWebView object? How do I get the correct relative dimensions from the original fixed windowed size? (I tried looking at stage width/height and the numbers were oddly large, with AIR failing to build a new Rectangle correctly).
I would appreciate any sample code for anyone who has solved this problem. Thanks.
Okay, fixed this. While without Starling, the regular Flash Renderer will handle resizing the StageWebView class correctly, with Starling, we must handle our own resize events.
Thus, in the onAddedToStage method (which is itself a handler for Event.ADDED_TO_STAGE) of my Sprite-derived container class, I add this:
addEventListener(Event.RESIZE, onResize);
And then have this function:
private function onResize(e:Event):void
{
var origH:Number = 720;
var origW:Number = 1280;
var baseRect:Rectangle = new Rectangle(40,40, 1200, 640);
var newX:Number = baseRect.x * stage.stageWidth / origW;
var newY:Number = baseRect.y * stage.stageHeight / origH;
var newW:Number = baseRect.width * stage.stageWidth / origW;
var newH:Number = baseRect.height * stage.stageHeight / origH;
m_webView.viewPort = new Rectangle(newX,newY,newW,newH);
}
Of course, I shouldn't hardcode the 720 and 1280, nor the base size of the viewPort, but you get the idea.
I am creating my first game in HTML 5 for mobile.
I'm just using the library "Easeljs-0.7.0", nothing PhoneGap.
I made my images to canvas 2024x1024 pixels, then each image by setting the scaleX and scaleY. However when the scale is less than 0.5 makes all images with poor quality.
How to solve this?
var test = new createjs.Bitmap("test.png");
test.scaleX = 0.23456;
test.scaleY = 0.23456;
APP.stage.addChild(test);
APP.stage.update();
Unfortunately this is how Canvas renders the bitmap, and its not something that can be controlled by JavaScript. It is possible to get some results in various browsers using the `context.imageSmoothingEnabled' property, but currently it requires vendor prefixes. Check out this thread:
Canvas Image Smoothing
To do this with EaselJS, you need to get the canvas context, which is not currently available without manually accessing it:
var context = myStage.canvas.getContext("2d");
context.webkitImageSmoothingEnabled = context.mozImageSmoothingEnabled = true;
I've built an AIR application with flash/as3 that has a webcam display on the stage. While building the app, and in all my tests everything looks and works just dandy, but when I publish for AIR the image gets stretched. The bounds of the image seem to stay the same, but the actual cam output is what's distorted. Has anyone come into this problem before?
I should add, this is a desktop app, which is permanently installed on one machine, so device compatibility should not be an issue.
this is the camera setup:
var cam:Camera = Camera.getCamera();
cam.setMode(280,380,20);
var video:Video = new Video(380,380);
this is where i first call the camera...
video.attachCamera(cam);
video.x = 355;
video.scaleX = -1;
video.y = -100;
addChildAt(video, 0);
the reason for the odd sizing, is that it sits behind a frame, that changes positions throughout the interactive.
Not necessarily the answer you are looking for, but you should keep this in mind:
You are asking the camera to capture at the resolution of 280 x 380, which is not a standard 4:3 aspect ratio.
When you call cam.setMode(280,380,20); the docs say that Flash will try to set the cameras resolution to your specifications, and if the camera does not support that resolution it will try to find one that matches. So you may or may not be getting this actual resolution.
setMode() has a fourth parameter, which can disable this functionality. Read the docs on that so you understand the implications :)
Then you display the video in a Video object that is 380x380. So I would expect the image to be stretched in the horizontal direction (b/c the original source is only 280).
It's not clear why this behaves differently: are you saying that running the debug version of the app works, but when you export the release build and run that it looks funky?
Finally, what is scaleX = -1 doing? I recall this as some sort of nifty trick I used in the past... but it's purpose here is escaping me :)
Yep, source code would be cool. Btw, i suggest you, as soon as you get the video streaming running, to set by hand the video.width and video.height property.
This will force the cam to display at the correct size.
I'm trying to make an instance of FLVPlayBack run in fullscreen, without affecting the rest of the application.
According to stuff I've read, I have set the players scale mode so it will fit the window when its scaled up.
flvPlayer.scaleMode = "exactFit";
And in order to stop the stage from scaling up I've also set the stage's scale mode too.
stage.scaleMode = "noScale";
Then in order to try and control what the video player does when I click the fullscreen button, I also use the fullScreenTakeOver setting on the player.
If I set the code like to 'false'
flvPlayer.fullScreenTakeOver = false;
Then the whole interface becomes fullscreen, with the stage positioned in the centre of the window, I guess this is because I set the stage not to scale. The video stays its normal size and carries on doing what it was doing. Exiting fullscreen shrinks the stage back to normal.
If, on the other hand I set it to 'true'
flvPlayer.fullScreenTakeOver = true;
Then the video takes over the screen, but it doesn't scale up, instead it positions the video in the middle of the page, and the clickable areas of the controls move to where they would be if the video was full size, leaving my guessing where the buttons should be.
In both cases the video carries on running fine.
Can anyone help me with the right combination of settings? I want the application to stay its windowed size and the fly player to scale to fit fullscreen by itself.
Thanks.
There is a property in flvplayback named fullScreenTakeOver which is set by true by default. this will interfere with fullscreen really bad. if you want to apply fullscreen without changing logic of your stage you better set this as false after instantiation. this will decrease your troubles a lot
You'll want to set a few settings which some you've already done
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
flvPlayer.fullScreenTakeOver = false;
Now when you enter full screen your application stuff will positioned top left. You will want to make an event listener for full screen mode.
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
In that event is where you will handle resizing and moving the video (Also hiding other objects on the stage if need be)
function fullScreenHandler(e:FullScreenEvent):void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
// Setup NORMAL Layout
// resize and reposition the flvPlayer
}
else
{
// Setup FULL_SCREEN Layout
// move the flvPlayer to x:0 and y:0
// set the flvPlayer width and height to stage.stageWidth and stage.stageHeight
}
}