More info: www.camera-sdk.com Source code: http://www.camera-sdk.com/p_123-video-tutorial-on-how-to-record-video-in-c-onvif.html 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!

1. REC
How to implement
CAMERA RECORDING
for USB WEBCAM or IP CAMERA in C#.NET
!
SOURCE CODE:
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!
www.camera-sdk.com

2. Contents
Prerequisites
Creating a WPF project in Visual Studio
Building a camera viewer
Implementing the video recorder feature
Testing the application
!
SOURCE C2 O/ 1D7 E:
www.camera-sdk.com

3. 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.comand the camera SDK from www.camera-sdk.com, too.
3 / 17

4. 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

5. 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

6. 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

7. 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

8. 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 Ozeki.Media.IPCamera;
using Ozeki.Media.MediaHandlers;
using Ozeki.Media.MediaHandlers.Video;
using 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

9. 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

10. 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

11. 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

12. 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

13. 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:
_videoSender = _webCamera;
_videoSender = _ipCamera.VideoChannel;
Into the USB camera connection section:
Into the IP camera connection section:
13 / 17

14. 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

15. 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

16. 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

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