C#.net

Webcam In Website



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

 

http://saezndaree.wordpress.com/2007/10/20/export-a-movie-clip-from-flash-to-an-image-file-using-c-and-actionscript’s-bitmapdata/

 

  

  

  

 

Share

Thanks for reading my blog. If you like what I write, why not subscribe to my feed?

If you are busy, I can send the latest post to your email. Just subscribe to my email updates.

 

Enter your email address:

Delivered by FeedBurner

Discussion

No comments for “Webcam In Website”

Post a comment