Video tutorial on how to stream the image of the camera to a website in C#

This video demonstrates how you can stream the image of the USB and IP camera to website in C#. You will see how you can download the Ozeki Camera SDK from the official website. Then how you can integrate the SDK in a Visual Studio solution as a reference. After this video you will know how you can display the image of the USB and IP camera. Moreover you will able to stream the camera image in different kind of web browsers without plugins and JavaScript codes.

 


Download Video: TutorialVideo9.zip
Download source code: Basic_CameraViewer_9.zip

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

 

Transcript

Welcome to the Ozeki Camera SDK video guide tutorial part nine. In this chapter We will create a simple project to connect USB camera and IP camera and then we will learn how to stream their image to a website.

This is the 9. video guide from our C# .NET camera tutorial series, in which we present how to use Ozeki Camera SDK to develop different kind of camera solutions.

This SDK is:

  • ONVIF compliant
  • Easy to use
  • All purpose tool

Whether you're a beginner or an experienced C# developer you will certainly be able to implement the solutions presented in these tutorial videos, if you use this Camera SDK. This is gonna be a great video series. They contain short and practical code explanations.

This video will be exciting and fun. I hope you will enjoy it.

In this video the main steps are the following

  • First step - Download the sdk from the website
  • Second step - Create WPF solution in Visual Studio
  • Third step - Implementing the camera viewer application
  • Fourth step - Extend the application with streaming to website function.
  • and finally the Fifth step - Check the result and we try out our application

And let's start now with the step one.

First of all, let's download the necessary SDK from the camera-sdk.com. Click on the download then add a name, an email and a reason why you need this SDK. Click on the OK and you will see the downloading link. Click on it and install it. About the installation you can find more information in the Quick Start section.

After the installation let's create a new WPF solution project in the Visual Studio. Click on the new project and choose the WPF and give a name and select a folder, where you want to save. When the project is exist, then we add the System.Drawing.dll and the OzekiSDK.dll to the references. We can find the OzekiSDK, where the installer put it. We can find the System.Drawing.dll in References under the Framework submenu on the Assemblies tab. And you can see the in references list.

Next step is to create the graphical user interface. We can do in the XAML file. We will need two buttons for USB camera Connection and Disconnection. And then we also need the same for the IP camera, but here we have to add three textboxes where we can add the connection data, like address of the camera, username and password. And then the related buttons. Now we add the necessary eventhandler for the Connection and Disconnection buttons. And finally we set the windows property.

After that we can deal with the controls. Firstly we add the essential namespaces, which come from the Ozeki Camera SDK. Then we add the necessary object to display the image of the IP and USB camera. In the constructor we instantiate the objectsa above. Then we create a helpfunction, which creates and sets the videoviewer object and add it to the user interface. Now we establish the USB camera connection event handler. Here we create a web camera object and connect it to the BitmapSourceprovider and then start the camera. Then we implement USB camera disconnection, where we stop the videoviewer and web camera. At IP camera for the connection we add the camera address, the username and the password, then we can start the camera. The Disconnection happens like at the USB camera.

Now we come back to extend the user interface with two textboxes and two buttons. In the textboxes we add the server data: an IP address and a port number. In this case they will be the our IP address and a port number. With the Start button we start the server, and with the Stop button we stop the server. For the two buttons we generate two eventhandlers.

Now we add an essential namespace, the MJPEGStreaming.

After this we declare two new field to stream to website. An MJPEGStream instance and an IVideoSender instance.

After this we have to modify the USB and IP connection. Here we add reference to the _videosender.

Now we can deal with the Start button eventhandler. We instantiate the MJPEGStreamer with the IP address and Port number, then connect it to the _videoSender to VideoChannel of the _streamer. Furthermore we subscribe for two streamer events. For ClientConnected and for ClientDisconnected. Now we are to start the server.

In the two eventhandlers our only job is to start and stop the streaming.

Finally in the eventhandler with the Stop button we stop the stream and disconnect the _videosender and the VideoChannel of the streamer.

Now to check the result. First let's try the USB camera, then open a command prompt then with the ipconfig command we find out what is my IP address, which will be the IP address of the server. I trasmit this address and a port number and start the server, then I have a short HTML file, with an image tag, where the source is the address of the server. Let's try it in a browser. And it works. Now I stop the server, and the streaming is stopped as well, as it seems in the browser. Now let's try it with an IP camera. Add the necesarry data then connect. Now refresh the page and it works too.

I hope you enjoyed the video.

If you liked this video and you want to learn more about further great solutions provided by Ozeki Camera SDK, then download the trial version from our website www.camera-sdk.com and follow our tutorial videos. For more information check out our website, and if you have any questions, send us an email to info@camera-sdk.com.

In the next chapter Peter will show how you can stream the image of the camera during an SIP video call. It is gonna be exciting. Thanks for watching. See you in the next video. Bye.

More information