8 Replies Latest reply on May 28, 2012 4:06 PM by n_kip

    Capture Image From a Webcamera

    djh88ukwb Level 1

      Hello all.

       

      I am trying to create a little application that will take a picture of a videodisplay, the videodisplay has a webcamera attached, so the picture should be of what ever the webcamera is seeing.

       

      I am attaching the webcamera to the videodisplay using this code

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx">
         
          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                 
                  private function videoDisplay_creationComplete():void {
                      var camera:Camera = Camera.getCamera();
                      if (camera) {
                          videoDisplay.attachCamera(camera);
                      } else {
                          Alert.show("You don't seem to have a camera.");
                      }
                  }
              ]]>
          </fx:Script>
         
          <mx:VideoDisplay id="videoDisplay"
                           creationComplete="videoDisplay_creationComplete();"
                           width="160"
                           height="120" />
         
          <s:Button id="button"
                     label="Reload Camera"
                     click="videoDisplay_creationComplete();" />
         
      </s:Application>

       

       

      Can anyone help me in getting a picture of this videodisplay on a button click ?

       

      I know it can be done using a bitmap or something ?  I just cant figure it out

       

      Thanks in advance !

       

      ** Edit **

       

      Here are some links to what i want to do !

      An example built in flash - http://files.riacodes.com/flash_capture-save-webcam/

      A tutorial using flash - http://www.riacodes.com/flash/captures-images-from-the-webcam-and-save-them-to-the-desktop /

       

      The tutorial is done in flash and i cant seem to convert it into flex.

       

      Again if anyone can help that would be great !

        • 1. Re: Capture Image From a Webcamera
          djh88ukwb Level 1

          Ok,  I have got this working quite well now !

           

          Here is my code

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" >
             
              <fx:Script>
                  <![CDATA[
                      import mx.controls.Alert;  
                     
                      [Bindable] public var bitmap:Bitmap;
                     
                      protected function onLoad():void {
                          Security.loadPolicyFile("http://88.208.202.35/crossdomain.xml");
                      }
                     
                      import mx.graphics.ImageSnapshot;
                     
                      public function takeSnapshot():void
                      {
                          var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                          bitmap= new Bitmap(snapshot);
                          img.source=bitmap;
                      }
                     
                      //Web Cam Stuff
                      private function videoDisplay_creationComplete():void {
                          var camera:Camera = Camera.getCamera();
                          if (camera) {
                              videoDisplay.attachCamera(camera);
                          } else {
                             
                          }
                      }
                     
                  ]]>
              </fx:Script>
             
             
              <mx:VideoDisplay id="videoDisplay"
                               creationComplete="videoDisplay_creationComplete()"
                               width="320" height="240" autoPlay="true" x="15" y="28"/>
              <mx:Image id="img" x="343" y="28"/>
              <s:Button id="button" label="Take Screenshot" click="takeSnapshot()" x="15" y="276"/>
             
          </s:Application>

           

          Im having trouble saving this image to a server thou.

           

          Can anyone help me in saving this image to a server?

           

          I would be most thankful if you could

          • 2. Re: Capture Image From a Webcamera
            djh88ukwb Level 1

            Is anyone able to help ?


            • 3. Re: Capture Image From a Webcamera
              djh88ukwb Level 1

              Still stuck with this, is anyone able to help ?

              • 4. Re: Capture Image From a Webcamera
                Claudiu Ursica Level 4

                You already have the image (BitmapData) captured captured, use a JPEGEncoder

                (http://docs.huihoo.com/flex/4/mx/graphics/codec/JPEGEncoder.html) to encode

                ByteArray. Depending on your server implementation it should be pretty

                straightforward to send bytes to server and flush them on the disk or save them

                in the DB as BLOB. Whatever suits your needs better.

                 

                 

                C

                • 5. Re: Capture Image From a Webcamera
                  djh88ukwb Level 1

                  Thank you for the reply !

                   

                  I have now been able to save the image to the desktop, but still not been able to upload it to a server.  The code i am using is now -

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application
                      xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx" >

                      <fx:Script>
                          <![CDATA[
                              import mx.controls.Alert;
                              import mx.graphics.ImageSnapshot;
                              import mx.graphics.codec.JPEGEncoder;
                              import mx.graphics.ImageSnapshot;
                             
                              [Bindable] public var bitmap:Bitmap;
                             
                              public function takeSnapshot():void
                              {
                                  var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                                  bitmap= new Bitmap(snapshot);
                                  img.source=bitmap;
                              }
                              //Web Cam Stuff
                              private function videoDisplay_creationComplete():void {
                                  var camera:Camera = Camera.getCamera();
                                  if (camera) {
                                      videoDisplay.attachCamera(camera);
                                  } else {   
                                  }
                              }
                              private function saveImageToFileSystem():void
                              {
                                  var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
                                  var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(img, 0, jPEGEncoder);
                                  var fileReference:FileReference = new FileReference();
                                  fileReference.save(imageSnapshot.data, "img123.jpg");
                              }
                          ]]>
                      </fx:Script>
                     
                      <mx:VideoDisplay id="videoDisplay"
                                       creationComplete="videoDisplay_creationComplete()"
                                       width="320" height="240" autoPlay="true" x="15" y="28"/>
                      <mx:Image id="img" x="343" y="28"/>
                      <s:Button id="button" label="Take Screenshot" click="takeSnapshot()" x="15" y="276"/>
                      <s:Button click="saveImageToFileSystem()" label="Save Image" x="135" y="276"/>

                  </s:Application>

                   

                   

                  Im just struggling with the PHP part.  All the examples i seem to find online use coldfusion and i need to use PHP.

                   

                  Any help would be great thanks

                  • 6. Re: Capture Image From a Webcamera
                    Claudiu Ursica Level 4

                    See this link maybe it helps don;t have the time to test the code.

                     

                    http://www.permadi.com/blog/2010/06/flash-using-filereference-and-php-to-upload-files-to-s erver/

                     

                     

                    However the general rule of thumb is to debug on the server side to see if the

                    call gets there. If so the next step is to see if there is some data to on the

                    call. Then see if data is valid. Then manipulate data and put it on the disk

                    (file or db), the send response back to the client. The debugging part is

                    something you need to do yourself :)...

                     

                    C

                    • 7. Re: Capture Image From a Webcamera
                      EngHarley

                      I used the last code posted, and woks perfect..you could use something like this in your PHP to upload the picture file to the server...

                       

                      http://www.asfusion.com/blog/entry/file-upload-with-coldfusion-flash-forms

                       

                      I know that is in CFML but the functionality its the same...

                      • 8. Re: Capture Image From a Webcamera
                        n_kip

                        You want it in php

                        It has been done here well in CF: http://www.adobe.com/devnet/coldfusion/articles/screen_exports.html

                        First understand how it has been done in the above link.

                        The part where it switches to coldfusion is when using "RemoteObject" to communicate with a coldfusion component.

                        See if you can do the last mile with: http://www.themidnightcoders.com/products/weborb-for-php/developer-den /technical-articles/getting-started-with-weborb-for-php.html

                        Not sure if you have to pay for weborb.

                         

                        Did you try this open source project? It has php code: http://code.google.com/p/jpegcam/