AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.72k stars 2.22k forks source link

Video Player #2571

Closed TheSuunny closed 1 year ago

TheSuunny commented 5 years ago

Hi, is there any way to play the video through Avalonia?

I found a project, but it works only on Windows, i would like cross-platform.

WamWooWam commented 5 years ago

To do this in Avalonia itself seems not-super-feasible, because you'd have to either include some kind of cross platform media player (VLC?), codecs or libraries (like libavcodec) with Avalonia itself (which is a lot of data most people don't need, and probably wouldn't perform great), or hook the low level media APIs in every single supported operating system, which wouldn't be super easy as far as i can tell?

jmacato commented 5 years ago

I think this won't be in our focus for the time-being, as @WamWooWam said, it's a bit tricky to coordinate a sane approach towards media decoding. First off we have a crippling bug for this kind of applications (#2244) because we need to shuttle image data to-&-fro native codecs to managed .NET space and thus will definitely rely with critical time rendering (#2185). Wrappers like FFMpeg.Autogen will definitely ease it up but for now it'd have to take a backseat.

Sergey-Terekhin commented 5 years ago

May be this project can be ported to Avalonia: https://github.com/unosquare/ffmediaelement - it already has wrappers around ffmpeg and some WPF controls which relatively easy can be ported

jmacato commented 5 years ago

@Sergey-Terekhin yes I've been aware of that project even before I got into Avalonia, but there are still some bugs (#2244) that we need to address first to have an acceptable media playback experience. Besides porting that is not for the faint-hearted, trust me coz i tried before and i judged that we're better off learning how it interacts with ffmpeg.autogen instead of porting ffmediaelement outright.

shawnallen85 commented 3 years ago

https://github.com/videolan/libvlcsharp/pull/173

Started working on this and hopefully it gets merged in. I've tested it on Windows, MacOS, and Linux (only Ubuntu so far) and it works pretty well.

simonmurrell commented 3 years ago

@shawnallen85 Is there a way to plug your video extension into an Avalonia UI application?

shawnallen85 commented 3 years ago

Sorry for the delay -- this is what I have in my code for using the video extension:

In the XAML:

    <Panel>
        <controls:Video MediaPlayer="{Binding MediaPlayer}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Panel>

In the view model:

I have a property for the MediaPlayer (referenced above in the XAML):

public MediaPlayer MediaPlayer { get; }

Then in my functions I control the media player -- that being I start/stop/change the media, etc.

I hope that helps -- let me know.

Happy Thursday! Shawn

Edit:

I just noticed this, but my code is referencing the control before it was integrated into the LibVLC project officially -- controls:Video might actually be controls:VideoView.

I think the rest is the same.

simonmurrell commented 3 years ago

Do you have a simple demo with this in?

Sorry for the delay -- this is what I have in my code for using the video extension:

In the XAML:

    <Panel>
        <controls:Video MediaPlayer="{Binding MediaPlayer}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Panel>

In the view model:

I have a property for the MediaPlayer (referenced above in the XAML):

public MediaPlayer MediaPlayer { get; }

Then in my functions I control the media player -- that being I start/stop/change the media, etc.

I hope that helps -- let me know.

Happy Thursday! Shawn

Edit:

I just noticed this, but my code is referencing the control before it was integrated into the LibVLC project officially -- controls:Video might actually be controls:VideoView.

I think the rest is the same.

shawnallen85 commented 3 years ago

I don't -- I'll see if I can modify the app I was using this in to use the official control and push it to github in the next day or so.

shawnallen85 commented 3 years ago

I figured if I didn't knock it out now it wouldn't happen anytime soon :P.

https://github.com/shawnallen85/Homer

simonmurrell commented 3 years ago

Thanks. I will give it a whirl!

From: Shawn Black @.> Sent: 18 March 2021 16:47 To: AvaloniaUI/Avalonia @.> Cc: Simon Murrell @.>; Comment @.> Subject: Re: [AvaloniaUI/Avalonia] Video Player (#2571)

I figured if I didn't knock it out now it wouldn't happen anytime soon :P.

https://github.com/shawnallen85/Homer

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/AvaloniaUI/Avalonia/issues/2571#issuecomment-801988519, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB7O7J3FEC7ST3B3FOAL53LTEIG7DANCNFSM4HPSWYWQ.

shawnallen85 commented 3 years ago

@simonmurrell Any luck?

zls3201 commented 3 years ago

I success。 you can read

https://github.com/donandren/vlcsharpavalonia/blob/master/src/LibVLCSharp.Avalonia/NativeVideoPresenter.cs

https://github.com/hudec117/Mpv.NET-lib-/blob/master/src/Mpv.NET.WPFExample/MainWindow.xaml.cs

My Code:

*.csproj add line

<PackageReference Include="Mpv.NET" Version="1.2.0" />
/// <summary>
    /// Avalonia VideoView for Windows, Linux and Mac.
    /// </summary>
    public class VideoView : NativeControlHost
    {
        private MpvPlayer player;
        IPlatformHandle CreateWin32(IPlatformHandle parent)
        {
            //var control = base.CreateNativeControlCore(parent);
            player = new MpvPlayer(parent.Handle, "win-x64/mpv-1.dll")
            {
                Loop = true,
                Volume = 100
            };
            player.Load("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
            player.Resume();

            return parent;// new PlatformHandle(control.Handle, "HWND");

        }

        void DestroyWin32(IPlatformHandle handle)
        {
            player.Dispose();
            base.DestroyNativeControlCore(handle);
        }

        protected override IPlatformHandle CreateNativeControlCore(IPlatformHandle parent)
        {
            if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
                return CreateWin32(parent);
            return base.CreateNativeControlCore(parent);
        }

        protected override void DestroyNativeControlCore(IPlatformHandle control)
        {
            if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
                DestroyWin32(control);

            base.DestroyNativeControlCore(control);
        }
    }

xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"          
        xmlns:vlc="clr-namespace:ZTool.Common;assembly=ZTool"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="ZTool.Controls.VideoPlayerView">
    <vlc:VideoView  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</UserControl>
bbhxwl commented 3 years ago

Do any of you have a simple VLC demo? I want to use it on raspberry pie, otherwise I can only use pyqt5 it, but I'm familiar with C#

Symbai commented 3 years ago

@shawnallen85 There is currently no way to draw something on top of the mediaplayer (because it has no content property) but for LibVLCSharp's WPF implementation it is. Any chance this can be done for Avalonia as well?

Geektoolkit commented 2 years ago

Seconding this....I'd really really like to be able to draw on top of the video. Right now event trying to put something on top of it in Z order isn't working (I'm not using full screen mode). I'd really like to be able to have info about the video thats playing show up in an avalonia window I control while the videos playing

radiolondra commented 2 years ago

For anyone is interested:

I created an open source repo on Github which tries to overcome some Avalonia LibVlcSharp issues and missed things. Give a look to YAMP (Yet Another Media Player) here. I created also the setups (x86 & x64) to install YAMP and test it directly (version 0.1.10.220) here.

It is obviously just a starting point. A lot of work is still needed to have YAMP stable. Any help, contribution, discussion, improvement ideas or just one coffee together is welcome. Many thanks for your attention.

Symbai commented 2 years ago

I created an open source repo on Github which tries to overcome some Avalonia LibVlcSharp issues and missed things.

As far as I've seen on your project description it does not overcome any of the mentioned issues. It still needs an own window and you still cannot draw elements on top of it. Besides, it is not a control but an application which isn't really what people here are looking for (although they could learn/read the source code). Still thanks for sharing.

radiolondra commented 2 years ago

@Symbai Yes it doesn't solve the issues, just tries to live with them and have a decent result.

Geektoolkit commented 2 years ago

I've spent quite a few hours on this working on a raspberry pi, and here's what I've found (This is all raspberry pi specific, but I find it interesting because it may help others learn what I learned..which is that video is insanely complex) 1) Even VLC, which is the preferred player for a rapsberry pi bullseye version of Debian...has problems with overlaying...simply turning on subtitles or placing a window on top of it when it's not in full screen mode causes issue 2) Creating a window in avalonia and then calling 'activate' will bring it over the top of vlc, but again due to point 1...it causes it to perform horribly 3) If VLC is in full screen mode, nothing can be placed on top of it (avalonia or otherwise), but it performs great 4) I and my team tried working around this by using the logo feature of VLC, and that cause perf to drop also 5) Launching VLC 'windowed' and then trying to resize it using width/height command line args doesn't work (7 year old bug they say is fixed in 4.0...but I don't see an arm build and it's in alpha) 6) I tried using MPV and FFPlay...by using process.start and the correct command lines you can full screen launch them, but they also either fall over when a window is placed over them or aren't GPU accelerated on a pi (I hear I can build a version of them, but then there are reports bullseye broke it, etc) 7) To make windows transparent on debian using compmgr, use -o.0 when running it and then avalonia transparency works, otherwise you get white backgrounds (this is how you can get a window on top of a video

Note: On windows...this all works flawlessly for me. No perf issues with avalonia or vlc, and you can easily put a window on top of the video using Activate, with it transparent and everything working.

I've tried the VLCcontrol (which I'll continue to use...it's very nice) for Avalonia built upon libvlc, as well as tried shell executiong VLC.

Those are my findings thought they'd be useful for others. Radiondra if your MPV solution works on arm/debian I could give it a shot, but unless you're using a hardware accleerated version of MPV it wont do me or others much good that are doing this on arm/debian platforms like the pi4

radiolondra commented 2 years ago

@Geektoolkit YAMP doesn't use MPV, it uses LibVlc mediaplayer. You did really an interesting job with Raspberry. I'm working with a couple of pi4 for a TinyML project and peraphs I could use one of them to try Vlc&avalonia things there and test. I'll let you know. The only variable against this is time, which is too short. Anyway, I'll try for sure.

radiolondra commented 2 years ago

I created 2 repos on Github to show working samples on how to successfully embed VLC MediaPlayer into Avalonia Windows and UserControls.

Still trying to find the best way to add a UserControl (i.e. media player buttons) on top of MediaPlayer. (Edit: found the way, see my next post)

The simplest and faster way is to handle a new window (something similar has been used in YAMP), but I desire to find a more flexible and integrated way.

Help, suggestions and comments are welcome (obviously). Thanks.

radiolondra commented 2 years ago

How to add a UserControl on top of VLC MediaPlayer

I modified the Avalonia Window repository to show how to put a UserControl on top of MediaPlayer (VideoView).

To do this I added a Content property to VideoView which will create its own new top window and add the Content to this window.

You can create the Content as a new UserControl (for example, a MediaPlayer set of controls) and add this UserControl to the VideoView content, like in:

<vlcsharp:VideoView
   HorizontalAlignment="Stretch"
   VerticalAlignment="Stretch"
   x:Name="VideoViewer">

   <!-- Content -->
   <Panel
    VerticalAlignment="Bottom"
    Opacity="0.8"
    Background="Gray">
    <controls:PlayerControls/>
   </Panel>
</vlcsharp:VideoView>

In this repo I created a user control with 2 buttons: Play and Stop. The control position is at bottom and the buttons are shown using PointerEnter/PointerLeave events, with a simple opacity set to 0.8 (Enter) and to 0 (Leave). Too lazy to add some kind of animation to the UserControl.

I'll modify the Avalonia UserControl repository too, adding the same feature, even though you could do it by yourselves.

Remember that, even though it works, the code is very basic and could need still a bit of work to be perfect.

EDIT: Just updated UserControl repository with the same features.

radiolondra commented 2 years ago

EDIT: Successfully tested on Kubuntu 18.04

AvaVLCWindow-Kubuntux64

Successfully tested on MacOS 10.13 (High Sierra)

AvaVLCWindow-MacOS

radiolondra commented 2 years ago

Test on Raspberry Pi (Raspbian Stretch) 926MB RAM

As @Geektoolkit said, generated on-top window has no transparency and opacity is not respected. Like @Geektoolkit, I tried every possible combinations of Background and TransparencyLevelHint without any success. Maybe Avalonia has some issues for linux-arm or maybe there are some other settings I don't know.

AvaVLCWindow-RaspberryPi

Having 926MB of RAM only and just 1 CPU, the video is played in jerks. Anyway, it works BUT the transparency and opacity issues.

Geektoolkit commented 2 years ago

To get opacity try xcommgr -o.0 to see if that helps with opacity. I got the pi to work using that command/setting

SilkyFowl commented 2 years ago

@radiolondra I can confirm that this approach works just fine with Avalonia.FuncUI(F#)! Thanks for sharing the idea!

radiolondra commented 2 years ago

New test on Raspberry Pi (DietPi with MATE or Xfce)

It works fine!

Transparency and Opacity are fully honored.

In my opinion, the problem is not Avalonia vs Raspberry, the problem is what is installed or not in Raspberry.

With DietPi OS and MATE (or Xfce) as X, the sample works perfectly. And playback is smooth without jerks, interruptions or whatever.

As root, I installed libx11-dev, libvlc-dev and vlc, copied the published sample (built in Windows 10 with dotnet publish -c release -f net5.0 -r linux-arm), chmod 777 the whole folder content and ran the sample. It has to be ran as root or with sudo.

rpi rpi_000

Geektoolkit commented 2 years ago

OMG this would be a game changer for those of us doing video on raspberry pis! I'll give this a try asap...that looks amazing! And from what I'm gathering, the video is playing without stuttering?!

radiolondra commented 2 years ago

OMG this would be a game changer for those of us doing video on raspberry pis! I'll give this a try asap...that looks amazing! And from what I'm gathering, the video is playing without stuttering?!

The video is playing per-fec-tly! And my Raspberry is a pi3 model b, so just 1 GB of RAM. But it works like a charme.

DietPi is lighter than whatever else Raspberry OS, but not less complete. Use the 32bits or you'll go against other issues.

Be sure to install MATE or Xfce, I didn't test yet with the other X options.

Be prepared to swallow a couple of shirts before to have it installed in a clean way. I had to flash it 3 times (on the SD).

At start, it uses the old text installation (it remembers the old RedHat way to install Linux) and it seems not so obvious. After some attempts (you have to manually configure the network too) you will thanks this kind of approach, as it's very powerful.

Remember to use "root" (default password is "dietpi") to install what you need (libx11-dev, libvlc-dev and vlc). Ther's no X pre-installed, so you have to choose which X you want and install it (MATE).

Once X is installed, if you have the default (text) login start MATE with normal "startx" command.

Now copy your published (full) project somewhere (I put mine in root/Desktop), then add needed libraries above. I don't know if they are the ONLY libs needed, they were for my test project.

You should set exec rights to your project files (I used chmod 777 for all) and start your app as root (or using sudo).

Everything should work. Avalonia now is perfect for Raspberry too.

radiolondra commented 2 years ago

I have just created a pull request on Videolan/LibVLCSharp to include my solution in the distro. https://github.com/videolan/libvlcsharp/pull/294

radiolondra commented 2 years ago

For anyone is interested:

A sample to apply in the real world the changes I did in LibVLCSharp.Avalonia

I created YAMP2 repository (Yet-Another-Media-Player v2) here, which fully uses my new LibVLCSharp.Avalonia.Unofficial lib.

To make tests, build it by yourselves and run.

Enjoy.

radiolondra commented 2 years ago

The new release of the Unofficial Avalonia LibVLCSharp, allows to display multiple draggable controls over the scene of a video played with LibVLCSharp in an Avalonia app.

For anyone is interested. Enjoy.

https://user-images.githubusercontent.com/20070559/166648051-296f664c-611c-4607-85d6-ba0e7f2a5ec7.mp4

radiolondra commented 2 years ago

All the links updated (latest libs and samples versions)

External Links

VLC video player inside an Avalonia Window/UserControl embedding single static customizable control (e.g.player buttons) LibVLCSharp.Avalonia.Unofficial

VLC video player inside an Avalonia Window/UserControl embedding multiple draggable customizable controls (e.g.player buttons, images,...) LibVLCSharp.Avalonia.Unofficial.UCanvas

LibVLCSharp.Avalonia.Unofficial Samples LibVLCSharp.Avalonia.Unofficial.Samples

LibVLCSharp.Avalonia.Unofficial.UCanvas sample LibVLCSharp.Avalonia.Unofficial.UCanvas.Samples

YAMP 2 - Open source video player sample using LibVLCSharp.Avalonia.Unofficial library Github sources Watch YAMP2 in action

xiaokun commented 1 year ago

The overlapped window which hosts the content will be disappeared if it lost focus on macOS 12.6.3.

I changed some code (add a TextBox) in MainWindow.axaml to produce this problem:

<Grid RowDefinitions="*, 40"  ColumnDefinitions="*">        
       <controls:PlayerControl  Name="Player"/>
        <Grid Grid.Row="1" >
            <TextBox  />
        </Grid>
</Grid>

the overlapped content will disappear if your click on the TextBox.

Maybe someone has solution. Thanks.

clawton commented 1 year ago

Anyone tried this on a DRM framebuffer based configuration?

timunie commented 1 year ago

I'm going to move this issue into discussions as there is nothing to do on Avalonia code side