Author: James Duy Trinh (duy.trinh@fix8.com)

toiletquietInternet and Web Development

Dec 5, 2013 (3 years and 10 months ago)

220 views

Author: James Duy Trinh (duy.trinh@fix8.com)


Table of Contents

Part 1:

Flex Documentation

................................
................................
................................
......................

2

Part 2:

Debug flash files by Flash Player

................................
................................
................................
...

3

Part 3:

WebCam in Flash
................................
................................
................................
...........................

3

Record Video From Webcam and Post To Drupal (With Source Code)

................................
....................

3

Capture frames f
rom camera and display on GUI

................................
................................
....................

4

Part 4:

Send Bitmap to server

................................
................................
................................
...................

4

Part 5:

Webcam motion tracking [2]

................................
................................
................................
........

5

Part 6:

RED5

................................
................................
................................
................................
..............

5

Part 7:

Working with video

................................
................................
................................
.......................

5

Part 8:

Dynamic streaming

................................
................................
................................
.......................

5

Part 9:

Draw 2D/3D

................................
................................
................................
................................
..

6

Part 10:

Facial Detection

................................
................................
................................
.........................

6

Part 11:

OpenMeetings

................................
................................
................................
...........................

7

Reference

................................
................................
................................
................................
......................

8



Author: James Duy Trinh (duy.trinh@fix8.com)


Part 1:

Flex Documentation

Flex documentation, including Release Notes, is available for download at the
Flex
Documentation Resource Center
. Documentation is also available online in the LiveDocs format.

Adobe Flex 3
Installation and
Overview

Provides instructions on installing and configuring Adobe Flex Builder 3.
It also provides an introduction to the Ado
be Flex product line and
includes a tutorial to help you get started.

Getting Started
with Flex

Online document available from the Flex Start Page in the Flex Builder
IDE and also from the
Adobe Learning Center
. Getting Started with Flex
is for application developers who are new to the Flex product line and
require an overview of Flex features and capabilities. It includes tutorials
highlighting the capabilities of Flex, and provides
sample Flex
Application projects that you can download, open, and run in Flex
Builder.

Adobe Flex 3
Developer Guide

Describes application development basics, such as MXML and
ActionScript syntax, creating applications, using Flex components, the
Flex data

model, error handling, Adobe LiveCycle Data Services ES, and
Flex Advanced Data Visualization Components.

Adobe Flex Data
Visualization
Developer Guide

Describes how to use data visualization tools and Flex charting
components to enhance Adobe Flex appli
cations. This document also
includes chapters on using the automation framework and automation API
to enable automated testing, gather metrics, and perform other automated
tasks.

Building and
Deploying Adobe
Flex 3 Applications

Describes the tasks you per
form when analyzing, designing, building, and
deploying a Flex 3 application.

Creating and
Extending Adobe
Flex 3 Components

Provides instructions on creating, using, and extending components.

Programming
ActionScript 3.0

Provides concepts and usage info
rmation for ActionScript 3.0.

Adobe Flex
Language
Reference

Describes the Flex 3 and
ActionScript 3.0 MXML

and ActionScript
programming interfaces, including the API reference for core ActionScript
language elements (HTML
-
only).

Author: James Duy Trinh (duy.trinh@fix8.com)


Part 2:

Debug flash files by Flas
h Player

Download the Windows Flash Player 10 Projector content debugger (EXE, 4.95 MB)

at
here

In Flex, press F11 to debug


Part 3:

WebCam in Flash

[1]

T
here are some viewable demos, but you will need
a web cam to interact with them
:


http://i
ncomplet.gskinner.com/index2.html#fluiddynamics


http://www.playdocam.com/


Here's a record from Adobe:

http://blogs.adobe.
com/mikepotter/20..._video_fr.html


Try this as a resource, he has a lot of cool experiments with webcam/flash:

http://incomplet.gskinner.com/index2.html#camgoo

http://www.gskinner.com/blog/archive..._code_ima.html

(source code)


Record Video From Webcam and Post To Drupal (With
Source Code)

For my talk to the Boston PHP user group
last week, I built on
Chritophe's sample

that showed recording
video from a webcam, and then publishing that to a
Drupal

based blog.
Here is the code (MXML
Format). To get this running, you'll need a copy of
Flash Media Server

(
free developer version available
)
and a working webcam (I'm not really into error checking :) ). Once you download and install Flash
Media Server, in C:
\
Program Files
\
Macromedia
\
Flash Media Server 2
\
applications
\
, create a directory
called flex_videoco
nference. A few things to note:

In the source, you'll see:


nc = new NetConnection();

nc.objectEncoding = flash.net.ObjectEncoding.AMF0;

nc.connect( "rtmp:/flex_videoconference");


You need the line ...=flash.net.ObjectEncoding.AMF0 because FMS doesn't do
AMF3. The line
nc.connect("rtmp:/flex_videoconference"); is equivalent to
Author: James Duy Trinh (duy.trinh@fix8.com)


nc.connect("rtmp://localhost/flex_videoconference"); so if you're connecting to a remote server, you'll
want to change localhost, obviously.

The line nsPublish.publish("christophe",
"record"); tells FMS to record the stream so you can play it
back. Valid values are "record", "append", and "live". The default value is "live". (Lookup NetStream in
the Flex help for more information).

Nearly everything works in the publishing method, but

I can't figure out how to properly encode the
HTML string being sent to Drupal so that it will display the movie properly. I have also created a
MediaPlayer.swf video player and put that in my Drupal theme directory, but because I can't get the
encoding w
orking properly, then it doesn't matter. If you have knowledge of the BlogAPI for Drupal,
please help!

Regardless, even if you don't use it, you've got a way to record video to Flash Media Server and then to
play it back in a simple example.

Capture frames

from camera and display on GUI


private

var

g_bmpDataResult:

BitmapData;


private

var

g_bmpResult:


Bitmap;

private

var

g_mtxResult:


Matrix;


// J: Create bitmap to display on GUI





g_bmpDataResult =
new

BitmapData( ctrlVDResult.width,
ctrlVDRes
ult.height,
true
, 0 );

g_mtxResult =
new

Matrix();


g_mtxResult.scale(ctrlVDResult.width/camW, ctrlVDResult.height/camH);


ctrlVDCamera.width = ctrlVDResult.width;


ctrlVDCamera.height = ctrlVDResult.height;


g_bmpResult =
new

Bitmap( g_bmpDataResult );


c
trlVDResult.addChild(g_bmpResult);


// J: Hook to capture frames from camera


addEventListener( Event.ENTER_FRAME, trackFrame );


private

function

trackFrame(e:Event):
void


{



g_bmpDataResult.draw(ctrlVDCamera, g_mtxResult);




}

Part 4:

Send Bitmap to server

See

code at here

http://www.flash
-
db.com/Tutorials/snapshot/


Author: James Duy Trinh (duy.trinh@fix8.com)


Part 5:

Webcam motion tracking
[2]

MotionTracker source code (AS2 & AS3)

at
blog




Part 6:

RED5

Red5 = Apache + Flash media server (can run jsp and php)
. This is
opensource.


http://osflash.org/red5

(download at here)

http://www.red5videochat.com/

(video chat, send drawing )


Part 7:

W
orking with video

http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Video_18.html

(capture
camera input)

http://sunil
-
gupta.b
logspot.com/search?q=whiteboard

(blog about red5

apps
)


Part 8:

Dynamic streaming

http://www.adobe.com/devnet/flashmediaserver/articles/dynamic_stream_switching.htm
l

(with code
-

Adobe Flash CS
3


FMS 3
)

http://www.adobe.com/devnet/flashmediaserver/articles/dynstream_advanced_pt1.html

(with code

-

Adobe Flash CS4


FMS
3
)

http://www.adobe.com/devnet/flashmediaserver/articles/dynstream_live.html


http://www.adobe.com/dev
net/video/streaming.html

(articles about streaming video

with FMS 3.5
)

Author: James Duy Trinh (duy.trinh@fix8.com)


http://polygeek.com/tag/php
-
streaming


Part 9:

Draw 2D/3D

http://drawlogic.com/tag/2d/

(open
source engine)

http://drawlogic.com/tag/3d/

(
blog
)

-

O3D is an open
-
source web API for creating rich, interactive 3D applications in the browser
, but
need installing plug
-
in

-

http://www.ffilmation.org/website/downloads/

Ffilmation

(isometric flash engine)

-

Alternativa

(flash 3d engine f
lash 10 focused)

-

Haxe Sandy

d

http://www.yogurt3d.com/en/

Yogurt3D Game Engine is a brand new 3D Flash engine that doesn

t
require users to download plug
-
ins because it works inside your browser via Adobe Flash Player.
Yogurt3D's core part,
SwiftGL
, is open
-
source and compatible with OpenGL


Ref at
http://swik.net/gamedev+opensource

(
blog
)

-

Iain Lobb: Open
-
source ActionScript libraries for creating Flash games

(
blog
)

o

Jiglib Flash

-

Physics in 3D!!!

-




support for Away

3d,
Papervision 3d

and Sandy 3d

-

AS3 Tutorials, resources, examples, source code.
http://as3.miguelmoraleda.com/


o

For Papervision 3d
http://as3.miguelmoraleda.com/category/flash/papervision3d/


Ref at
http://www.flashgameblogs.com/

(
blog
)

Part 10:

Facial Detection

http://www.libspark.org/browser/as3/Marilena

(source AS3

,
article Feb 2009

. As you probably know,
the guys at
squidder

found out earlier this week a
openCV port to as3

on the amazing (but unknown)
spark project
. Yesterday,
Quasimondo

did his magic and
optimised the code

quite a bit.
)

http://mrdoob.com/blog/post/643

(face tracking + 3D scene)

Author: James Duy Trinh (duy.trinh@fix8.com)


http://code.google.com/p/deface/source/checkout

Actionscript 3 visual object detection/tracking

http://suckatmath.com/personal/facedetect/facedetect.html


Part 11:

OpenMeetings

http://code.google.com/p/openmeetings/

with red5

To install

See
http://code.google.com/p/openmeetings/wiki/InstallationOfRelease051


But it use Open Laszlo platform, so it is not suitable for Flex developers ^_^


Part 12:

Red5 Share White Board

http://code.google.com/p/red5
-
shared
-
whiteboard/

_global.whiteboard = new com.free.whiteboard.Whiteboard();



Author: James Duy Trinh (duy.trinh@fix8.com)


Reference


Keyword:

action script, capture webcam
,
send bitmap

to server

[1]

http://www.tricedesigns.com/tricedesigns_home/blog/2006/05/webcam
-
in
-
flash
-
8
-
part
-
i.html


[2]


http://blog.soulw
ire.co.uk/flash/actionscript
-
3/webcam
-
motion
-
detection
-
tracking/#more
-
72