How to embed Twitch/Youtube/Facebook gaming stream? - c#

I'm working on a WPF application and am trying to embed a twitch/youtube/facebook gaming stream. I am relatively new to WPF applications in general.
I've followed the steps outlined at the Twitch Embed API Page, and attempted to insert it into a CEFSharp window using the Twitch embed code. However, as of 2020, twitch now requires a "parent" field to embed their videos, so I just tried plugging the actual twitch page into the CEFsharp element and still it gave me an error.
For Facebook and Youtube, I could get the embedded frames to show up as well, but they both failed to load the video, which leads me to believe there is an issue displaying streaming media through CEFSharp?
Here is the code :
...
xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
...
<cef:ChromiumWebBrowser
Width="480"
Height="270"
HorizontalAlignment="Left"
Margin="0,20,0,0"
Address="https://www.twitch.tv/shroud"
/>
<cef:ChromiumWebBrowser
Width="480"
Height="270"
HorizontalAlignment="Left"
Margin="0,20,0,0"
Address="https://www.youtube.com/embed/Xz5Nw0EY5ng"
/>
<cef:ChromiumWebBrowser
Width="480"
Height="270"
HorizontalAlignment="Left"
Margin="0,20,0,0"
Address="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FNitroLukeDX%2Fvideos%2F710121262901568%2F&show_text=0&width=560" />
And here's the result:
Any help would be greatly appreciated!


Ahaa in the end someone pointed me towards the new WebView2 control from ms.
This plays streaming video :D
<wv2:WebView2 Name="webView"
HorizontalAlignment="Left"
Height="270"
Width="480"
Margin="0,20,0,0"
Source="https://player.twitch.tv/channel=loltyler1"/>

Related

How to show an embedded video inside of a window in C# WPF Application?

What I need :
In C# WPF on Visual studio 2019 in Windows 10, I want to show and play a video inside a My window from the app not directly path
What have I done :
I have included that video in my project, then I set the path for the video and it shows it to me in design view! :
but when I start my project , It won't show the video !
What have I tried and my code :
so I decided to try it in three-way, also to try to show a gif for sure about the path.
Embedded path
Normal Path
Direct path on windows
but only the direct path works! While the same embedded path works for GIF
MyGIF : Source="pack://application:,,,/Medias/1Correctmation.gif" => works fine
My Video : Source="pack://application:,,,/Medias/Video1.mp4" => not working
My Video : Source="C:\Users\user\Desktop\Video1.mp4" => workis fine but I don't want this directly path
also for my video file I tried these BuildAction:
Embedded
Resource
Content Resource
none of them work.
XAML:
<Grid>
<Label Content="Embeded Video :" HorizontalAlignment="Left" Margin="10,34,0,0" VerticalAlignment="Top" Width="100"/>
<MediaElement x:Name="Embd_Video1_mp4" Margin="115,10,499,309" Stretch="Fill" Source="pack://application:,,,/Medias/Video1.mp4"/>
<Label Content="Normal Path :" HorizontalAlignment="Left" Margin="10,172,0,0" VerticalAlignment="Top" Width="82"/>
<MediaElement x:Name="Normal_Video1_mp4" Margin="115,134,444,154" Stretch="Fill" Source="Medias/Video1.mp4"/>
<Label Content="Direct Path :" HorizontalAlignment="Left" Margin="10,345,0,0" VerticalAlignment="Top" Width="82"/>
<MediaElement x:Name="Dir_Video1_mp4" Margin="115,278,331,10" Stretch="Fill" Source="C:\Users\user\Desktop\Video1.mp4"/>
<Label Content="Embeded Gif Here ↓:" HorizontalAlignment="Left" Margin="452,34,0,0" VerticalAlignment="Top" Width="114"/>
<Image Margin="452,65,30,189" Source="pack://application:,,,/Medias/1Correctmation.gif" />
</Grid>
What should I do ?
Update:
I tried to check if has error in MedaFailed event , so check it out
Source="pack://siteoforigin:,,,/Medias/CorrectVideo.mp4" error says :
...
Source="pack://application:,,,/Medias/CorrectVideo.mp4" error says :
Source Code :
https://mega.nz/file/B1Zi2S6C#VtCk8xcdabekNIySc9-6C2yMNdV5z-qHoTCUnYl0CXA
is there any alternative for this issue ?

Image rendering in MAUI project

Is there any technique to render the images more clearly in MAUI, like RenderOption in WPF.
My image must be like this:
and it is rendered like this:
Edit: This project will run only on Windows Desktop and MacCatalyst. This behavior is happening on Windows device.
The OS is Windows 11 x64
Image xaml:
<Border
Grid.Row="1"
Margin="3"
HeightRequest="140"
StrokeShape="RoundRectangle 1,1,1,1"
WidthRequest="140">
<Border.Stroke>Black</Border.Stroke>
<Border.StrokeThickness>0.3</Border.StrokeThickness>
<Image
Margin="1"
Aspect="AspectFill"
Background="{StaticResource Gray100}"
HeightRequest="130"
HorizontalOptions="Center"
Source="{Binding MyImage}"
VerticalOptions="Center"
WidthRequest="130" />
</Border>
In action:

As a summary, I will post an answer so that it will help others who have similar problems. Thanks for your support and feedback #ValiMatie.
The posted issue is here: https://github.com/dotnet/maui/issues/10916 .
And it has been moved to Backlog milestone. This means that it is not going to be worked on for the coming release.

MediaElement XAML -> AutoPlay not a property?

I have created a MediaElement in XAML and assigned a .mpg as the source.
Looking at the XAML controls gallery from Microsoft, there are some examples such as:
<MediaPlayerElement Source="Assets/SampleMedia/fishes.wmv"
MaxWidth="400"
AutoPlay="True" />
However, I am faced with invalid markup that is returning:
The property AutoPlay was not found in type MediaElement
I have tried removing the AutoPlay and using a MediaOpened event to start the video from code behind,but there is never any trigger even?
I am not having too much success.
DO I need to add any additional resources to access certain properties?
<MediaElement x:Name="backdropMotion" Source="Images/inMotion_video.mpg"
Stretch="Fill" Margin="198,126,-326,229" Grid.Column="2"
LoadedBehavior="Play" IsEnabled="True" IsMuted="True"
Grid.Row="1" Grid.ColumnSpan="2" MediaOpened="MediaOpenedEvent"
AutoPlay="True"
>
Ultimately, I am trying to run a media element to a panel that effectively acts as an animated background, looping almost like a .gif. First step is to get the element running.

How to control the pages of a PDF file for iOS

I'm creating an app to show some local PDF files to the user.
The app has 2 functions:
Show the local PDF (pdf viewer).
Make an "Interactive summary" so the user can navigate between the pages of the PDF.
In Android I'm using 'PDF.JS' plugin for xamarin, to show all the pdf files and it is working fine. I can easily open the PDF in the page I want by using the "Interactive summary".
On the other hand, in IOS I'm using a webview to show the pdf. The only problem is when creating the "Interactive Summary" for IOS I can't figure out how to open the PDF file in the page I want. There is any library or function that grants me access to it (pdf pages)?
I'm attaching some screenshots of the code so you guys can understand what's happening.

I would suggest using Syncfusion PDF.
It has already all the functionalities you want:
<Grid x:Name="pdfViewGrid">
<syncfusion:SfPdfViewer x:Name="pdfViewerControl" InputFileStream="{Binding PdfDocumentStream}"/>
</Grid>
To change the page:
<Button x:Name="goToNextButton" Grid.Column="3" BackgroundColor="Transparent" Image="PageDown.png" HorizontalOptions="Center" VerticalOptions="Center" Command="{Binding GoToNextPageCommand, Source={x:Reference Name=pdfViewerControl}}"/>
<Button x:Name="goToPreviousButton" Grid.Column="4" BackgroundColor="Transparent" Image="PageUp.png" HorizontalOptions="Center" VerticalOptions="Center" Command="{Binding GoToPreviousPageCommand, Source={x:Reference Name=pdfViewerControl}}"/>

Microsoft Ad SDK for UWP drinks memory

I've this ad control in each of my app's pages
<UI:AdControl
ApplicationId="my app id"
AdUnitId="my unit id"
Height="50"
Width="320"
ErrorOccurred="AdControl_ErrorOccurred"
IsAutoRefreshEnabled="True"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"/>
After a few navigation back and forth it causes a memory leak and app crashes. as simple as that.
What can I do to avoid this? is there a way to have one instance of this control globally and use it in each page?
Thanks.

Categories

Resources