I have a Lenovo tablet with Windows 8.1 with front and rear cameras.
The rear camera is IMX175 and should supports 3280*2464 pixels.
When I call setMode with those dimensions I never got them back (in Camera.width/height) but some lower numbers.
In IE (11) I get 1280*960
In Chrome I get 1920*1440
I tried to change the frame rate to several options, set the stage.quality to StageQuality.BEST.
Any help will be appreciated
There are several reasons between the cam-specifications, flash-player and browsers which affect the final maximal resolution. I dont think, you'll able to attach the full (foto)resolution of the IMX175 to a video-object...
In the past I wrote this script to detect the real possible resolutions of webcams in flash.
function testCams():void
{
var camNames:Array = Camera.names;
for (var i:int; i< camNames.length; i++)
{
var camName:String = camNames[i];
trace(camName,"\n================================");
var cam:Camera = Camera.getCamera(i.toString());
cam.setMode(8000,6000,1);
var camMaxWidth:Number = cam.width;
var camMaxHeight:Number = cam.width;
trace("Maxima w,h: ",camMaxWidth,camMaxHeight);
//4:3
cam.setMode(camMaxWidth,camMaxWidth/4*3, 100);
trace("Maximum 4:3 w,h: ",cam.width,cam.height);
//16:9
cam.setMode(camMaxWidth,camMaxWidth/16*9, 100);
trace("Maximum 16:9 w,h: ",cam.width,cam.height);
trace("Maximum fps: ",cam.fps);
}
}
testCams();
Test your cams and look what mode is possible. Greetings.
Related
I am doing a little scratch/reveal game based on the AlphaMaskFilter example:
http://createjs.com/demos/easeljs/AlphaMaskReveal.html
I want to detect that the the mask is completely gone, or use a threshold (90% scratched for example).
I read the doc on AlphaMaskFilter, shape and graphics objects and im not really sure how to achieve this.
Im not even sure i Have acess to the pixel information and check the alpha channel to detect it, but even so, I wonder if I will performance issue.
any help is welcome, thanks.
**** EDIT **** ADD TO THE ACCEPTED ANSWER ****
So, I was able to have the pct of transparency using the AlphaMapFilter (thanks Lanny).
The AlphaMapFilter offer you a mapping to the alpha channel of all the pixels.
Here is a little sample code that worked for me:
// mShapeToScratch is a createjs Shape. like in the http://createjs.com/demos/easeljs/AlphaMaskReveal.html example
var alphaMaskFilter = new createjs.AlphaMapFilter(mShapeToScratch.cacheCanvas);
var canvas = alphaMaskFilter.alphaMap;
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var alphaData = imgData.data;
var pixelTotal = rect.h*rect.w;
var transparentPixel = 0;
// rect.h is the height of the image and rect.w is the width not shown in the example
for (var y = 0; y < rect.h; ++y)
{
for (var x=0; x < rect.w; ++x)
{
var pixelIdx = (y*rect.w + x);
if(alphaData[pixelIdx] > 128) // transparent will be 255.
{
transparentPixel++;
}
}
console.log("transparent % = " + transparentPixel/pixelTotal);
This example checks all the pixels, but it's pretty easy to check one every X pixels to speeds up checks as Lanny suggested.
The alpha mask uses canvas composite operation, and not pixel access, so without some completely custom approach, there isn't a great way to do this.
Iterating pixels (check out AlphaMapFilter as an example) would work - but could be fairly slow. Maybe checking every 4th, 10th, or 25th pixel would speed it up.
Cheers.
PROBLEM
I am trying to get an image on a canvas to move from left to right smoothly. It's not too bad on Chrome/Safari (still stutters a little), but there is noticeable stutter in Firefox on multiple machines (tried on Windows and Mac). I'm a bit stumped as to how to solve this.
WHAT I TRIED
I am using requestAnimationFrame instead of setTimeout. I am using clearRect instead of setting the canvas width, though I am clearing the entire canvas instead of the minimum bounding box as I wanted to test it in the worst case scenario. I did close extra tabs. I even disabled Firebug. I am using drawImage instead of the image data functions. Since I'm not doing anything else but clearRect and drawImage, I avoided using an offscreen canvas.
EXAMPLE 1: http://jsfiddle.net/QkvYs/
This one has a set framerate where it ensures that the position is correct regardless of how often the game loop runs. It displays the number of frames skipped. This example is closer to what I'm aiming for. Note that it looks choppy even when no frames are being skipped. I have also played around with the framerate with no success, though I'd like to aim for about 30 fps (var frameRate = 33;).
EXAMPLE 2: http://jsfiddle.net/R8sEV/
Here is a simple one where all it does is move the image. This stutters for me on multiple machines.
//loop
function loop() {
//request anim frame
requestAnimationFrame(loop);
//set canvas once able
if (!canvas) {
var temp = document.getElementById("testCanvas");
if (temp) {
canvas = temp;
ctx = canvas.getContext('2d');
}
}
//update and render if able
if (canvas) {
//increase x
x += 5;
//start from beginning
if (x > canvas.width) {
x = 0;
}
//clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
//image
ctx.drawImage(image, x, 200);
}
}
//start
loop();
WHAT I LOOKED AT
I realize that this question has been asked before and I did look before asking. However, the answers given have unfortunately not helped.
https://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance
HTML5 Canvas Animation Has Occasional Jitter / Hesitation / Stutter
Canvas animation stutters in FireFox but is perfect in Chrome
Is there a solution for HTML5 canvas animation stutter?
Thanks for the help! I appreciate it.
For instance use time delta in your position calculations. This will ensure that object is moved by certain value in given time regardless of FPS and delay between frames.
Edited your fiddle:
http://jsfiddle.net/R8sEV/2/
wrong approach:
x += 5
good approach:
x += speed * delta / 1000
where delta is time in [ms] which passed from last frame - and speed is measured in [pixels/second]
You are getting the element every frame?!
That can cause a lot of lag.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
function loop() {
requestAnimationFrame(loop);
x += 5;
ctx.drawImage(IMAGE, x, 0);
}
loop();
My company is looking to play Hollywood Squares for next year's Christmas party, and rather than build an entire 3x3 rig for people to sit in, I proposed that I just create a Flash presentation that broadcast 9 webcams to 9 people sitting safely on the ground.
Can anyone guide me to a tutorial on how to hook this up in AS2 or AS3, preferably AS2 since I'm not as well versed in AS3 as I would like to be.
Thanks in advance
Well, in AS3, this is how it should work in theory, however since I only have one camera connected I cant test this myself. Also, people around the interwebs seem to be having some problems with this. Bear in mind that using this many cameras is likely to grind your application to a halt.
var totalRows:int = 3;
var totalCols:int = 3;
var videoWidth:int = this.stage.stageWidth / totalCols;
var videoHeight:int = this.stage.stageHeight / totalRows;
for (var i:int = 0; i < Math.min(Camera.names.length, totalRows * totalCols); i++) {
var currRow:int = Math.floor(i / totalCols);
var currCol:int = i % totalCols;
var video:Video = new Video(videoWidth, videoHeight);
var cam:Camera = Camera.getCamera(i.toString());
if (cam) {
cam.setMode(videoWidth, videoHeight, 30);
video.attachCamera(cam);
video.x = currCol * videoWidth;
video.y = currRow * videoHeight;
this.addChild(video);
}
}
This answer assumes you want to connect all cameras to one computer. Another way to go about this is to hook each camera up to a separate computer and feed the camera streams to a tenth computer for display.
I am using ActionScript 3.0 to capture image from users webcam ,It is working fine , however the problem is that the size of image is too big for my liking . Can I make it small , I tried changing coordinates of Bitmap Data.
Can anybody suggest me the solution.
Thanks
When you capture the webcam you have to provide a matrix. This matrix can handle a rescaling.
var output:BitmapData = new BitmapData(camera.width * scaleFactor, camera.height * scaleFactor, false);
var matrix:Matrix = new Matrix();
matrix.scale(scaleFactor, scaleFactor);
output.draw(camera, matrix, null, null, null, true);
Sometimes the smoothing of this method is not really satisfying. A solution would be to use an intermediate:
var capture:BitmapData = new BitmapData(camera.width, camera.height, false);
capture.draw(camera);
//or with a newer compiler
//camera.drawToBitmapData(capture);
var intermediate:Bitmap = new Bitmap(capture);
intermediate.scaleX = intermediate.scaleY = scaleFactor;
output.draw(intermediate);
capture.dispose();
Prefer the first method if you are okay with the smoothing.
I have loaded some images through XML and attached into dynamically created MovieClips named mc0,mc1,mc2...etc.
_loader.removeEventListener(ProgressEvent.PROGRESS, onLoadingAction);
count++;
var img:Bitmap = Bitmap(e.target.content);
img.cacheAsBitmap = true;
img.smoothing = true;
img.alpha = 0;
TweenLite.to(MovieClip(my_mc.getChildByName("mc"+count)).addChild(img),1, {alpha:1,ease:Quint.easeIn});
and within ENTER_FRAME handler
for (i=0; i < mc.numChildren; i++)
{
my_mc.getChildAt(i).x -= Math.round((mouseX-stage.stageWidth/2)*.006);
}
Everthing works fine. But it is shaking so that it was not looking good.
How do I achieve smooth movement?
One solution I've used is to round the (x,y) position to the closest integer. No matter that you've added smoothing to your bitmap and cached it, rounding could make it feel less choppy and way smoother.
Another thing you need to be careful is the dimensions of the images. Images that have an odd dimension won't be smoothed the same way as images with even dimensions. Check how to workaround this in my blog post Flash Smoothing Issue.
Since Flash has a variable frame rate (in the sense that it will drop frames), one shouldn't depend on the entering of a frame as a unit of action. Rather, it would be wiser to calculate the elapsed time explicitly.
For instance, in the enter frame handler:
var currentTime:Number = (new Date()).time;
for (i=0; i < mc.numChildren; i++)
{
my_mc.getChildAt(i).x -= speed * (currentTime - lastTime); // speed is in px/ms
}
lastTime = currentTime;
where you have the variable lastTime declared somewhere in a persistent scope:
var lastTime:Number = (new Date()).time;
I don't know if this addresses what you are calling "shaking", but it's at least something to consider.