Hi everyone.
I'm here with a new question again 😅
I want t use media composition with some PNG image overlays.
I tried the Microsoft Media Editing sample and everything was ok with the same exact files!
I tried same base video and same overlay image and get 2 different results!!
As you can see in Media Editing sample of Microsoft transparent PNG image will be added without problem, But in my code it has a white background. I don't why, however, my code is 95% copy paste of the media editing sample but in another project.
Here's my sample code
private MediaComposition composition;
private StorageFile baseVideoFile;
private StorageFile overlayVideoFile;
private MediaStreamSource mediaStreamSource;
public static MainPage Main { get; set; }
public MainPage()
{
this.InitializeComponent();
Main = this;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
ChooseBaseVideo();
ChooseOverlayVideo();
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
mediaElement.Source = null;
mediaStreamSource = null;
base.OnNavigatedFrom(e);
}
private async void ChooseBaseVideo()
{
var picker = new FileOpenPicker();
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.VideosLibrary;
picker.FileTypeFilter.Add(".mp4");
baseVideoFile = await picker.PickSingleFileAsync();
mediaElement.SetSource(await baseVideoFile.OpenReadAsync(), baseVideoFile.ContentType);
}
private async void ChooseOverlayVideo()
{
var picker = new FileOpenPicker();
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.VideosLibrary;
picker.FileTypeFilter.Add(".png");
overlayVideoFile = await picker.PickSingleFileAsync();
CreateOverlays();
}
private async void CreateOverlays()
{
var baseVideoClip = await MediaClip.CreateFromFileAsync(baseVideoFile);
composition = new MediaComposition();
composition.Clips.Add(baseVideoClip);
var overlayVideoClip = await MediaClip.CreateFromImageFileAsync(overlayVideoFile, TimeSpan.FromSeconds(10));
// Overlay video in upper left corner, retain its native aspect ratio
Rect videoOverlayPosition;
//var encodingProperties = overlayVideoClip.GetVideoEncodingProperties();
videoOverlayPosition.Height = mediaElement.ActualHeight / 3;
videoOverlayPosition.Width = (double)mediaElement.ActualWidth / 3;
videoOverlayPosition.X = 0;
videoOverlayPosition.Y = 0;
var videoOverlay = new MediaOverlay(overlayVideoClip);
videoOverlay.Position = videoOverlayPosition;
videoOverlay.Opacity = 0.75;
var overlayLayer = new MediaOverlayLayer();
overlayLayer.Overlays.Add(videoOverlay);
composition.OverlayLayers.Add(overlayLayer);
// Render to MediaElement
mediaElement.Position = TimeSpan.Zero;
mediaStreamSource = composition.GeneratePreviewMediaStreamSource((int)mediaElement.ActualWidth, (int)mediaElement.ActualHeight);
mediaElement.SetMediaStreamSource(mediaStreamSource);
}
and here is the files I have problem with them
8857-250646952029196.png - attachment
8806-1750116211982526.png - attachment
But some files are also ok even with my code like this
8875-297436944045492-2.png - attachment
You can find my full repos here:
https://www.mediafire.com/file/tyi2wyaicdjk3p8/Repos.rar/file
and my edited code of MediaEding sample here :
8914-scenario4-addoverlaysxamlcs.txt