如何使用 LibVlcSharp 在 vi​​deoView 中删除视频黑带？

Question

when I play a video with video, it presents black bands in the top and bottom part of the video, like in image in the URL https://imgur.com/a/JiUv8rt . I'd like to remove the bands and display just the video in an absolute layout. how can I reach my goal?

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             xmlns:shared="clr-namespace:LibVLCSharp.Forms.Shared;assembly=LibVLCSharp.Forms"
             x:Class="App.Pages.WebcamVideoPopUpPage"
             BackgroundColor="Transparent">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"/>
    </pages:PopupPage.Animation>

    <AbsoluteLayout x:Name="AbsoluteLayoutWebcam"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">


        <shared:VideoView x:Name="VideoViewWebcam"
                          AbsoluteLayout.LayoutFlags="All"
                          AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                          MediaPlayer ="{Binding MediaPlayer}"
                          MediaPlayerChanged ="VideoView_MediaPlayerChanged"/>

        <Label x:Name="DescriptionWebcam"
               AbsoluteLayout.LayoutFlags="All" 
               AbsoluteLayout.LayoutBounds="0, 0, 1, .2"
               HorizontalOptions="Fill" 
               VerticalOptions="Fill" 
               Text="{Binding InfoWebcam}"
               FontSize="Large"
               TextColor="White"/>

    </AbsoluteLayout>
</pages:PopupPage>

UPDATE I update at latest pre-release as @mtz suggested me, and I modified my code in the following way:

public partial class WebcamVideoPopUpPage : PopupPage
{
    public WebcamVideoPopUpPage()
    {
        var vm = App.Locator.WebCamVideoVM;
        this.BindingContext = vm;
        InitializeComponent();
        MediaPlayerWebcam.VideoView.MediaPlayerChanged += VideoView_MediaPlayerChanged;
        MediaPlayerWebcam.MediaPlayer.AspectRatio = "FitScreen";
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        Messenger.Default.Send(new OnApperingVideoMessage());
    }

    private void VideoView_MediaPlayerChanged(object sender, LibVLCSharp.Shared.MediaPlayerChangedEventArgs e)
    {
        Messenger.Default.Send(new OnVideoViewInitializedMessage());
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        MediaPlayerWebcam.MediaPlayer.Stop();
        MediaPlayerWebcam.MediaPlayer = null;

    }

}

My xaml:

<AbsoluteLayout x:Name="AbsoluteLayoutWebcam"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">


    <shared:MediaPlayerElement x:Name="MediaPlayerWebcam"
                      AbsoluteLayout.LayoutFlags="All"
                      AbsoluteLayout.LayoutBounds="0, 0, 1, .4"
                      MediaPlayer ="{Binding MediaPlayer}"/>

    <Label x:Name="DescriptionWebcam"
           AbsoluteLayout.LayoutFlags="All" 
           AbsoluteLayout.LayoutBounds="0, 0, 1, .2"
           HorizontalOptions="Fill" 
           VerticalOptions="Fill" 
           Text="{Binding InfoWebcam}"
           FontSize="Large"
           TextColor="White"/>

</AbsoluteLayout>

My viewModel:

public class WebcamVideoViewModel : BaseViewModel
{
    private LibVLC LibVLC { get; set; }

    private bool IsLoaded { get; set; }
    private bool IsVideoViewInitialized { get; set; }

    private Media Media { get; set; }

    private MediaPlayer _mediaPlayer;
    public MediaPlayer MediaPlayer
    {
        get { return _mediaPlayer; }
        set
        {
            _mediaPlayer = value;
            OnPropertyChanged();
        }
    }

    private string _InfoWebcam { get; set; }

    public string InfoWebcam
    {
        get { return _InfoWebcam; }

        set
        {
            _InfoWebcam = value;
            OnPropertyChanged();
        }
    }
    public WebcamVideoViewModel(INavigationService navigationService, IApiAutostradeManagerFactory apiAutostradeFactory) : base(navigationService, apiAutostradeFactory)
    {
        Messenger.Default.Register<InfoWebcamVideoMessage>(this, OnReceivedInfoWebcam);
        Messenger.Default.Register<OnApperingVideoMessage>(this, OnAppearing);
        Messenger.Default.Register<OnVideoViewInitializedMessage>(this, OnVideoViewInitialized);
        Task.Run(Initialize);
    }

    private void Initialize()
    {
        Core.Initialize();

        LibVLC = new LibVLC();
        MediaPlayer = new MediaPlayer(LibVLC);

    }

    private async void OnReceivedInfoWebcam(InfoWebcamVideoMessage msg)
    {
        var response = await ApiManager.GetVideoWebcam(msg.Mpr, msg.Uuid);
        if (response.IsSuccessStatusCode)
        {
            InfoWebcam = msg.T_Description_webcam;
            var stream = await response.Content.ReadAsStreamAsync();
            Media = new Media(LibVLC, stream);

            Play();
        }
    }

    public void OnAppearing(OnApperingVideoMessage msg)
    {
        IsLoaded = true;

    }

    public void OnVideoViewInitialized(OnVideoViewInitializedMessage msg)
    {
        IsVideoViewInitialized = true;
    }

    private void Play()
    {
        if (IsLoaded && IsVideoViewInitialized)
        {
            MediaPlayer.Play(Media);

        }
    }

}

Now i'm closer to solution because videoView is resizable with the button present at bootm, but I'd like to get at start the fill AspectRatio and I don't want anything expect the video(In other words, I'd want to remove seek bar and resize video button). Another problem is that after I close mediaPlayer, and I open again a new video, my app crashes. Any advice?

Answer 1

You need to change the aspect ratio to "fill the screen".

See how to here: https://github.com/videolan/libvlcsharp/blob/91b8f06ee1bedd9b3219a4e9ade0a9c44f59fda8/LibVLCSharp.Forms/Shared/PlaybackControls.xaml.cs#L926 or use the latest pre-release LibVLCSharp.Forms package that contains the MediaPlayerElement which has this feature built-in (soon in stable version).

Answer 2

What you just trying is to stretch the video. But remember it will effect video quality .
To remain simple, you can try this working and tested code:

MediaPlayerWebcam.MediaPlayer.AspectRatio = $"{MediaPlayerWebcam.Width.ToString()}:{MediaPlayerWebcam.Height.ToString()}";
MediaPlayerWebcam.Scale = 0;

Answer 3

My scenario is a fullscreen player, I do it with these codes refer to LibVLCSharp.Forms, hope it will be helpful. the code deal with fullscreen(commented) or fill screen with video.

    public void PlayerFullScreen()
    {
        //restore
        if (_isFullScreen)
        {
            RestoreDefaultWindowInfo();
            _isFullScreen = false;
            _mediaPlayer.Scale = _originalScale;   //reset 
            _mediaPlayer.AspectRatio = _originalAspectRatio;
            //Mouse.Capture(null);
            playerBar.Visibility = Visibility.Visible;
        }
        else  // fullscreen(stretch video)
        {
            this.WindowStyle = WindowStyle.None;
            this.ResizeMode = ResizeMode.NoResize;
            this.Left = 0;
            this.Top = 0;
            this.Width = SystemParameters.VirtualScreenWidth;
            this.Height = SystemParameters.VirtualScreenHeight;
            //this.Topmost = true;
            _isFullScreen = true;
            _originalScale = _mediaPlayer.Scale;   // save original
            _originalAspectRatio = _mediaPlayer.AspectRatio;

            playerBar.Visibility = Visibility.Collapsed;

            MediaTrack? mediaTrack;
            try
            {
                mediaTrack = _mediaPlayer.Media?.Tracks?.FirstOrDefault(x => x.TrackType == TrackType.Video);
            }
            catch (Exception)
            {
                mediaTrack = null;
            }
            if (mediaTrack == null || !mediaTrack.HasValue)
            {
                return;
            }

            //get windows scale factor(DPI)
            PresentationSource source = PresentationSource.FromVisual(this);
            double dpiX=1.0, dpiY=1.0;
            if (source != null)
            {
                dpiX = source.CompositionTarget.TransformToDevice.M11;
                dpiY = source.CompositionTarget.TransformToDevice.M22;
            }

            var displayW = this.Width * dpiX;
            var displayH = this.Height * dpiY;
            var videoSwapped = mediaTrack.Value.Data.Video.Orientation == VideoOrientation.LeftBottom ||
                                        mediaTrack.Value.Data.Video.Orientation == VideoOrientation.RightTop;

            var videoW = mediaTrack.Value.Data.Video.Width;
            var videoH = mediaTrack.Value.Data.Video.Height;

            if (videoSwapped)
            {
                var swap = videoW;
                videoW = videoH;
                videoH = swap;
            }
            if (mediaTrack.Value.Data.Video.SarNum != mediaTrack.Value.Data.Video.SarDen)
                videoW = videoW * mediaTrack.Value.Data.Video.SarNum / mediaTrack.Value.Data.Video.SarDen;

            var ar = videoW / (float)videoH;
            var dar = displayW / (float)displayH;

            float scale;
            if (dar >= ar)
                scale = (float)displayW / videoW; /* horizontal */
            else
                scale = (float)displayH / videoH; /* vertical */

            //keep ratio of width/height, not fill the srceen
            //_mediaPlayer.Scale = scale;         // 这是保持视频宽高比的，视频不会变形
            //_mediaPlayer.AspectRatio = string.Empty;//这是保持视频宽高比的，视频不会变形

            //这是视频变形适配屏幕的情况（满屏）
            //fill all the screen by video,video is streched 
            float xscale, yscale;
            xscale = (float)(displayW / videoW);
            yscale = (float)(displayH / videoH);
            _mediaPlayer.Scale = (xscale<yscale)? xscale:yscale;
            string aspectRatio = String.Format("{0}:{1}",
                    this.Width,this.Height);
            _mediaPlayer.AspectRatio = aspectRatio;

        }
    }