首页 > 其他分享 >WPF中以MVVM方式,实现RTSP视频播放

WPF中以MVVM方式,实现RTSP视频播放

时间:2023-09-25 14:47:41浏览次数:44  
标签:中以 MVVM Windows RTSP System Player using Config public

前言
视频播放在上位机开发中经常会遇到,基本上是两种常见的解决方案

1.采用厂家提供的sdk和前端控件进行展示,常见的海康/大华都提供了相关sdk及文档

2.开启相机onvif协议,捅过rtsp视频流进行播放,前端可以采用web方式,或者wpf中的视频控件进行展示。

项目需求,决定了最终采用开启相机onvif供能,wpf中播放的方式。

网络调研一阵子之后,基本都是推荐Vlc.DotNet或者libvlcsharp.wpf进行前端展示。

参考了很多代码,无论是官方文档,还是不同博客里的代码,很难做到用mvvm的方式对于逻辑解耦。

而且Vlc.DotNet已经不再更新了。

Libvlcasharp.wpf的设计有些反人类,可以参考这篇文章WPF中使用LibVLCSharp.WPF 播放rtsp - Naylor - 博客园 (cnblogs.com)

所以这部分逻辑写的很难受,需要寻找其他方案。

最近有空了,调研了几个其他开源项目,大家的思路都比较一致,相机打开onvif协议推送rtsp视频流,本地通过ffmpeg进行视频转流,然后推送到wpf前端控件上。

unosquare/ffmediaelement: FFME: The Advanced WPF MediaElement (based on FFmpeg) (github.com)

SuRGeoNix/Flyleaf: Media Player .NET Library for WinUI 3/ WPF/WinForms (based on FFmpeg/DirectX) (github.com)

网上有FFME的样例代码,我在本地搭建没有成功,应该是我的ffmpeg编译版本问题,可以参考这个项目。

DG-Wangtao/FFMEVideoPlayer: 使用FFmepg封装的WPF MideaElement,可以播放rtsp视频流。感谢 https://github.com/unosquare/ffmediaelement

最终选择了Flyleaf的方案,简单搭建了demo给大家参考。

Flyleaf官方项目地址SuRGeoNix/Flyleaf: Media Player .NET Library for WinUI 3/ WPF/WinForms (based on FFmpeg/DirectX) (github.com)

MVVM框架使用的是CommunityToolKit.MVVM

 

正文

Flyleaf的使用整体分成四步走,

1.App.xaml及App.xaml.cs中配置ffmpeg的dll文件地址;

1.1ffmpeg的dll文件,我才用的是Flyleaf官方sample中的文件,版本不是最新的。


1.2文件统一放在项目中的FFmpeg文件夹中


1.3生成操作(Build Action)配置为 无(None)


1.4复制到输出目录(Copy to Output Directory)配置为 如果较新则复制(Copy if newer)


1.5App.xaml中添加startup事件

    <Application x:Class="FlyleafDemo.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:FlyleafDemo"
                 StartupUri="MainWindow.xaml"
                 Startup="Application_Startup">
        <Application.Resources>
             
        </Application.Resources>
    </Application>

1.6App.xaml.cs中配置ffmpeg的dll路径,项目编译后会复制ffmpeg文件夹及dll。

    using FlyleafLib;
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Threading.Tasks;
    using System.Windows;
    
    namespace FlyleafDemo
    {
        /// <summary>
        /// Interaction logic for App.xaml
        /// </summary>
        public partial class App : Application
        {
            private void Application_Startup(object sender, StartupEventArgs e)
            {
                Engine.Start(new EngineConfig()
                {
                    FFmpegPath = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "FFmpeg"),
                    FFmpegDevices = false,    // Prevents loading avdevice/avfilter dll files. Enable it only if you plan to use dshow/gdigrab etc.
    
    #if RELEASE
                    FFmpegLogLevel      = FFmpegLogLevel.Quiet,
                    LogLevel            = LogLevel.Quiet,
    
    #else
                    FFmpegLogLevel = FFmpegLogLevel.Warning,
                    LogLevel = LogLevel.Debug,
                    LogOutput = ":debug",
                    //LogOutput         = ":console",
                    //LogOutput         = @"C:\Flyleaf\Logs\flyleaf.log",                
    #endif
    
                    //PluginsPath       = @"C:\Flyleaf\Plugins",
    
                    UIRefresh = false,    // Required for Activity, BufferedDuration, Stats in combination with Config.Player.Stats = true
                    UIRefreshInterval = 250,      // How often (in ms) to notify the UI
                    UICurTimePerSecond = true,     // Whether to notify UI for CurTime only when it's second changed or by UIRefreshInterval
                });
            }
        }
    }

2.ViewModel中配置参数等信息;

    using CommunityToolkit.Mvvm.ComponentModel;
    using CommunityToolkit.Mvvm.Input;
    using FlyleafLib.MediaPlayer;
    using FlyleafLib;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Media;
    
    namespace FlyleafDemo
    {
        public class MainViewModel:ObservableObject
        {
            private Player player;
    
            public Player Player
            {
                get => player;
                set => SetProperty(ref player, value);
            }
    
            private Config config;
    
            public Config Config
            {
                get => config;
                set => SetProperty(ref config, value);
            }
    
            private string uriString;
    
            public string UriString
            {
                get => uriString;
                set => SetProperty(ref uriString, value);
            }
    
            public IRelayCommand<string> PlayCommand { get; set; }
            public MainViewModel()
            {
                Config = new Config();
                Config.Video.BackgroundColor = Colors.Transparent;
                // 设置播放延迟为100ms,可能我理解有误,具体可以在项目issues里查看
                // Config.Player.MaxLatency = 100 * 10000;
    
                Player = new Player(Config);
                PlayCommand = new RelayCommand<string>(PlayAction);
                UriString = uri1;
            }
    
            private string currentUri = string.Empty;
            private string uri1 = "rtsp://192.168.20.2:554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif";
            private string uri2 = "rtsp://192.168.20.3:554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif";
            private void PlayAction(string uri)
            {
                if (!string.IsNullOrEmpty(uri))
                {
                    if (currentUri == uri1)
                    {
            //Player.Commands.Stop.Execute(null);
                        currentUri = uri2;
                        Player.Commands.Open.Execute(uri2);
                    }
                    else
                    {
            //Player.Commands.Stop.Execute(null);
                        currentUri = uri1;
                        Player.Commands.Open.Execute(uri1);
                    }
                }
            }
        }
    }

3.View中配置布局等信息;

    <Window
        x:Class="FlyleafDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:fl="clr-namespace:FlyleafLib.Controls.WPF;assembly=FlyleafLib"
        xmlns:local="clr-namespace:FlyleafDemo"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="800"
        Height="450"
        mc:Ignorable="d">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <fl:FlyleafHost
                AttachedDragMove="Both"
                KeyBindings="Both"
                Player="{Binding Player, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
                <Viewbox>
                    <TextBlock Foreground="DarkOrange" Text="Hello Flyleaf Overlay!" />
                </Viewbox>
            </fl:FlyleafHost>
            <Button
                Grid.Row="1"
                Command="{Binding PlayCommand}"
                CommandParameter="{Binding UriString, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
        </Grid>
    </Window>

4.在xaml.cs中确定View和ViewModel的绑定关系

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace FlyleafDemo
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.DataContext = new MainViewModel();
            }
        }
    }

 

总结

前端控件绑定比较方便,减少了在xaml.cs中的耦合逻辑
我尝试过三路视频同时播放,效果不错,系统资源消耗也不高
很多参数都可以在Config中配置,一些交互逻辑可以在Player中执行,比较清晰
但是,单视频控件切换视频流的时候,会有一定时间延迟,我尝试过使用
Player.Commands.Stop.Execute(null);
但效果不大。
感兴趣的可以深挖源码,我这里只是抛砖引玉。
Demo效果图如下

 


————————————————
版权声明:本文为CSDN博主「maoleigepu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/maoleigepu/article/details/133268837

 

标签:中以,MVVM,Windows,RTSP,System,Player,using,Config,public
From: https://www.cnblogs.com/maoleigepu/p/17727894.html

相关文章

  • [WPF] 随笔1:MVVM在ViewModel更新Image控件的BitmapImage值时报:必须在与 DependencyObj
    MVVM在ViewModel更新Image控件的BitmapImage值时报:必须在与DependencyObject相同的线程上创建DependencySource原因:必须在UI线程创建BitmapImage=>链接解决方案:使用MemoryStream加载图片,并在UI线程转换成BitmapImage=>链接接下来是我的写法Tip:我用的是MVVMLightViewM......
  • 国标GB28181视频平台EasyCVR调用rtsp地址返回IP不对是什么原因?
    EasyCVR是一款安防监控、云存储和磁盘阵列存储的视频汇聚平台,具有强大的可拓展性、灵活的视频能力和轻快的部署特点。它支持主流标准协议,如GB28181、RTSP/Onvif、RTMP等,还能够接入厂家私有协议和SDK,包括海康Ehome、海大宇等设备的SDK。EasyCVR能够将视频流以RTSP、RTMP、F......
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(6) -- 窗口控
    在我们窗口新增、编辑状态下的时候,我们往往会根据是否修改过的痕迹-也就是脏数据状态进行跟踪,如果用户发生了数据修改,我们在用户退出窗口的时候,提供用户是否丢弃修改还是继续编辑,这样在一些重要录入时的时候,可以避免用户不小心关掉窗口,导致窗口的数据要重新录入的尴尬场景。本篇随......
  • Android端如何实现拉取RTSP/RTMP流并回调YUV/RGB数据然后注入轻量级RTSP服务?
    技术背景我们在对接开发Android平台音视频模块的时候,遇到过这样的问题,厂商希望拉取到海康、大华等摄像机的RTSP流,然后解码后的YUV或RGB数据回给他们,他们做视频分析或处理后,再投递给轻量级RTSP服务模块或RTMP推送模块,实现处理后的数据,二次转发,本文以拉取RTSP流,解析后再注入轻量级RTS......
  • RK3568开发笔记(十一):开发版buildroot固件移植一个ffmpeg播放rtsp的播放器Demo
    前言  目标开发任务还有个功能,就是播放rtsp摄像头,当然为了更好的坐这个个,我们必须支持rtsp播放失败之后重新尝试,比如5s重新尝试打开一次,从而保障联网后重新打开,然后达成这个功能。 Demo   补充  得益于方案上的buildroot已经移植了ffmpeg4.1.3。  ......
  • WEB网页直接播放摄像头RTSP视频流方案汇总,服务器转码和直接播放对比!
    关于网页播放摄像头RTSP视频流,网上有很多免费开源方案,大多数是通过把RTSP转码成HLS或者RTMP视频流,然后通过Flash插件播放,但是大多数延迟非常高(比如:HLS延迟达到十几秒),并且播放多路或者播放高清视频也非常容易卡顿(服务器转码,资源消耗非常大)。下面介绍两种用的比较多的方案:1.ffmpeg......
  • 【Vue】大悟!MVVM模型
    hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~MVVM模型Vue虽然没有完全遵循MVVM模型,但Vue的设计也收到了它的启发在文档中也会使用VM(ViewModel的缩写)这个变量名表示Vue实例(Vue作者参考了MVVM模型,并非其创建的)img模型说明M:模型Model-对应data中的数......
  • 海康威视IPC摄像头rtsp接入
    海康威视IPC摄像头rtsp接入由于该设备辗转多人手中进行测试,不乏有人修改过密码等原因,导致默认的登录信息失效,因此需要使用海康威视官方渠道进行密码重置。默认信息#海康威视摄像头信息ip='192.168.1.64'port='8000'rtsp_port='554'user='admin'password='123......
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表
    在我们展示一些参考信息的时候,有所会用树形列表来展示结构信息,如对于有父子关系的多层级部门机构,以及一些常用如字典大类节点,也都可以利用树形列表的方式进行展示,本篇随笔介绍基于WPF的方式,使用TreeView来洗实现结构信息的展示,以及对它的菜单进行的设置、过滤查询等功能的实现逻辑......
  • 视频汇聚/视频云存储/视频监控管理平台EasyCVR分发rtsp流起播慢优化步骤详解
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,也具备接入AI智能分析的......