header photo

Level 1 - Lets Make a WORKING Camera Application

June 20, 2011

TO DO: MAKE A SIMPLE working CAMERA APPLICATION
I hope you've got the level 0 done nice and smoothly? if so, then lets move on to our next step: lets make a brand new windows application using Emgu CV library. we'll be making a camera application based on EmguCV's own example.
we'll make it such that it only does our piece of work:

1. take image from a web camera continuously
2. show it in an EmguCV Imagebox
3. application should start when "Start" button is pressed. and pause when it is again pressed and vice versa.

LEARNING OBJECTIVE:

FINAL OUTPUT:
Photobucket

IMPORTANT :
make sure you have a working webcam installed AND connected to your computer before beginning this tutorial


 Question: "Why should I follow your tutorial when there are loads of other such tutorials on web camera and EmguCV!?"

Answer: True, you'll find A LOT of camera applications on the internet using Emgu CV, but ours is explained in simple, understandable visual steps, and will let you learn few important things:
1- how to create a fully functional Emgu Cv based C# project in visual Studio starting from the very basics!


2- Modify/re-use EmguCv's own Example (that comes with the setup) to create our own application.

3-learn to SOLVE the 'CvInvoke' error
...YES that very buggy and weird error that so many face!
 
------------------------------------------------------------------------------------------------------------------------------------------

==================================================================

STEP-1: open visual Studio 2008 0r 2010(works well in both) and select File-> New->Project as follows:

STEP-2: in the Visual C# Project menu, Select "Windows Forms Application" and name the project "CameraCapture" as in figure below, and Click "OK" 

STEP-3: Lets first add Emgu References to our project.(though you can add them at any time later BUT you must add references before debugging.)

For this, just follow the process as explained in Level-0 tutorial, i.e right-click project's "References" in Solution explorer, and select "Add Reference". the below fig shows so:

STEP-4:select the Browse tab in the window that pops up, go to EmguCv's bin folder as in Level-0 tutorial, and select the following 3 .dll files(Emgu.CV.dll, Emgu.CV.UI.dll and Emgu.Util.dll) click OK to continue.

STEP-5: Rename Form1.cs to CameraCapture.cs and change its Text Field to "Camera Output"
I like to keep things neat and meaningful so that understanding the project is easy. So bear with me as i ask you to do some housekeeping chores as we proceed along our tutorials :D

 

 STEP-6:Add EmguCv Tools to your Visual Studio, because we will be using those tools, such as ImageBox, in our tutorial. follow this official guide to add them.

STEP-7:the next step is pretty simple, once you've added EmguCv tools to the Toolbox,as in fig below, just re-size the form and follow the instruction in this fig to add an EmguCv ImageBox to the form we created.

Note: You could use the already present PictureBox tool in Visual Studio instead of Emgu's ImageBox, but
1. it will be used a bit differently in coding than how its shown in this tutorial.
2. the pupose of using ImageBox here is to familiarize you with another aspect of EmguCv: i.e to use its own tools. they have more capabilities somewhat.

 

STEP-8: Add a button to the form and please do some more required "housekeeping" as below:
ImageBox Properties:

(Name) :            CamImageBox
BorderStyle:   Fixedsingle

Button properties:
(Name) :            btnStart
Text:                   Start!

 

STEP-9: DEBUG & SAVE PROJECT
okie dokie, so for now our User Interface is ready, all that's left is coding :D but before we code, lets Debug our project, it will automatically Save the project as well. we need to do that now. so lets see if our form is fit for run. the form should look something like below

STEP-10: to begin coding, view code behind CameraCapture.cs as in fig shown below

STEP-11: THE CODE
--------------------------------------------------------------------------------------------------------------------------------
 
In case you're not using Visual Studio 2010, and my source code doesn't open for you, do not worry, i've uploaded the code as a text file so you can copy-paste this code to our CameraCapture.cs
in the application we've made so far above. what's happening in the code? the details are as follows.

if unaltered and debugged, the code will only work if you've made the application like I did and more importantly if you kept the Components' Design Names EXACTLY the same as I did. otherwise please modify it according to your component names
----------------------------------------------------------------------------------------------------------------------------------

  1.welcome to your code view :) first things first, we had especially added the Emgu CV references, remember? now in order to use them, add the following directives to the existing ones:

using Emgu.CV;
using Emgu.CV.Structure;
using Emgu.Util;

2.now inside the class,declare the following global variables just above the  public CameraCapture() initializer

        //declaring global variables
        private Capture capture;        //takes images from camera as image frames
        private bool captureInProgress; // checks if capture is executing

3. add a user defined function  to your code and name it  Process Frame() as shown below. In this function we'll create an EmguCv type image called ImageFrame. then capture a frame from camera and save it in "ImageFrame"(line 1). And then we'll load this into CamImageBox to show it to the user(line 2)

        private void ProcessFrame(object sender, EventArgs arg)
        {
            Image<Bgr, Byte> ImageFrame = capture.QueryFrame();  //line 1
            CamImageBox.Image = ImageFrame;        //line 2
        }

------------------------------------------------------------------------------------------------------------------------------------------
To Display an EmguCV image in Windows Form Picture Box,
use this code instead of the one above:

 //Show the image in Windows Form PictureBox called "pictureBox1"
pictureBox1.Image = ImageFrame.ToBitmap();
 


Asked by Richard: "how to SAVE the captured image into specific directory or folder?"
You can simply save the picture to anywhere like this:
Let's say, you wish to Save an EmguCV image (take the above 'ImageFrame' as an example) to your desired location, say, you want to save it at 'E:\ ' and wish to call it 'MyPic'.
Decide on the type of image you want it to be, and save it like so:

ImageFrame.Save(@"E:\MyPic.jpg");

NOTE:  do NOT forget to give your image an extension! i like to save it as '.jpg' (saves space). you could try '.bmp'.
and do NOT forget the @ sign before your path string. it allows back slashes in a string, so helpful when giving a path in string.
------------------------------------------------------------------------------------------------------------------------------------------

4. now its time to add code behind the Start button. Go to Design View of CameraCapture.cs and double click the Start button you had added. it will take you back to the code view with an empty function of button click event as follows:

private void btnStart_Click(object sender, EventArgs e)
{}

What we want is that when the Start! button is pressed then camera should start working and the image stream should be visible in our ImageBox. if the stream is on, then the start button should display "Pause". and pressing it now should pause the stream and vice versa. right?

for that, we should create a new capture event if one isn't already created, i.e at startup it will create a capture event from which we will get frames from camera.
In case the capture was already created (i.e once the application had begun) then now it will do either of the following based on value of captureInProgress:
when captureInProgress = true
          then Pause the capture when btnStart is pressed. this is done by the code :
            Application.Idle -= ProcessFrame;     //ProcessFrame() will be called here to hold its job

when captureInProgress = false
          then Start the capture when btnStart is pressed. this is done by the code :
           Application.Idle += ProcessFrame;  
//ProcessFrame() will be called here to resume its job

NOTE: this is why we had declared a bool type variable called captureInProgress, now do you get its use?

Therefore,into the btnStart_Click() function, add the following code:

            #region if capture is not created, create it now
            if (capture == null)
            {
                try
                {
                    capture = new Capture();
                }
                catch (NullReferenceException excpt)
                {
                    MessageBox.Show(excpt.Message);
                }
            }
            #endregion

            if (capture != null)
            {
                if (captureInProgress)
                {  //if camera is getting frames then stop the capture and set button Text
                    // "Start" for resuming capture
                    btnStart.Text = "Start!"; //
                    Application.Idle -= ProcessFrame;
                }
                else
                {
                    //if camera is NOT getting frames then start the capture and set button
                    // Text to "Stop" for pausing capture
                    btnStart.Text = "Stop";
                    Application.Idle += ProcessFrame;
                }

                captureInProgress = !captureInProgress;
            }

5. Last but not the least, add the following function to your code. which takes care of closing the application in a safe way.

private void ReleaseData()
        {
            if (capture != null)
                capture.Dispose();
        }

Now our Camera Capture Windows Form Application is all ready! what are waiting for? go on DEBUG it! :)

 STEP 12- HANDLE ERROR
------------------------------------------------------------------------------------------------------------------------------------------

Emgu.CV.CvIvoke threw an exception!!!??

 you tried to debug, but you got this BUGGING error? if you're making the application following our tutorial, please ignore this note below and continue reading this post... 
-----------------------------------------------------------------------------------------------------------------------------------------

 IMPORTANT NOTE: FOR THOSE WHO HAVE NOT READ THE TUTORIAL FROM START OR ARE NOT MAKING THIS APPLICATION,
please read the Other post to solve your 'Emgu.CV.Invoke' error.


 
------------------------------------------------------------------------------------------------------------------------------------------

Photobucket

this error is telling you that your application ju st CAN'T connect to your Webcam!

DO SOME CHECKS:
------------------------------------------------------------------------------------------------------------------------------------------

 Don't worry, here are some checks for you to do:  

1.is the Emgu Cv's own example of Camera Capturing working perfectly?

you can find it at following path (if you installed the Emgu CV as we did)
C:\Emgu\emgucv-windows-x86 2.2.1.1150\Emgu.CV.Example\CameraCapture
go there and open CameraCapture.csproj file. it will open the solution for you. debug this solution and see if the application works or not.
if its showing you stream from your webcam then congratulations, at least your camera's working and rest assured that our application that we've just made is also perfectly as fit and fine because it is based on this EmguCV example itself.

2.did you follow every instruction carefully & correctly?

if yes, then there should be no errors in the project's Error List at the time you build and debug project. right?
if there are errors then you just made a mistake somewhere most probably. resolve that issue.

SOLUTION:
------------------------------------------------------------------------------------------------------------------------------------------

 You might've tried various sites to find the solution to this problem. we did and trust me we couldn't find anything that worked!
they just talked about adding managed and unmanged code and dlls and what not.
well they weren't wrong! all they missed was the fact that WHICH dlls they were talking about and exactly where n how to put them!
so here's what we present:


Step 1: Add the Managed code to the folder where your .exe file is:
Do you remember adding the Emgu References? those 3 Emgu.CV dll files? that's it! they're the managed code you MUST add to your project. that's why i made you do that in the very first place! See your Debug folder(or Release folder if you have one) the Emgu.Cv dlls will be present like in the Camera Capture's Debug(second image below).

Step 2: Add the Unmanaged code to the folder where your .exe file is:

THIS IS THE SOLUTION TO YOUR PROBLEM DEAR FRIENDS!
there are some opencv_xxx220.dlls in the bin folder of EmguCV directory.other than managed dlls we talked about, these are also NECESSARY to be present with your .exe file so that application works perfectly!

see the image below? that's where you can get them.
Photobucket

which ones to add to you project?
well for Camera application these 2 as marked above are required: opencv_core220.dll and opencv_highgui220.dll.

Now paste it in your project's folder where your .exe file will execute, i.e the DEBUG folder, as shown below just paste the dlls you copied

Photobucket

 ------------------------------------------------------------------------------------------------------------------------------------------

Question: "Which is the folder where you say my .exe file is !?"

Answer: VERY IMPORTANT question indeed! well mostly & usually  its the DEBUG folder in you project's BIN folder. as we have in our CameraCapture project.
but in the BIN folder,some of you might also have a RELEASE folder along with DEBUG   folder.
in this case, copy-paste the unmanaged code(the opencv_YYY220.dlls) to your Release folder as well!

note: '
YYY' in opencv_YYY220.dlls refers to any respectively required dlls. it is not a name of any particular dll file, so don't worry if you dont find it :) 

------------------------------------------------------------------------------------------------------------------------------------------
Step-3:
Now once again open your solution file, and Debug your project. this time you should be able to see the camera working and showing a video stream in the form!

Photobucket 

if so then,
CASE SOLVED!!!
CONGRATULATIONS!!! ^_^

 ------------------------------------------------------------------------------------------------------------------------------------------

Question: " WHY DIDN'T WE ADD THE UNMANGED DLLS BEFORE DEBUGGING EARLIER? ?"

Answer: In case you're wondering then, that's right! we should have!
Then we wouldn't have this error, right?
RIGHT!
Then why?
well, obviously it was NOT to annoy you :)
if i had asked you to do so earlier, you would've completely missed noticing the importance of adding the unmanaged dlls and would have later suffered from its sticky consequence: the CvInvoke error! which has little help available over the internet.

At least now you'll be careful next time and those who were stuck here maybe found a solution to their problem :)  

------------------------------------------------------------------------------------------------------------------------------------------

STILL HAVING TROUBLE?

 if you're still having some trouble then... lemme know what it is, maybe we can help. though I've mentioned all possible errors along with their solutions. but we can still try right? :)

====================================================================
 SOURCE CODE  (VS 2010)   

NOTE: if you're a beginner to EmguCV projects, then i HIGHLY stress you read and follow the whole tutorial to understand and learn this project. The source code is here only to HELP you!


IF YOU LIKE THIS TUTORIAL. PLEASE LEAVE A COMMENT BELOW :)

BUT ASK YOUR QUESTIONS ONLY AT THE FOLLOWING LINK. QUESTIONS IN COMMENTS WILL BE IGNORED.

 


SEE YOU IN THE NEXT TUTORIAL :)

Go Back

Nice tutorials! Very helpful for newbies in CV like me. Can you please create a tutorial for video processing? Thanks anyways! More power guys! :)

Thanks for this tutorial. But when using kinect why is the image in grayscale? Have a nice day!

very much thanks. this is best for new buddies .

very nice tutorial..! tks lot

Very good article and tutorial to learn. Thank buddy!

Hey Thnx Friend... Thnx a lot...
IT realy help me and Thnx again , Keep It up :)

how to save the captured image into specific directory or folder?



Comment