How to display captured still camera image on a website in C#

This example demonstrates a simple method for how you can connect your Console Application written in C# to an IP camera and display the captured image of the IP camera on a website. To implement this example, you need to have Ozeki Camera SDK installed, and a reference to OzekiSDK.dll should be added to your Visual Studio project.

To be able to build this project properly you should peform the following steps:

  1. Building a webserver,
  2. Creating a new Visual Studio application written in C#,
  3. Launching both the webserver and the application,
  4. Performing some extra steps you can read about on this page,
  5. Finally checking the image of your IP camera on your internet browser.

Please check our previous tutorial for a more detailed description of how to build a solution for streaming your camera's image to a website. Important: you should study this article in order to find out how to setup your Console Application correctly.

Getting started

To get started it is recomended to Download and Install the latest version of Ozeki Camera SDK. After installation you can find the example code discussed in this page with full source code in the following location on your harddisk:

Download Ozeki Camera SDK: https://www.camera-sdk.com/https://ozeki-sms-gateway.com/p_595-how-to-configure-the-firewall-for-smpp.html
Windows forms version: C:\Program Files\Ozeki\Ozeki SDK\examples.zip\Examples\Other\
Website_Capture_Image_Console\Website_Capture_Image_Console.sln

To compile this example you will need Microsoft Visual Studio installed on your computer.

In order to make your application work properly you should add two more new references to your project in the Visual Studio IDE: System.Configuration and System.Drawing. You can do this in the following way: please right-click on the References, choose Add reference from the pop-up menu, then you should look up the mentioned references on the .NET tab and add it to the other.

In this tutorial the application will be expanded from the previous example. You should download the new flash-based content which you can find at the top of the page. After the successful download you should overwrite with them the old files in the htdocs folder of the XAMPP application.

Using the code you can see below will upgrade the application for taking snapshots of the actual image of the camera. Please check this example to get more information about the code sections in connection with the snapshot feature.

Implement IP Camera Stream on Website in C#

MyMediaGateway.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Ozeki.MediaGateway;
using Ozeki.Camera;

namespace Display_IP_Camera_Stream_On_Website02
{
    public class MyMediaGateway : MediaGateway
    {
        private Dictionary<IClient, MyClient> clients;
        private IStreamService _streamService;
        private string path;

        public event EventHandler<EventArgs> ClientCountChange;

        public MyMediaGateway(MediaGatewayConfig config, string path)
            : base(config)
        {
            clients = new Dictionary<IClient, MyClient>();
            this.path = path;
        }

        #region MediaGateway methods

        public override void OnStart()
        {
            base.OnStart();

            _streamService = GetService<IStreamService>();

            Console.WriteLine("MediaGateway started.");
        }

        public override void OnClientConnect(IClient client, object[] parameters)
        {
            Console.WriteLine(client.RemoteAddress + " client connected to the server with " + client.ClientType);
            if (clients.ContainsKey(client)) return;
            clients.Add(client, new MyClient(client, _streamService));
            ClientChange();
        }

        public override void OnClientDisconnect(IClient client)
        {
            var disconnectedClient = GetClient(client);
            if (disconnectedClient == null)
                return;

            disconnectedClient.DisconnectCamera();
            clients.Remove(client);
            ClientChange();
        }

        private void ClientChange()
        {
            var handler = ClientCountChange;
            if (handler != null)
                ClientCountChange(this, new EventArgs());
        }

        #endregion

        #region Client invokes

        public void CameraConnect(IClient client, string uri)
        {
            Console.WriteLine(client.RemoteAddress + " client IP camera connect " + uri);

            var myClient = GetClient(client);
            if (myClient == null)
                return;

            myClient.ConnectCamera(uri);
        }

        public void CameraImageCapture(IClient client)
        {
            var snapShotImage = MyClient._camera.TakeSnapshot().ToImage();
            snapShotImage.Save(path + "\\snapshot.jpg");
        }

        public void CameraDisconnect(IClient client)
        {
            Console.WriteLine(client.RemoteAddress + " client IP camera disconnect.");

            var myClient = GetClient(client);
            if (myClient == null)
                return;

            myClient.DisconnectCamera();
        }

        #endregion

        MyClient GetClient(IClient client)
        {
            return !clients.ContainsKey(client) ? null : clients[client];
        }
    }
}
Code 1 - MyMediaGateway.cs implementing IP Camera Streaming in C#

MyClient.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Ozeki.Camera;
using Ozeki.Media;
using Ozeki.MediaGateway;

namespace Display_IP_Camera_Stream_On_Website02
{
    class MyClient
    {
        private IClient _client;
        private IStreamService _streamService;
        private IMediaStream _mediaStream;
        private MediaGatewayVideoReceiver _videoReceiver;
        private MediaConnector _connector;
        public static IIPCamera _camera;

        public MyClient(IClient client, IStreamService streamService)
        {
            this._client = client;
            this._streamService = streamService;
            _connector = new MediaConnector();
        }

        internal void ConnectCamera(string uri)
        {
            // Connect to the camera
            if (String.IsNullOrEmpty(uri)) return;

            _camera = IPCameraFactory.GetCamera(uri, "admin", "admin");
            _camera.Start();

            if (_camera == null)
            {
                NotifyCameraStateChanged(IPCameraState.Error);
                return;
            }
            // Notify the client about the camera state
            NotifyCameraStateChanged(IPCameraState.Connected);

            // Start the stream
            var playStreamName = Guid.NewGuid().ToString();
            _mediaStream = _streamService.CreateStream(playStreamName);
            _videoReceiver = new MediaGatewayVideoReceiver(_mediaStream);

            _connector.Connect(_camera.VideoChannel, _videoReceiver);

            // Notify the client about the stream name
            OnPlayRemoteStream(playStreamName);
        }

        internal void DisconnectCamera()
        {
            if (_camera == null) return;
            _camera.Disconnect();

            _connector.Disconnect(_camera.VideoChannel, _videoReceiver);

            _videoReceiver.Dispose();
            _mediaStream.Close();

            NotifyCameraStateChanged(IPCameraState.Disconnected);
        }

        private void NotifyCameraStateChanged(IPCameraState state)
        {
            try
            {
                _client.InvokeMethod("OnCameraStateChanged", state);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }

        void OnPlayRemoteStream(string streamName)
        {
            try
            {
                _client.InvokeMethod("OnPlayRemoteStream", streamName);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
    }
}
Code 2 - MyClient.cs implementing IP Camera Streaming in C#

Program.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Ozeki.Media;
using Ozeki.MediaGateway;

namespace Display_IP_Camera_Stream_On_Website02
{
    class Program
    {
        static void Main(string[] args)
        {

            var config = new MediaGatewayConfig();
            config.AddConfigElement(new FlashConfig { ServiceName = "IPCameraServer" });
            Console.Write("Please give the path to the server's Main.html file:");
            var path = Console.ReadLine();

            MyMediaGateway _mediaGateway = new MyMediaGateway(config, path);
            _mediaGateway.Start();
            Console.Read();
        }
    }
}
Code 3 - Program.cs implementing IP Camera Streaming in C#


GUI

gui of a website on which you can display a captured still camera image in c#
Figure 1 - The graphical user interface of your website

After installing the webserver, building the project and running them, the graphical user interface of your website will look like this.

DISCLAIMER: Please note that the following features will only work if your IP camera supports the given function. You should check the user manual of your IP camera to make sure it supports the feature that you wish to implement in C#.

Related Pages

FAQ

Below you can find the answers for the most frequently asked questions related to this topic:

  1. How can I get the URL of the camera?

    You can get the URL from the producer of the camera. (In the 10th tutorial you can find information on how to create an own IP camera discoverer program.)

  2. I have not managed to build the solution. How to solve it?

    • Please set the Target framework property of the project to .NET 4.0.
    • You should add the OzekiSDK.dll to the references of the solution.
    • Please import the missing classes.

  3. My Apache HTTP server does not work. Why?

    If you use Skype it occupies the port number 80 from Apache. Please close Skype.

More information