Video tutorial on how to stream the image of the camera to smartphone using server in C#

This video demonstrates how you can build a camera server application and streaming the image of the camera from USB and IP camera to different kind of devices 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 watch the camera stream in for example: RTSP streaming supported desktop application (Windows Media Player, VLC) and on different mobile operation systems like Android, Windows Phone, iOS.

 


Download Video: TutorialVideo8.zip
Download source code: Basic_CameraViewer_8.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 eight. In this tutorial I will create a simple project to connect ipcamera or usb camera and stream the camera image to smartphone.

This is the 8. 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
  • Useful

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 a WPF solution in Visual Studio
  • Third step - Implement the camera viewer application
  • Fourth step - Extend the application with streaming the image of the camera to smartphone function.
  • and finally the Fifth step - Check the result and we try out our application

And let's start now with the step one.

Before we start developing we will need the Ozeki Camera SDK. You can download it on the www.camera-sdk.com. You need to registrate yourself, which means adding a name, email address and a reason why you need this SDK. After that you will get the downloading link. The installation is simple, but if you are not sure you can find a description on the Quick Start section of our website.

First, we have to create a new WPF solution. Click on the New Project and choose the WPF project and give a name. Click on the OK button. When the project is opened, we have to add the System.Drawing.dll and the OzekiSDK.dll as a reference. When you find the file click on the OK button. We can see them in the reference list.

We will need some controls to handle our project. We need 2 groupbox controls, a separate USB camera and an IP camera. The USB camera groupbox has 2 buttons to connect and disconnect the camera.

Moreover, the IP camera groupbox has a little bit more controls. Need 3 textboxes for authentication. We have to give the current IP address, the username and the password if it is required. We will need 2 buttons to connect and disconnect the camera.

Furthermore, we will create a cameraviewer in the CameraBox control. Finally, we create one more groupbox, for the new features that we will implement in the following tutorials. When the controls are ready, I create the buttons click event. And I resize our application.

We have to add 4 namespaces:

  • Ozeki.Media.IPCamera
  • Ozeki.Media.MediaHandlers.
  • Ozeki.Media.MediaHandlers.Video
  • and Ozeki.Media.Video.Controls

We need some variable to handle our application. We initialize the mediaconnector and the bitmapsourceprovider in the main constructor. After that we create and set the cameraviewer control and add it to the grid called Camerabox and we have to set the bitmapsourceprovider instance to the videoviewer control.

Finally, we have to write the connect and the disconnect buttons. We will get the default device to our web camera instance and start the viewer and connect our webcamera to the mediaconnector. In the disconnect_usb_camera_click event, we stop the viewer and the web camera. These were the web camera start and stop methods.

Now we implement the connect and the disconnect buttons for the IP camera. We have to know what is the correct IP adress of the camera. We'll probably need a username and a password for the connection. Based on the given data we connect to the selected IP camera. and start the viewer and the ipcamera in the connect button click event. In the disconnect_ip_camera_click event, we stop the viewer and the ipcamera. These were the IP camera connect and disconnect methods.

Now i extend the XAML code. I create a listbox and a groupbox control which will contain the other controls. I define the rows and the coloumns within the Groupbox control. I need a textbox which will contain the server address in the text property. Moreover it is possible to provide the port number in an additional textbox (control), but this is optional. Finally, I will need 2 more buttons for starting the server, and for stoping it. And I have to set the buttons click events, the StartServer and the StopServer event.

I remove the unnecessary rows. I have to add a class to my project, Name: MyServer I also have to use some namespace in my class.

  • Ozeki.Media.IPCamera
  • Ozeki.Media.IPCamera.Server
  • Ozeki.Media.MediaHandlers

I need to set a base class to MyServer class. This base class is the IPCameraServer class. I need a MediaConnector, IPCameraClient object. And I will use a VideoSender property in the future. I also need an event. I initialize the mediaconnector in the main constructor. ClientsChanged method will indicate when a new client connects or disconnects from our server. Due to the base class I can overwrite some methods. I overwrite the OnClientConnected method and in this method I will connect the client to the image of the camera. Then I call the ClientsChanged method. I also overwrite the OnClientDisconnected method. In this method I will disconnect the client from the image of the camera. MyServer class is ready now. Let's continue implementing the other class.

I need a videosender object, which will contain the image of the camera. And we need an instance from MyServer class, the one we finished previously. I initialize the Myserver instance in the constructor. The videosender instance should be equal to the image of the web camera and to the videochannel of the IP camera. I have to access the GUIThread. I will start the server in the StartServer_Click event, and I will need the correct details. I provide the value of the videosender to the videosender of the myserver instance. I subscribe to an event, which I defined in the myserver class. And I set the listening address. In the on-client-count-changed event I fill in the listbox with the remote-end-point property of the connected clients. In the stop-server_click event i unsubscribe from the event and I stop the server.

Now we are ready, let's try out our application. I am trying to connect an IP camera. I provided the correct details and the camera image is appeared. For starting the server I have to know what my IP adress is. Windows button -> CMD -> IPCONFIG -> IPv4 Address. 192.168.0.101 And I set my IP adress. And I also have to set the port number. I start the server and I try to connect to my server via my personal smartphone. First, you need to have an application which you will connect to the server. For example you can download the VLC mediaplayer from the mobile Store (it's free). I will use the VLC player to connect it to the server. Let's start the application and try to connect. I have to provide the network address and the authentication. rtsp://admin:admin@192.168.115.72/554 and open the address. The camera image is appeared and a client's information is in the listbox. Now I can see the camera image on my smartphone. It is really useful.

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 David will build an application and he will stream the camera image to website. It is gonna be exciting and easy. If you liked this video subscribe to our youtube channel. Thanks for watching. See you in the next video. Bye.

More information