How to record the screen application in flex (Fms)? - apache-flex

"Hi!
I have an application with webcam, chat and more, and i need to record the screen aplication in server, for the client not have to upload the result.
Can some one help me?
Thanks"
What I want is to know how to record the images shown in the Flex application (only inside the swf).

Check out the same question over at Can Flex/Flash Record the Screen?, however I disagree with them. You can render the contents of a movieclip into a bitmap image. The stage is one such object you can render, therefore theoretically you could constantly be rendering these into sequential bitmaps, but you would need some alchemy like encoder to get around the performance hit.
By far the easiest way to go is to record the mouse movements, click actions, or use a insanely well build command pattern to re-recreate the experience elsewhere.
Google as3 command pattern. Good luck!

Related

Streaming audio in A-frame

I am building a multi-user experience in A-frame using NAF, and I have some positional audio containing music tracks in different points of the scene. I'm trying to figure out if it's possible to make it that the music is listened simultaneously by all the connected users. It is very important that they are positional, since I need several audio sources in the scene. At the moment, the tracks start when you enter the experience, so each person hears them from the start when they access the scene. This is the file that I'm using right now: https://glitch.com/~indigo-roomy-supermarket
I tried with the broadcast-component, but didn't manage. I thought of trying a workaround using a stream of twitch and hiding the video, trying to project it to a primitive, but also doesn't work so far (just managed to attach it to a div over the scene, I can hide the video but the audio would never be positional). Here the file where I tried it (not networked, but it should be the same): https://glitch.com/~twitchtest-01 I know that there's the option of connecting vimeo to a-frame using this: https://github.com/vimeo/aframe-vimeo-component but the audio itself is not positional, so it doesn't really solve my problem (also, I don't know if it would work with vimeo live).
If somebody knows a way to do this, I would greatly appreciate if you can share your wisdom. Thanks a lot!
I don't think that's easy.
Assuming you have streaming audio servers at your disposal like this then the way I would approach this, is:
fetch an audio stream and once the download returns, get the source buffer
override the source buffer of your positional audio element (something like this.el.getObject3D('sound').children[0].source.buffer) with the newly created audio buffer.
This might work.
If it doesn't, then create you own audio element component by using positional ThreeJS sound directly with setMediaStreamSource.
My assessment would be that this takes several days just to prototype alone. Having said that, I am pretty sure it's doable.

Is it possible to attach one NetStream to several videoDisplays?

I'm working on simple videochat app with Adobe FMS 4.5. Everything works fine except one thing: I have small videoDisplay for each connected client and one main display. So user can choose his main interlocutor. When i'm trying to attach netStream to main display from small one, streaming on small one stops. Is there way to play one netStream to several displays at the same time?
From what I recall, you can only attach one NetStream object at a time. There is a solution possible, however, I would like for you to rethink about your UX because you have "duplicate information" being shown (a large display, and a small display, with the same data) and you're using more space than needed as well. From a design standpoint, this isn't very logical and I would recommend that you only have one working at a time while "removing" the small one when the large one is active.
However, if you're hard set in your ways, you could simply duplicate the bitmap information over from the large one to the small one (to prevent loss of resolution from doing it the other way around. You'll have to research this part and figure it how it can work with your system, but it's a fairly simple concept: you take a 'screenshot' (the pixels of the current video) and use that data to be displayed somewhere else.

How can I get a smooth text crawl using Flex?

I'm working on a standalone Flash application (written using Flex 3/ActionScript 3) that features a text crawl, like what you might see at the bottom of your TV when watching a cable news channel; it's a long narrow box that text moves across from right to left.
I've implemented it by creating a Label element, populating it with text, and then moving it using a mx:Move object with a Linear.easeNone easing function. It works, but it has ample room for improvement. It looks a bit jerky, and tends to have a fair amount of "tearing" (the top and bottom halves of the text sometimes fall out of sync).
I tried throwing math at the problem to get the crawl's movement rate synced with the monitor's refresh rate, but that was a bust. I found out the hard way that the app's frame rate jumps around too much; the "optimized" crawl varied between looking silky smooth and like it had epilepsy.
Is there anything else folks would recommend I try to smooth this thing out? Is there some alternate design you'd recommend I try?
Edit: Some context: the crawl is part of a digital signage application (played from a standalone Flash projector -- no web browser) that does stuff elsewhere on the screen, including video playback and rendering text and images. It definitely gets choppier during video playback, but it's never as smooth as I'd like it to be.
There are two potential solutions to this problem, but both have caveats, the first because of your use of Flex and a standalone projector, the second because it is a mitigator, not a complete solution.
Hardware Acceleration
When publishing your file, you can attempt to have Flash utilize hardware acceleration to alleviate the vertical refresh issue you are running into that is causing tearing. Sadly, Flex Builder 3 is incapable of enabling this setting at the SWF (projector) level (Link to bug). This has yet to be resolved and has been pushed from 4.0 to 4.1 to 4.x... If and when it is resolved, it will likely be a compiler argument in the project settings of Flash Builder 4.
You may be able to determine if this solution works for you by outputting your projector as a standard SWF and embedding it on an HTML document with the wmode set to "direct" or "gpu". Sadly, if it does (it should), you can't use it right now anyway. If you have Flash Builder 4, certain projects are capable of making round trips between FB4 and Flash Professional CS5, though I am not sure what the criteria for that is (my current AIR project has all the project modification menu options grayed out). If you do manage to get your project into Flash, you can enable hardware acceleration in the Publish Settings of the project (File->Publish Settings->Flash tab->Hardware Acceleration option in CS5).
This method is almost a certain solution for your problem, though it has two issues, one already highlighted above, and (for people publishing for the web) that by utilizing direct or GPU rendering on a webpage, you are unable to layer any DOM elements on top of flash.
direct: This mode tries to use the fastest path to screen, or direct path if you will. In most cases it will ignore whatever the browser would want to do to have things like overlapping HTML menus or such work. A typical use case for this mode is video playback. On Windows this mode is using DirectDraw or Direct3D on Vista, on OSX and Linux we are using OpenGL. Fidelity should not be affected when you use this mode.
gpu: This is fully fledged compositing (+some extras) using some functionality of the graphics card. Think of it being similar to what OSX and Vista do for their desktop managers, the content of windows (in flash language that means movie clips) is still rendered using software, but the result is composited using hardware. When possible we also scale video natively in the card. More and more parts of our software rasterizer might move to the GPU over the next few Flash Player versions, this is just a start. On Windows this mode uses Direct3D, on OSX and Linux we are using OpenGL.
**Source*
Direct is the ideal option for this situation, as you can actually have performance degredation with "gpu" as well as visual differences from graphics card to graphics card.
Lower your framerate
The Flash player will continue to play video at its native refresh rate independent of the rest of your project as long as you keep the framerate at or above approximately 2FPS (though I suggest 5FPS minimum). You won't want to run that low for this example, but you are able to lower the framerate of the entire scene without impacting video performance. The closer your framerate is to the screen refresh rate, the more apt you are to actually create the tearing effect unless you are able to absolutely sync with the monitor's refresh rate, which you probably cannot do without the above... Hardware Acceleration.
This problem has existed in the Flash Player for as long as it has been able to move objects horizontally. What happens is that Flash updates a buffered snapshot of the running animation at the same time that the screen is refreshing. If the buffered snapshot changes partway through a screen refresh, you get a tear. This is why lowering the framerate actually reduces the amount of tearing, you are refreshing the buffer less frequently.
As #Tegeril mentioned, using Flex is one of the reasons. Flex is a pretty heavy framework and it does a lot of things behind the scenes. If you're familiar with the life cycle of a component(especially invalidating properties, invalidating the display list, etc.).
As a few minor things that might improve performance:
try to keep a simple display list. If you know the app will always be displayed at one size, then flex won't waste time traversing the display list/tree up to the top and back for measurements. Also, try to use a Canvas. I know, it's not very clean, but since it uses absolute values and doesn't check with the 'parents' much, it should be faster than other containers(like HBox,VBox, etc.)
try to display the video at it's full size(make sure the encoded video dimensions are right so there be any CPU cycles on resizing video
Ok, this was Flex stuff.
It might be very handy to read sencular's article on Asynchronous ActionScript Execution which explains how Flash Player handles updates and renders.
(source: senocular.com)
Frames both execute ActionScript and render the screen
(source: senocular.com)
ActionScript taking a long time to complete delays rendering
I imagine the jerkiness is related to this. Also, I'm guessing you might
get moments of smooth movement then sudden halts, every now and then, when
Flash Player catches it's breath(Garbage Collector cleans up)
Victor Drâmbă article on “Multithreading” in Actionscript might also
be useful.
Soo, to recap:
use Profiler or something and see if the Flex framework is slowing you down, or where the 'bottleneck' is
improve as much as you can on that side then check if it's how Flash Player handles all the actionscript('elastic' frames)
If the bottleneck comes from the Flex framework, worst case, you
can try to minimise the number of components that traverse the display list,
and use pure actionscript for the other things(as #PatrickS suggested, use TweenLite, etc.)
If it helps, try to preload data(fetch rss feed and all that) at the start, and when you've got most of the important bits that don't require 'refreshes'/loads frequently, display the app. You will use more memory, but will have more cpu cycles to spare for other tasks.
Also, if it's display objects that are the 'bottleneck' and there's plenty of them, check if you can reuse them using Object Pools.
HTH
TweenMax or even TweenLite ( http://www.greensock.com )handles this sort of job pretty well. What else is your app doing while the text is scrolling though? Is it possible that some other processes are interfering?
This may not be helpful, but have you considered putting the crawling text into the html DOM and using CSS transitions to crawl the text. Obviously there's the IE problem, but it should be supported in IE9 and you could use javascript as a fallback.
This may seem silly, but CSS transitions are getting hardware acceleration and separate processes for plugins meaning on a multicore machine you could get parallel threads.
One thing you might consider is to move your label incrementally using a Timer instead of an easing function. That way you can take advantage of the updateAfterEvent method to get smoother rendering. Here's a link to an article/video from Chet Haase (Adobe's Flex graphics dude) that explains usage along with an example app with code:
http://graphics-geek.blogspot.com/2010/04/video-event-performance-in-flex.html
Hope that helps.

.NET : How to Create thumbnail from flash

Is there any way where i can create a thumbnail image from a flash movie file(flv /swf) [NOT FROM A VIDEO File ] in ASP.NET ? Any samples of implementation ?
you can use ffmpeg to create thumbnails of the flash video
For .flv you can use ffmpeg to convert parts of the video (e.g. one frame) into an image (sequence)
I've used it as command-line application by calling Process.Start(), but there is at least one wrapper for .NET (I haven't tested it myself):
http://www.codeplex.com/ffmpegdotnet
For .swf I don't know any way to achieve this without some Adobe tool.
for flv it can be done easily, as others mentioned ...
for swf, it depends HIGHLY on the swf ... if the swfs visual appearence is determined by code, there is no other way than to embed a flash player in you app and either let the flash player make the snapshots, encode them as JPEG/PNG, and send them somewhere using TCP or LocalConnection (a flash<->flash communication connection, which can be used with C# as well) or try to somehow grab its output buffer yourself ... the first possibility should be no more than 10-20 lines of actionscript code ... don't know about the latter ...
other than that, you might use an external command line converter ... there are a few floating around the web ...
greetz
back2dos
Take a look at this article, it should point you in the right direction. It uses SharpFFmpeg to extract thumbnail images from movie clips from a variety of formats.
the only way to get an image, is to use a full flash client that starts playing and allows you to capture the first frame.
I would take a close look at flirt (they actually have an example that renders pngs)
Maybe some of the other flash libraries may be of help ( swfdec gnash swift tools gplflash)
Gnash is probably the best choice since its the most mature project out there, but i do not know how easy it is to integrate into command line tools or into your own projects.
We have been working on this in my company, and we got a proof of concept working pretty fast (but the project we made it for is on hold right now). I am not able to share the code, but I can give you some pointers.
It is not pure ASP.NET, but maybe you can still use it. We made a windows service that can be called from ASP.NET.
Basicly you install the flash plugin on the server, the windows services can then simply open the swf through the swf ActiveX component and then you can grap a picture of the whole thing. It works pretty well, notice that you do not have to actually render the ActiveX component on screen to capture the picture.
Check out this post. It does not tell you everything but I guess it provides the ground work required for it. You probably have to figure out how to get the object tag out of the flash-html you are trying to download from a web page. After that you'd have to figure out when to capture the frames. Its a long ride however. You don't need the asp.net part. Just concentrate on the windows project part. Hope this helps. :)

Showing a form from a webpage

I have a problem I am trying to solve in an elegant manner. I have a .net application that I have created. I am trying to get one of the forms to be shown from a webpage. This sounds strange I'll admit, so here is the backstory
We have some large monitors at work, that show information on them. I have no control over how the information is displayed. Currently they are just using a browser and tabbing in the browser to show each different piece of information on the screen. Most of the info they show is just standard html stuff, text and images.
Now along comes my winforms application. The part of the application I need to show is a graphical display. Everything on this display is drawn using GDI+, if that matters. I need to get this form into a format that I can show. Below is my own solution, but I am pretty sure this is not the best method, but it may be the only method I can use
Create a console application. The application would do the following
1. Run as a service on a server
2. Create the display in memory, and save it to a bitmap every so ofter
3. Save the bitmap to a location on the network.
4. have an HTML file that links the image that can be shown in the browser
I though about doing something with the clients, however the clients are not always up, so I could have periods where the image wouldnt be updated.
I also was thinking about an ASP.net solution, but that would require me to learn ASP.net, and I am not quite ready to take that challenge
In IE you can host a winforms app/control as an ActiveX control, like so:
<object id="DateTimePicker" height="31" width="177"
classid="bin/Web.Controls.DateTime.dll#Web.Controls.DateTime.DateTimePicker" VIEWASTEXT>
</object>
See this article for more information: http://www.codeproject.com/KB/miscctrl/htmlwincontrol.aspx
Now, I'm not claiming that this is any more elegant than your solution, but it is an alternative.
I think using Asp.Net to serve a dynamic image using a HttpHandler would be the best approach, but depending on your skills and time this may not be an option. Here is a nice tutorial: http://www.codeguru.com/columns/dotnet/article.php/c11013
IMHO The best way to build this would be as a browser plug-in, like how Flash works. Microsoft has created a plug-in framework called SpicIE, that allows you develop managed plug-ins for IE. This is probably your best bet.
The old unmanaged way is to build out your WinForms dll app and then package it in a signed cab file, and then reference that cab file with an HTML object tag (codebase arg is the one you need).
i.e.,
document.write("<object CLASSID='clsid:DC187740-46A9-11D5-A815-00B0D0428C0C' CODEBASE='/MyFormsApp/MyFormsApp.cab#Version=1,00,0000' />");
The first time the user hits the page they will be asked to allow for the installer to load its payload (dll's). Once they do, they will have a fully fledged WinForms desktop APP running through a browser window.
I took the easy route on this one. I created a small winform app, that coverts the GDI objects to a bitmap, and then I save the bitmap to a network share. This file is refenced in a simple HTML file that is displayed on the monitor.
I chose the winform app, because it makes it really easy for me to set this up in task manager, and run it every 10 minutes to update.

Resources