Category Archives: Dashing Quill

Capturing webcam using DirectShow.NET library


I’m using DirectShow.NET library to capture and preview all webcams connected to my PC.

Download Demo | Download Source Code | Latest file available here (.msi)

Origianl Source code of DirectShow.NET Library edited by Muaz Khan

What is DirectShow.NET?

DirectShow.NET is a library for manage code (.NET framework) that allows developers access (preview/capture) video devices (webcams, TV-tunnels, scanners etc.) by using simple objects like enums, structs and interfaces. Developers don’t have to worry about filters, memory addresses, and GUIDs as C++ and COM developers do all these things manually.

Filters filters = new Filters();

Filters” class do following jobs:

  1. Track all video devices attached to your PC
  2. Track all audio devices attached to your PC
  3. Track all video compressors
  4. Track all audio compressors

To access first video device (webcam) and first audio device connected to your PC:

Capture capture = new Capture(
    filters.VideoInputDevices[0],
    filters.AudioInputDevices[0]
);

By setting “PreviewWindow” property; you can preview the captured video into a panel or in any container windows forms control:

capture.PreviewWindow = panel;

In the above line, “panel” is System.Windows.Forms.Panel object.

And your last task is start previewing the video stream!

capture.Start();

To save the captured video into the Disk device; you’ve to set “FileName” property:

if (!capture.Cued) capture.Filename = "captured-video.wmv";

For tracking second or third video or audio device connected to your PC, just increment the index:

Capturecapture = new Capture(
    filters.VideoInputDevices[increment_index],
    filters.AudioInputDevices[increment_index]
);

It is better to use first audio device (index: 0) if all webcams are placed in the same room.

In case, when there is no video device attached to your PC, the program will throw an error. I recommend you use this technique instead of using try-catch blocks to handle the error:

if (filters.VideoInputDevices != null)
{

// all code goes here

}

To stop streaming (previewing or capturing into disk):

capture.Stop();

To capture as quickly as possible, use “capture.Cue()” method:

capture.Cue();

capture.Start();

This will speedup streaming/capturing into disk.

In the demo project, I’m not only previewing and capturing into disk but also using timer to automatically change file name after each 10 minutes.

I’m using timer because the size of video file goes into GB after some time; so we’ve to split video files for FTP upload or other uses!

timer.Interval = 600000; // 10 minutes!

In the “Tick” event of the “timer” object:

counter++;
if (!capture.Cued) capture.Filename = counter + ".wmv";

Where I’m incrementing “counter” object on each tick.

I’m capturing video into “WMV” file; you can also use “AVI” or other supported formats.

DirectShow supports ASF, WMA, WMV, AIFF, AU, AVI, MIDI, SND, and WAV video formats.

You can also compress the video:

capture.VideoCompressor = filters.VideoCompressors[0];
capture.AudioCompressor = filters.AudioCompressors[0];

DirectShow supports compression formats such as H.264, AAC, Cinepak, DV (Digital Video), ISO MPEG-4 video version 1.0, Microsoft MPEG-4 version 3, MJPEG, MPEG Audio Layer-3 (MP3) (decompression only), MPEG-1 layer I and layer II audio, MPEG-1 video, MPEG-2 audio, and MPEG-2 video.You can also use third party codecs.

Downloads:

  1. Download DirectShow.NET Library
  2. Download Demo
  3. Download Source Code of the Demo Project
  4. Origianl Source code of DirectShow.NET Library edited by Muaz Khan

Updated at March 1, 2013:

You can set width and height of the “panel” element to control frame size (i.e. min/max width/height) of the preview screen:

panel.Width = this.Width;
panel.Height = this.Height;

Above two lines will set panel’s width and height equal to current window’s width and height.

Advertisements

Javascript and CSS3 only sliding up/down transition effects



First of all – View the Demo!

You’ve to apply following class to the element you want to slide up/down.

.sliding-effect
{
    -webkit-transition:     max-height .8s ease;
    -moz-transition:        max-height .8s ease;
    -o-transition:          max-height .8s ease;
    -ms-transition:         max-height .8s ease;
    transition:             max-height .8s ease;

    /* To hide by default, setting max-height 
          and opacity = 0 */
    max-height:     0;
    opacity:        0;
    overflow:       hidden;
}

/* <img src="/image.jpg" alt="" width="167" 
          height="186" />  */

By default: Above class is hiding the element; however, you can customize it.

You’ve to call two Javascript functions: 1) slideDown and 2) slideUp as shown here:

var element = document.getElementById( 'id' );

slideDown(element); /* show */
slideUp(element)    /* hide */

And slide up/down functions:

function slideDown( elem )
{
    elem.style.maxHeight = '600px';
    elem.style.opacity   = '1';
}

function slideUp( elem )
{
    elem.style.maxHeight = '0';
    once( 1, function ()
    {
        elem.style.opacity = '0';
    } );    
}

function once( seconds, callback ) /* Execute once after the specified interval */
{
    var counter = 0;
    var time = window.setInterval( function ()
    {
        counter++;
        if ( counter >= seconds )
        {
            callback();
            window.clearInterval( time );
        }
    }, 1000 );
}

We’re using a timer to set opacity = 0 because setting max-height = 0 doesn’t (completely) hide the element.

CSS3 transforms can be used for sliding up-down effects

Early in this article, we used CSS3 transition for sliding up and down effects; however we can use CSS3 transforms to make same sliding effect. One point you must remember is that CSS3 transforms are less supported than CSS3 transitions; especially on mobile web-browsers.

Let us create slide-down effect with keyframes of CSS3 transforms:

/* For WebKit web-browsers: Chrome/Safari */
@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}/* For Gecko: Mozilla Firefox */
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

And here we are calling above keyframes:

.slide-Down /* Slide-Down effect */
{
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

Chris Coyier of CSS-Tricks.com wrote an article Pop From Top Notification. The demo he created in the article is using CSS3 transforms for sliding-down effect. You can view his demo or download in zip format.