Click here to download source code
In this article , I am going to explain how you can bring webcam on to your website which allows the visitors to take their pictures(It can be uploaded to your server ,can be used as display pic etc)
ÂÂ
Pre Requisite
ÂÂ
1.Flash 8 or above
2..net OR PHP Enabled webserver
ÂÂ
Steps 1 : Create a Flash Movie
You can do it easily using flash 8.I guess not much explanation is required
ÂÂ
Step 2 : Make the webcam preview on the flash movie
     1.Open Flash 8 and start a new flash project
     2.Press CTRL+L to open the library
     3.Right click on the top right corner and select New video.
     4.Drag the video you just created into the screen and name it as output_vid.
      5.Click the first frame in the timeline and press F9
      6.You can see the action panel where u need to write the below action script
ÂÂ
                      ÂÂ
output_vid.attachVideo(Camera.get());
ÂÂ
import flash.display.BitmapData
import flash.geom.Matrix
import flash.external.ExternalInterface;
ÂÂ
ÂÂ
ÂÂ
ÂÂ
ÂÂ
ÂÂ
/*
ÂÂ
create a new bitmap object that is the same size
as the Video object to store the pixel data
ÂÂ
*/
ÂÂ
var snapshot:BitmapData=new BitmapData(180,200);
var bmp:BitmapData=new BitmapData(500,500);
ÂÂ
ÂÂ
/*
ÂÂ
create a function that takes a snapshot
of the Video object whenever it is called
ÂÂ
*/
function takeSnapshot()
{
//draw the current state of the Video object into
//the bitmap object with no transformations applied
snapshot.draw(output_vid,new Matrix());
           bmp.draw(output_vid,new Matrix());
}
ÂÂ
/////////////////////
ÂÂ
//create a movie clip to hold the bitmap when we attach it
this.createEmptyMovieClip(“bitmap_mc”,this.getNextHighestDepth());
//display the specified bitmap object inside the movie clip
bitmap_mc.attachBitmap(snapshot,1);
ÂÂ
ÂÂ
/////////////////////
ÂÂ
snap_btn.onPress = function (){
          ÂÂ
           takeSnapshot();
           //var snapshot:BitmapData=new BitmapData(160,120);
           //snapshot.draw(output_vid,new Matrix());
}
save_btn.onPress=function(){
           ExportBitmap();
}
/////////////////////
ÂÂ
ÂÂ
import flash.external.*;
function dosomething():Void
  {
     ExternalInterface.call(“GetBMP”);
  }
ÂÂ
snap_btn.onRelease = function()
  {
     dosomething();
  };
ÂÂ
  function ExportBitmap(evt:Object):VoidÂÂ
{ÂÂ
   var output:String = “”;ÂÂ
   var col = “”;ÂÂ
   for(var i:Number=0;i<bmp.height;i++)ÂÂ
   {ÂÂ
       for(var j:Number=0;j<bmp.width;j++)ÂÂ
       {ÂÂ
ÂÂ
           col = bmp.getPixel(j,i).toString(16);       ÂÂ
ÂÂ
           // In some cases, the color will be truncated (e.g. “00FF00″ becomes “FF00″)ÂÂ
           // so we are adding the missing zeros.ÂÂ
           while(col.length<6)ÂÂ
           {ÂÂ
               col = “0″ + col;ÂÂ
           }ÂÂ
           output+=col;ÂÂ
       }ÂÂ
   }ÂÂ
ÂÂ
   // Use a LoadVars to transmit the data to the ASPX page using POSTÂÂ
   var lv:LoadVars = new LoadVars();ÂÂ
   lv.pixels = output;ÂÂ
   lv.height = 500;ÂÂ
   lv.width = 500;ÂÂ
         ÂÂ
          ÂÂ
          ÂÂ
   lv.send(“GetPixelData.aspx”, “_blank”, “POST”);ÂÂ
}ÂÂ
ÂÂ
ÂÂ
ÂÂ
ÂÂ
Hope you have noticed the last step. We are posting the pixel data of the image we have just taken to an aspx page GetPixelData.aspx
ÂÂ
I got the c#.net code for making the image out this pixel data from the website
ÂÂ
ÂÂ
 ÂÂ
 ÂÂ
 ÂÂ
ÂÂ

Discussion
No comments for “Webcam In Website”