REC

How to implement

CAMERA RECORDING
for USB WEBCAM or IP CAMERA in C#.NET
Welcome to this presentation that explains step-by-step how to develop video
recording feature for your USB webcam and your IP camera / ONVIF IP camera in
C#.NET to be able to capture and save the camera image. Good luck, have fun!

SOURCE CODE:
www.camera-sdk.com

Contents
Prerequisites
Creating a WPF project in Visual Studio
Building a camera viewer
Implementing the video recorder feature
Testing the application

SOURCE CODE:
2 / 17
www.camera-sdk.com

Prerequisites
Windows PC
Broadband Internet connection
USB webcam or IP camera connected to your network
Microsoft Visual Studio + .NET Framework 4.0
OZEKI Camera SDK
Note: Make sure that you have stable Internet connection, and your PC and the camera is connected
to the same network. If it is needed, download and install the IDE and the .NET Framework from
www.microsoft.com and the camera SDK from www.camera-sdk.com, too.

3 / 17

Creating a WPF app in VS

Creating a new project

Click on the File and choose the New Project option

Choose the Visual C# WPF Application

Provide a name for your project and click on the OK

Add the Camera SDK into the References

Right-click on the References

Click on the Add Reference

Select the Browse tab and look for the VoIPSDK.dll

Select the .dll file and click on the OK

4 / 17

Building a camera viewer

Creating the GUI in the xaml file
Create 2 buttons for USB camera connection and disconnection:
<GroupBox Header="Connect to USB camera" Height="100" Width="150 HorizontalAlignment="Left"
VerticalAlignment="Top">
<Grid>
<Button Content="Connect" Width="75" Margin="32,19,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top"
Click="ConnectUSBCamera_Click"/>
<Button Content="Disconnect" Width="75" Margin="32,46,0,0"

HorizontalAlignment="Left" VerticalAlignment="Top"
Click="DisconnectUSBCamera_Click"/>
</Grid>
</GroupBox>

5 / 17

Building a camera viewer

Creating the GUI in the xaml file
Create 2 buttons and 3 textboxes (IP address, username, password) for IP cam connection/disconnection:
<GroupBox Header="Connect to IP camera" Height="100" Width="387" HorizontalAlignment="Left"
VerticalAlignment="Top" Margin="155,0,0,0">
<Grid>
<Label Height="25" Width="70" Content="Host" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Name="HostTextBox" HorizontalAlignment="Left" VerticalAlignment="Top" Height="23"
Width="169" Margin="68,2,0,0" TextWrapping="Wrap" />
<Label Height="25" Width="70" Content="Username" HorizontalAlignment="Left" Margin="0,26,0,0"
VerticalAlignment="Top"/>
<TextBox Name="UserTextBox" HorizontalAlignment="Left" VerticalAlignment="Top" Height="23"
Width="169" Margin="68,29,0,0" TextWrapping="Wrap"/>
<Label Height="25" Width="70" Content="Password" HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="0,52,0,0" />
<PasswordBox Name="Password" HorizontalAlignment="Left" VerticalAlignment="Top" Height="25"
Width="169" Margin="68,56,0,0"/>
<Button Content="Connect" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="267,16,0,0"
Width="75" Click="ConnectIPCamera_Click"/>
<Button Content="Disconnect" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="267,43,0,0"
Width="75" Click="DisconnectIPCamera_Click" />
</Grid>
</GroupBox>

6 / 17

Building a camera viewer

Creating the GUI in the xaml file

After you have created the GUI elements that allow the user to be able to connect to a USB or an
IP camera, you need to build a camera box to be able to display the camera image in the GUI:
<Grid Name="CameraBox" Margin="10,105,10,166"/>

Set the window property as follows:

ResizeMode="NoResize" WindowStartupLocation="CenterScreen">

7 / 17

Building a camera viewer

Building the image displaying feature in the xaml.cs file
In the xaml.cs file, first of all, you need to add some extra using lines. All the essential namespaces
are determined by the camera software:
using
using
using
using

Ozeki.Media.IPCamera;
Ozeki.Media.MediaHandlers;
Ozeki.Media.MediaHandlers.Video;
Ozeki.Media.Video.Controls;

After this, you need to add some objects that are needed for displaying the camera image:
private VideoViewerWPF _videoViewerWpf;
private BitmapSourceProvider _provider;
private IIPCamera _ipCamera;
private WebCamera _webCamera;
private MediaConnector _connector;

8 / 17

Building a camera viewer

Building the image displaying feature in the xaml.cs file
Instantiate the objects in the constructor and call the SetVideoViewer() helpfunction:
public MainWindow()
{
InitializeComponent();
_connector = new MediaConnector();
_provider = new BitmapSourceProvider();
SetVideoViewer();
}

Create the SetVideoViewer() helpfunction that creates and sets the videoviewer object and add it to the GUI:
private void SetVideoViewer()
{
_videoViewerWpf = new VideoViewerWPF
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Background = Brushes.Black
};
CameraBox.Children.Add(_videoViewerWpf);
_videoViewerWpf.SetImageProvider(_provider);
}

9 / 17

Building a camera viewer

Building the image displaying feature in the xaml.cs file
Implement the USB camera connector and disconnector:
private void ConnectUSBCamera_Click(object sender, RoutedEventArgs e)
{
_webCamera = WebCamera.GetDefaultDevice();
if (_webCamera == null) return;
_connector.Connect(_webCamera, _provider);
_webCamera.Start();
_videoViewerWpf.Start();
}
private void DisconnectUSBCamera_Click(object sender, RoutedEventArgs e)
{
_videoViewerWpf.Stop();
_webCamera.Stop();
_webCamera.Dispose();
_connector.Disconnect(_webCamera, _provider);
}

10 / 17

Building a camera viewer

Building the image displaying feature in the xaml.cs file
Implement the IP camera connector/disconnector (including the required network parameters as well):
private void ConnectIPCamera_Click(object sender, RoutedEventArgs e)
{
var host = HostTextBox.Text;
var user = UserTextBox.Text;
var pass = Password.Password;
_ipCamera = IPCameraFactory.GetCamera(host, user, pass);
if (_ipCamera == null) return;
_connector.Connect(_ipCamera.VideoChannel, _provider);
_ipCamera.Start();
_videoViewerWpf.Start();
}
private void DisconnectIPCamera_Click(object sender, RoutedEventArgs e)
{
_videoViewerWpf.Stop();
_ipCamera.Disconnect();
_ipCamera.Dispose();
_connector.Disconnect(_ipCamera.VideoChannel, _provider);
}

11 / 17

Implementing the recording

Extending the GUI in the xaml file
Create 2 buttons that will start and stop the video capturing (after you have added the additional
elements, you need to generate 2 eventhandler methods for them):
<GroupBox Header="Function" Height="160" Width="542" Margin="0,360,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Start video capture"
HorizontalAlignment="Center" VerticalAlignment="Center"
Click="StartCapture_Click" Width="120" Height="50"/>
<Button Grid.Column="1" Content="Stop video capture"
HorizontalAlignment="Center" VerticalAlignment="Center"
Click="StopCapture_Click" Width="120" Height="50"/>
</Grid>
</GroupBox>

12 / 17

Implementing the recording

Building the video recorder in the xaml.cs file
Declare 2 new fields for video recording.
These two objects are the followings: IVideoSender and MPEG4Recorder:
private MPEG4Recorder _recorder;
private IVideoSender _videoSender;

You need to instantiate them at USB webcam connection and IP camera connection as well by
inserting both of the following lines:
Into the USB camera connection section:

_videoSender = _webCamera;

Into the IP camera connection section:

_videoSender = _ipCamera.VideoChannel;

13 / 17

Implementing the recording

Building the video recorder in the xaml.cs file
To differentiate the captured streams, their file name will contain the current date and time. The
destination folder will be the place of the program. Instantiate the recorder and subscribe the
eventhandler method for the MultiplexFinished event. Connect the videosender and the recorder:
private void StartCapture_Click(object sender, RoutedEventArgs e)
{
if (_videoSender == null) return;
var date = DateTime.Now.Year + "-" + DateTime.Now.Month + "-" + DateTime.Now.Day + "-" +
DateTime.Now.Hour + "-" + DateTime.Now.Minute + "-" +
DateTime.Now.Second;
var currentpath = AppDomain.CurrentDomain.BaseDirectory + date + ".mpeg4";
_recorder = new MPEG4Recorder(currentpath);
_recorder.MultiplexFinished += _recorder_MultiplexFinished;
_connector.Connect(_videoSender, _recorder.VideoRecorder);
}

14 / 17

Implementing the recording

Building the video recorder in the xaml.cs file
Create the eventhandler method. Unsubscribe from the event and dispose the recorder. To be able
to stop capturing, you need to disconnect and call the Multiplex method that creates the video.
void _recorder_MultiplexFinished(object sender, Ozeki.VoIP.VoIPEventArgs<bool> e)
{
_recorder.MultiplexFinished -= _recorder_MultiplexFinished;
_recorder.Dispose();
}
private void StopCapture_Click(object sender, RoutedEventArgs e)
{
if (_videoSender == null) return;
_connector.Disconnect(_videoSender, _recorder.VideoRecorder);
_recorder.Multiplex();
}

15 / 17

Testing the application

Run the application and test the video recorder
Step 1: Connect to a camera
USB webcam: Click on Connect
IP camera: Enter the IP address of the camera, its
username and password, then click on Connect

Step 2: Start capturing

Click on Start video capture

Step 3: Finish capturing and save the video file

Click on Stop video capture
Step 4: Watch the video file

16 / 17

Thank you for your attention!

To sum it up, the ONVIF-compliant OZEKI Camera SDK provides great background
support for your IP camera, ONVIF IP camera and USB webcam developments by
offering prewritten components to your development environment. Building a
video recorder to capture the camera stream is easy as that.

For more information please visit our website:

www.camera-sdk.com
or send us an e-mail to:

info@camera-sdk.com

SOURCE CODE:
www.camera-sdk.com