WPF Alternative Camera Video and Preview

Controls using third-party controls to record video directly in WPF were not found (does aforgenet seem to be unmaintained?WPFMediaKit seems to only take pictures with a camera.Charge-free controls are not used and do not comment.)

Through Baidu (thank you: https://www.cnblogs.com/giserlong88/p/11244779.html), it is determined that rtmp streaming server can be saved and previewed by FFmpeg+Nginx+Vlc.DotNet.Wpf through FFmpeg (with delay). The solution is to realize video recording by FFmpeg and push it to rtmp streaming media server set up by Nginx, then WPF pulls rtmp streaming server by Vlc.DotNet.WpfContent for video preview.

The code is as follows:

Start by downloading FFmpeg (http://ffmpeg.org/download.html), Nginx (http://nginx.org/en/download.html), and Nuget a reference to Vlc.DotNet.Wpf to download the libvlc player it needs.

The nginx-win-rtmp.conf configuration file contains the following:
#user  nobody;
# multiple workers works !
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;
#worker_rlimit_nofile 100000;   #Change the maximum number of open files limit for worker processes
                                               #If not set, this value is a limitation of the operating system.
                                               #After setup, your operating system and Nginx can handle more files than ulimit-a
                                               #So set this value high so that nginx won't have "too many open files" problems


events {
    worker_connections  8192;#Set the maximum number of connections that can be opened simultaneously by a worker process
                              #If you set the worker_rlimit_nofile mentioned above, we can set this value very high
    # max value 32768, nginx recycling connections+registry optimization = 
    #   this.value * 20 = max concurrent connections currently tested with one worker
    #   C1000K should be possible depending there is enough ram/cpu power
    # multi_accept on;
}

rtmp {
    server {
        listen 1935;#Listening port, if occupied, can be changed
        chunk_size 4000;#Upload flv file block size
        application live { #Create an application called live
             live on;#Open up the application of live
             allow publish 127.0.0.1;#
             allow play all;
        }
    }
}

http {
    #include      /nginx/conf/naxsi_core.rules;
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr:$remote_port - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

#     # loadbalancing PHP
#     upstream myLoadBalancer {
#         server 127.0.0.1:9001 weight=1 fail_timeout=5;
#         server 127.0.0.1:9002 weight=1 fail_timeout=5;
#         server 127.0.0.1:9003 weight=1 fail_timeout=5;
#         server 127.0.0.1:9004 weight=1 fail_timeout=5;
#         server 127.0.0.1:9005 weight=1 fail_timeout=5;
#         server 127.0.0.1:9006 weight=1 fail_timeout=5;
#         server 127.0.0.1:9007 weight=1 fail_timeout=5;
#         server 127.0.0.1:9008 weight=1 fail_timeout=5;
#         server 127.0.0.1:9009 weight=1 fail_timeout=5;
#         server 127.0.0.1:9010 weight=1 fail_timeout=5;
#         least_conn;
#     }

    sendfile        off;
    #tcp_nopush     on;

    server_names_hash_bucket_size 128;

## Start: Timeouts ##
    client_body_timeout   10;
    client_header_timeout 10;
    keepalive_timeout     30;
    send_timeout          10;
    keepalive_requests    10;
## End: Timeouts ##

    #gzip  on;

    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        ## Caching Static Files, put before first location
        #location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        #    expires 14d;
        #    add_header Vary Accept-Encoding;
        #}

# For Naxsi remove the single # line for learn mode, or the ## lines for full WAF mode
        location / {
            #include    /nginx/conf/mysite.rules; # see also http block naxsi include line
            ##SecRulesEnabled;
              ##DeniedUrl "/RequestDenied";
              ##CheckRule "$SQL >= 8" BLOCK;
              ##CheckRule "$RFI >= 8" BLOCK;
              ##CheckRule "$TRAVERSAL >= 4" BLOCK;
              ##CheckRule "$XSS >= 8" BLOCK;
            root   html;
            index  index.html index.htm;
        }

# For Naxsi remove the ## lines for full WAF mode, redirect location block used by naxsi
        ##location /RequestDenied {
        ##    return 412;
        ##}

## Lua examples !
#         location /robots.txt {
#           rewrite_by_lua '
#             if ngx.var.http_host ~= "localhost" then
#               return ngx.exec("/robots_disallow.txt");
#             end
#           ';
#         }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000; # single backend process
        #    fastcgi_pass   myLoadBalancer; # or multiple, see example above
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl spdy;
    #    server_name  localhost;

    #    ssl                  on;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_timeout  5m;

    #    ssl_prefer_server_ciphers On;
    #    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

Place the downloaded FFmpeg, Nginx, and libvlc in the Debug directory.

The directory structure is as follows

Debug

    FFmpeg

         ffmpeg.exe

         ......

   Nginx

        nginx.exe

        ......

   libvlc

         win-x64

            ......

         win-x86

           ......

Create a new WPF project in MainWindow.xaml that handles starting Nginx and pushing

<Window x:Class="VideTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="MainWindow_OnLoaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <WrapPanel>
            <TextBox Name="SavePath" Text="D:\test.mp4" Width="94" HorizontalAlignment="Left"></TextBox>
            <TextBox Name="VideoName" Text="Logitech HD webcam C930c" Width="94" HorizontalAlignment="Left"></TextBox>
            <TextBox Name="AudioName" Text="Microphone (Logitech HD webcam C930c)" Width="94" HorizontalAlignment="Left"></TextBox>
            <Button Content="1,Start Video Monitoring" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="107" Click="ButtonStart_OnClick"/>
            <Button Content="2,start recording" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="ButtonSase_OnClick"/>
            <TextBlock Text="Monitor video will be visible in the main interface about 5 seconds after recording starts"></TextBlock>
        </WrapPanel>
        <Border Grid.Row="1">
            <Image x:Name="img"></Image>
        </Border>
        
    </Grid>
</Window>

The camera and microphone in the text box were detected using the commands in the Load that was issued.

Background code:

using System;
using System.Diagnostics;
using System.IO;
using System.Reflection;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using Vlc.DotNet.Core;
using Vlc.DotNet.Wpf;


namespace VideTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private readonly string ffmpegPath = $"{AppDomain.CurrentDomain.BaseDirectory}FFmpeg/ffmpeg.exe";
        private readonly string nginxPath = @"nginx.exe -c conf\nginx-win-rtmp.conf";
        private VlcVideoSourceProvider sourceProvider;
        public MainWindow()
        {
            InitializeComponent();
        }
        private void MediaPlayer_Log(object sender, VlcMediaPlayerLogEventArgs e)
        {
            var message = "libVlc : " + e.Level + e.Message + e.Module;
            Debug.WriteLine(message);
        }

        private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
        {  
            //var ffmpegPath = $"{AppDomain.CurrentDomain.BaseDirectory}FFmpeg/ffmpeg.exe";
            ////Show available sound devices
            //var ffmpegArgument = " -list_devices true -f dshow -i dummy";

            //var process = new System.Diagnostics.Process();
            //var startInfo = new System.Diagnostics.ProcessStartInfo();
            //startInfo.FileName = ffmpegPath;
            //startInfo.Arguments = ffmpegArgument;
            //startInfo.UseShellExecute = false;
            //startInfo.RedirectStandardOutput = true;
            //startInfo.RedirectStandardError = true;

            // FFmpeg output will not be Chinese scrambled after changing StandardErrorEncoding to UTF-8
            //startInfo.StandardErrorEncoding = System.Text.Encoding.UTF8;

            //process.EnableRaisingEvents = true;
            //process.StartInfo = startInfo;
            //process.Start();

            // Displays the contents of the FFMpeg output, taking out the names of video and audio devices
            //string output = process.StandardError.ReadToEnd();
            //Debug.WriteLine(output);
            //process.WaitForExit();
        }

        private void ButtonSase_OnClick(object sender, RoutedEventArgs e)
        {
            var file=new FileInfo(SavePath.Text);
            if(file.Exists) file.Delete();
            var ffmpegArgument = $" -f dshow -i video=\"{VideoName.Text}\" -f dshow -i audio=\"{AudioName.Text}\" -vcodec libx264 -acodec aac -strict -2 \"{SavePath.Text}\" -f flv rtmp://127.0.0.1:1935/live/home";
            Task.Run(() =>
            {
                var process = new Process();
                var startInfo = new ProcessStartInfo
                {
                    FileName = ffmpegPath,
                    Arguments = ffmpegArgument,
                    UseShellExecute = true,
                    RedirectStandardOutput = false

                };
                process.StartInfo = startInfo;
                process.Start();
                process.WaitForExit();
            });
        }

        private void ButtonStart_OnClick(object sender, RoutedEventArgs e)
        {
            Task.Run(() =>
            {
                var process = new Process();
                var startInfo = new ProcessStartInfo("cmd.exe")
                {
                    WorkingDirectory= $@"{AppDomain.CurrentDomain.BaseDirectory}nginx",
                    UseShellExecute = false,
                    RedirectStandardInput = true
                };
                process.StartInfo = startInfo;
                
                process.Start();
                process.StandardInput.WriteLine(nginxPath);
                process.StandardInput.AutoFlush = true;
                process.WaitForExit();
            });
            Dispatcher?.Invoke(() =>
            {
                var currentAssembly = Assembly.GetEntryAssembly();
                var currentDirectory = new FileInfo(currentAssembly.Location).DirectoryName;

                var libDirectory = new DirectoryInfo(System.IO.Path.Combine(currentDirectory, "libvlc",
                    IntPtr.Size == 4 ? "win-x86" : "win-x64"));

                sourceProvider = new VlcVideoSourceProvider(Dispatcher);
                sourceProvider.CreatePlayer(libDirectory);
                sourceProvider.MediaPlayer.Play("rtmp://127.0.0.1:1935/live/home");
                sourceProvider.MediaPlayer.Log += MediaPlayer_Log;
                sourceProvider.MediaPlayer.Manager.SetFullScreen(sourceProvider.MediaPlayer.Manager.CreateMediaPlayer(),
                    true);
                var bing = new Binding {Source = sourceProvider, Path = new PropertyPath("VideoSource")};
                img.SetBinding(Image.SourceProperty, bing);
            });
            MessageBox.Show("Start successfully, please click to start recording.");
        }
    }
}

This enables WPF to record and preview recorded video content by clicking on buttons 1 and 2 in sequence.

We also override the exit event in APP.cs to end Nginx execution when the program exits.

public partial class App : Application
    {
        protected override void OnExit(ExitEventArgs e)
        {
            var process = new Process();
            var startInfo = new ProcessStartInfo()
            {
                FileName = "taskkill",
                Arguments = " /f /im nginx.exe",
                UseShellExecute = false,
                RedirectStandardInput = true
            };
            process.StartInfo = startInfo;

            process.Start();
            process.WaitForExit();
        }
    }

So far, we have realized the function of WPF for video recording and preview of recorded video content.

Published 85 original articles. Accepted 31. Visited 260,000+
Private letter follow

Tags: Nginx PHP MediaPlayer Windows

Posted on Sat, 08 Feb 2020 19:15:45 -0800 by adamjones