Skip to main content

take a snapshot online via your webcam

I'm fully newbie on flash but I manage to mix php and flash, i had a client which prefer a web cam app online, well that was 2007 ago, but when i notice y flash had this feature accessing a client web cam i was thinking if i can do some snapshot on it. well I've done it.

to those who needs my app email me or leave you email here. well i might come out with free version but maybe with some banners on just for the just for a credit on my own.

and also to those who wants some sample I can update my site upon your request.

Comments

Unknown said…
Hi There,

Can you provide me flash code as i am in dark way to implement the video streaming on website.

Thanks Dave

devinder2006@gmail.com
Efren Valdez said…
Hello Dave,

Video and Audio Streaming with Flash and Open Source Tools
© 2005 Klaus Rechert
Flash has always been developed and used for multimedia purposes, but until version 6 the possibilities for audio streaming were limited and also there was no video support. With Version 6 and 7 Macromedia introduced video support and a new file format to support various ways of streaming. This article covers only a streaming variant called "progressive download" which does not need server support. True streaming support is available with Macromedia's non-free Flash Communication Server (FCS).
FLV Streams
Streaming is build upon a new file format called FLV, which separates the streamable content and the flash movie. The result is a very compact flash movie acting as a multimedia player and a storage for streamable content from which the flash movie loads a stream on demand.

A single FLV stream contains at most one audio stream and at most one video stream. Flash supports uncompressed sound and various compressed formats like MP3 and ADPCM as well as the proprietary Nellymoser audio codec. With flash version 6 Macromedia also introduced video support for flash. In version 6 only the Sorenson H.263 video codec was supported which is a slightly modified version of the open H.263 standard. The latest flash version 7 introduced a second video format "Screen Video", which is a simple, loss less video format, especially developed for screen capturing.
Converting and Creating Content
One method for creating FLV streams is converting existing audio and video content with FFmpeg [ffmpeg.sourceforge.net]. FFmpeg is a mature and very excellent software project for converting audio and video from and to various formats. Converting a video can be simply done with

ffmpeg -i infile.[avi|mpeg] stream.flv
FFmpeg uses the Sorenson H.263 video format for encoding video data. There is no support for the Screen Video format at this time. While the Screen Video format is mainly useful for screen capturing applications, Sorensons H.263 is multipurpose video codec with good compression rates, suitable especially for encoding motion pictures.

Another project dealing with FLV streams is called libflv [libflv.sourceforge.net]. While FFmpeg is a general audio and video converting suite, libflv is focused on working with FLV streams. The project is still in a very early stage, but is able encoding videos in the Screen Video format and allows simple FLV stream manipulations like (de-)multiplexing of audio and video streams. A simple GTK-based screen capturing application can be found in the example directory.
Building a Simple Multimedia Player
After having created some streamable content, a flash multimedia player is needed. One huge advantage of flash based players over other plug-in based multimedia-players is that there are no constraints about its look and how it is integrated in your sites design.

MING is an open source library which is able to create flash files with almost all recent flash features, including Action Script, sound and video support. The library also has language bindings for a bunch of script and programming languages. The examples presented in this article are written in PHP4. Porting the examples to other supported languages like C/C++, Java, Python or Perl should be trivial.

To run the following example a current CVS snapshot of MING is needed. It is available either via Sourceforges anonymous CVS service or pre-packaged at klaus.geekserver.net/ming/.

First we create a new move instance and set dimension and background color:

ming_useswfversion(7); $movie=new SWFMovie(7); $movie->setDimension($width, $height); $movie->Background($r,$g,$b);

The new flash move can now be filled with flash objects called characters. For the multimedia player example we create a video canvas object and add it to the movie. The add() method takes a character and inserts it to the current frame and returns a handle to the object. This can be used to move, rotate, resize or remove an object. If the object is going to be used with ActionScript, a name can be assigned to it.

$stream = new SWFVideoStream(); $stream->setDimension($width, $height); $item = $movie->add($stream); $item->moveTo($x, $y); $item->setname("video");

The SWFVideoStream() constructor can also take a FLV file as argument. In this case the video stream will be embedded to the flash file. However this approach has some drawbacks. First of all the resulting flash movie will get as least as big as the stream. But also the stream's frame rate must not exceed the flash movies frame rate and each flash file is limited to 16000 frames, which means that the embedded stream can contain at most 16000 frames.

A multimedia player application should be able to load and play streams dynamically. Therefore the SWFVideoStream() constructor is called with no arguments. Thus only an empty video canvas will be created, which will be controlled by the following ActionScript code:

connection = new NetConnection(); connection.connect(null); stream = new NetStream(connection); video.attachVideo(stream); stream.setBufferTime(10); stream.play('http://localhost/mystream.flv');

The ActionScript first creates a pseudo connection by passing null to the connect() method of the NetConnection object. In contrast, a real connection to a Macromedia streaming server can be made by passing a valid url to the method. Having a NetConnection instance a new NetStream object can be created and attached to the empty video canvas. This object handles streaming and provides methods for controlling the stream. The above example loads a FLV stream from the local web server with a downloadbuffer of 10 seconds. The ActionScript code can be compiled and added to the movie with:

$action = new SWFAction($action_string); $movie->add($action);

Until now the flash movie just loads and plays a certain FLV stream. To control its behavior, a simple user interface consisting of some buttons and a seek-slider is missing. Flash has its own compressed loss less bitmap format called DBL. MING provides a small utility png2dbl to convert PNG images to DBL. Such images are used for the player's control buttons:

$button = new SWFButton(); $flags = (SWFBUTTON_UP | SWFBUTTON_HIT | SWFBUTTON_OVER | SWFBUTTON_DOWN); $button->addShape(ImageShape("images/pause.dbl"), $flags); $action = new SWFAction("stream.pause();"); $button->addAction($action, SWFBUTTON_MOUSEDOWN); $button_ref = $movie->add($button); $button_ref->moveTo($x, $y);

The above example creates a pause button for the multimedia player. An interactive button is created in two steps. First its look has to be defined by adding shapes for certain mouse events. In flash a shape is the basic representation for graphic objects. For each mouse event a different shape object can be assigned to the button. In the above example the button looks always the same.
In the second step the buttons action can be defined by assigning ActionScript to a special event.

One drawback using progressive download streaming without server support is that there is no possibility to get the stream's total length. Therefore the seek-sliders functionality is limited to seeking within the already loaded parts of the stream.

The dragable part of the seek-slider is realized as a movie-clip object. A movie-clip is running as an independent movie in the flash movie. It has an independent time line, can handles scripts and handles external events itself.

$mc = new SWFSprite(); $shape = new SWFShape(); $shape->setLine(4,25,0,0,128); $shape->movePenTo(0, 5); $shape->drawLineTo(0, 10); $mc->add($shape); $mc->nextFrame(); $slider = $movie->add($mc); $slider->moveTo($xMin, $y);

A movie clip (SWFSprite) has similar methods like a movie object. The add() method inserts a flash object to the current frame, nextFrame() finishes the current frame and creates a new one. The movie clip is also a normal flash object which can be added to a movie and placed on the stage. The functionality of the seek-slider is defined by three small scripts. The first two actions make the movie-clip dragable:

$a = new SWFAction("startDrag(this, $xMin, $y, $xMax, $y, 1); drag = true;"); $slider->addAction($a, SWFACTION_MOUSEDOWN); $a = new SWFAction("stopDrag(); drag=flase;"); $slider->addAction($a, SWFACTION_MOUSEUP);

The third more lengthy script sets the stream position depending on sliders x-position if the slider is actually moved by the user or sets the sliders x-position depending on the streams current time:

// width in px width = xMax - xMin; paused = false; if(drag) { // pause stream while seeking _global.stream.pause(true); paused = true; x = _root._xmouse - xMin; seekTo = (_global.streamLen / width) * x; _global.stream.seek(seekTo); } else { pos = (_global.stream.time * (width / _global.streamLen)) + xMin; this._x = pos; this._y = y; } // restart paused stream if(paused) { _global.stream.pause(false); }
This script is assigned to the $slider-handle with the SWFACTION_ENTERFRAME event.

After having added all elements to the flash movie the first frame has to be closed with the nextFrame() call. Since we don not need another frame the movie can also be finished:

$movie->nextFrame(); $movie->save("FLVPlayer.swf");
If you wanna capture just a photo, an special server is not required. However, to capture video and sound, you need a RTMP sever. You can use the Red5 opensource flash server (instead the Adobe software) with a flash video recorder widget.

For photo capture, you can use PhotoBooth
http://blog.vamapaull.com/?p=355

For video and sound capture, you can use...
http://www.red5-recorder.com/
video whisper
http://www.videowhisper.com/?p=PHP+Video+Recorder+Script
or other related products
http://osflash.org/red5/showcase

The RTMP/Flash server is required to encode and stream back the video. You can download Red5 from
http://code.google.com/p/red5/

you can also see several video processing platforms like Kaltura
http://www.kaltura.org/
or video sharing website apps
http://phpmotion.com/
Unknown said…
Hey Efren, I really need the code of it for my project in high school i have made a robot which uses php to be controlled but i got problem with video on it please send me the flash source and php code thanks.
Unknown said…
I would like to have the flash code as well if possible, I'm experimenting with it at the moment.

anoniemsurfen@live.nl

Kind regards,

Ted
Efren Valdez said…
Here is the Code http://sourceforge.net/projects/croflash/files/

Installation Steps
1. Unpack
2. insert the croflash.swf to your html
3 cheers
Frank said…
Hi there... im busy trying to build something in flash that takes a snap shot of the webcam feed.. would be able to please send me your source code... im having a little difficulty.

thank you very much..really appreciate it

chapter2@gmail.com
Joyonto said…
hi boss..i am trying to stream my webcam over the internet for my yr final project..i can just take the input from webcam in my own my pc..but can't broadcast it to another pc..how can i do it..please give me the source code to understand..thanks....

Popular posts from this blog

Automated Testing with Behat & Mink on Linux

Have time to read my introduction. Behat + Mink + Selenium Server will do the automatic testing for your website. Behat handles your test cases in a form of a sentence which consist of the following Feature - which is a description of your test case. Example is "Title Checking" Scenario - Feature consist of Scenario's Conditions - Scenario's consist of condition using the following tags "Given", "When", "Then", "And", "But" Example feature:  Feature: Google Search @javascript Scenario: Check Google Site When I go to " http://www.google.com " Then Capture a ScreenShot @javascript Scenario: Search Efren on Google Given I am on " http://www.google.com " When I input "Efren" in " gbqfq" element When press " Google Search " Then print current URL Then Capture a ScreenShot You need t

Initial Installation of RoR Centos, Fedora, Redhat

# yum install ruby # y um install gcc g++ make automake autoconf curl-devel openssl-devel zlib-devel httpd-devel apr-devel apr-util-devel sqlite-devel # yum install ruby-rdoc ruby-devel # y um install rubygems # mkdir ~/src # cd ~/src # wget http://production.cf.rubygems.org/rubygems/rubygems-2.2.2.tgz # cd rubygems-1.3.6 # ruby setup.rb Install Rails # gem update # gem update --system # gem install rails # gem install rails -V -----DONE