RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Monitor Your Web Cam from a Remote Computer : Page 3

We've offered a few solutions for working with web cams within .NET to create fun and intriguing monitoring applications. In this article, we extend those ideas so that web cam images can be shared with multiple clients over the Web.

Creating the Client
Using Visual Studio 2005, create a new Windows application and name it RemoteMonitoringClient. In the default Form1, populate the controls as shown in Figure 4.

Figure 4. Populate Form1 with the various controls shown.
Set the properties of PictureBox1 as follows:
  • Size—449, 253
  • SizeMode—StretchImage
PictureBox2 is set to display the image of an LCD monitor (you can do so via its Image property). Be sure to bring PictureBox1 to the front (right-click on PictureBox1 and select Bring to Front).

Switching to the code-behind of Form1, import the following namespace:

Imports System.Net.Sockets
Imports System.IO
Declare the following constant and member variables:

Public Class Form1
    '---get own IP address---
    Private ips As Net.IPHostEntry = _

    '---port nos and server IP address---
    Const PORTNO As Integer = 500
    Private server_IP As String = ""

    '---size of the video image---
    Const SIZEOFIMAGE As Integer = 341504

    '---use for connecting to the server---
    Private client As TcpClient

    '--used for sending and receiving data---
    Private data() As Byte

    '---used for receiving images from the server---
    Private t As System.Threading.Thread
Code the Click event handler of the Start button control as follows:

    Private Sub btnStartStop_Click( _
       ByVal sender As System.Object, _
       ByVal e As System.EventArgs) _
       Handles btnStartStop.Click

        If CType(sender, Button).Text = "Start" Then
                '---set the server IP address---
                server_IP = txtServerIP.Text

                '---connect to the server---
                client = New TcpClient
                client.Connect(server_IP, PORTNO)
                ReDim data(client.ReceiveBufferSize - 1)

                '---send message---

                '---begin reading data asynchronously from the 
                ' server---
                t = New System.Threading.Thread( _
                   AddressOf ReceiveImageLoop)

                '---change the text on the Button---
                CType(sender, Button).Text = "Stop"
            Catch ex As Exception
            End Try
            '---send message---

            '---change the text on the Button---
            CType(sender, Button).Text = "Start"
        End If
    End Sub
You first connect to the server using its IP address and port number. You then send a "Send" message to the server to indicate that you are ready to receive the image. You spin off a thread so that you can receive images (via the ReceiveImageLoop() subroutine) asynchronously.

The ReceiveImageLoop() subroutine calls the ReceiveImage() function indefinitely, until an error occurs:

    Private Sub ReceiveImageLoop()
        '---keep on receiving image until an error occurs---
        While ReceiveImage()
        End While

        '---display error message---
        MsgBox("Server has stopped responding. Please try" & _
           & " restarting the video.")
    End Sub
The ReceiveImage() function reads the incoming image data (in blocks of 8192 bytes, as defined by the ReceiveBufferSize property of the TcpClient class) sent from the server. As each image sent is 341504 bytes (defined by the SIZEOFIMAGE constant; this value is dependent on the web cam used), you will therefore read the number of bytes as expected. Once the image is received, display it in the PictureBox control. To receive the next image from the server, send another "Send" message:

    '---receive video image from server---
    Public Function ReceiveImage() As Boolean
        Dim s As New MemoryStream
            Dim nws As NetworkStream = client.GetStream
            Dim counter As Integer = 0
            Dim totalBytes As Integer = 0

                '---read the incoming data---
                Dim bytesRead As Integer = _
                   nws.Read(data, 0, client.ReceiveBufferSize)
                totalBytes += bytesRead
                '---write the byte() array into the memory stream---
                s.Write(data, 0, bytesRead)
                counter += 1
            Loop Until totalBytes >= SIZEOFIMAGE

            '---display the image in the PictureBox control---
            PictureBox1.Image = Image.FromStream(s)
        Catch ex As InvalidOperationException
            '---ignore this error---
        Catch ex As Exception
            Return False
        End Try

        '---ask the server to send the next image---
        Return True
    End Function
The SendMessage() subroutine sends a message to the server:

    '---Sends a message to the server---
    Private Sub SendMessage(ByVal message As String)
        '---adds a carriage return char---
        message += vbLf
            '---send the text---
            Dim ns As System.Net.Sockets.NetworkStream
            SyncLock client.GetStream
                ns = client.GetStream
                Dim bytesToSend As Byte() = _
                '---sends the text---
                ns.Write(bytesToSend, 0, bytesToSend.Length)
            End SyncLock
        Catch ex As Exception
        End Try
    End Sub
When Form1 is closed, kill the thread that listens asynchronously for incoming image data:

    Private Sub Form1_FormClosing( _
       ByVal sender As Object, _
       ByVal e As System.Windows.Forms.FormClosingEventArgs) _
       Handles Me.FormClosing
    End Sub

Testing the Applications
You can test both the server and the client on one single machine. Simply set the IP_Address variable (on the server) to "" and then press F5 in Visual Studio 2005 to test the application. For the client, type the server IP address (which is and click the Start button. You should see the same image on both the client and the server (see Figure 5).

Figure 5. You can test the client and the server on the same machine.
You can also try the client and server on two separate machines. Just remember to set the server IP address accordingly. Best of all, you can connect multiple clients to the server!

Some Points to Note
Please note the following points when testing the client and the server:

  • The server application needs to be visible on screen. If it is minimized, the client will not be able to receive the image captured by the web cam. This is due to the fact that the application is capturing whatever images are shown on the screen.
  • For simplicity I have not added any security features into the server. In reality, you can add credentials information to the message sent to the server before the server sends the video image over to the client.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date