We Keep Coding

Trying to get a screenshot of the browser page using cefsharp but getting exceptions. how to take a screenshot?

In the file MainWindow.xaml.cs in the method TakeScreenShot i'm getting exception on the
line :
var executedScript = WebView.EvaluateScriptAsync(jsString).Result.Result;
System.Exception
HResult=0x80131500
Message=Unable to execute javascript at this time, scripts can only be executed within a V8Context. Use the IWebBrowser.CanExecuteJavascriptInMainFrame property to guard against this exception. See https://github.com/cefsharp/CefSharp/wiki/General-Usage#when-can-i-start-executing-javascript for more details on when you can execute javascript. For frames that do not contain Javascript then no V8Context will be created. Executing a script once the frame has loaded it's possible to create a V8Context. You can use browser.GetMainFrame().ExecuteJavaScriptAsync(script) or browser.GetMainFrame().EvaluateScriptAsync to bypass these checks (advanced users only).
Source=CefSharp
StackTrace:
at CefSharp.WebBrowserExtensions.ThrowExceptionIfCanExecuteJavascriptInMainFrameFalse()
at CefSharp.WebBrowserExtensions.EvaluateScriptAsync(IChromiumWebBrowserBase browser, String script, Nullable`1 timeout, Boolean useImmediatelyInvokedFuncExpression)
at Web_Browser_WPF.MainWindow.TakeScreenShot(String siteUrl) in D:\Csharp Projects\Web Browser WPF\MainWindow.xaml.cs:line 47
at Web_Browser_WPF.MainWindow.ChromiumWebBrowser_LoadingStateChanged(Object sender, LoadingStateChangedEventArgs e) in D:\Csharp Projects\Web Browser WPF\MainWindow.xaml.cs:line 64
at CefSharp.Wpf.ChromiumWebBrowser.CefSharp.Internals.IWebBrowserInternal.SetLoadingStateChange(LoadingStateChangedEventArgs args)
at CefSharp.Internals.ClientAdapter.OnLoadingStateChange(ClientAdapter* , scoped_refptr* browser, Boolean isLoading, Boolean canGoBack, Boolean canGoForward)
and then if i mark as comment not to use the part of the jString and executedScript and not assigning to the height then i'm getting null exception on the line :
bitmap.Save(#"d:\Test.jpg");
because WebView is null.
so i'm stuck here.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
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;
using CefSharp;
using CefSharp.OffScreen;
namespace Web_Browser_WPF
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
WindowStartupLocation =
System.Windows.WindowStartupLocation.CenterScreen;
}
private void TakeScreenShot(string siteUrl)
{
CefSharp.OffScreen.ChromiumWebBrowser WebView = new CefSharp.OffScreen.ChromiumWebBrowser(siteUrl);
int width = 1280;
int height = 1480;
string jsString = "Math.max(document.body.scrollHeight, " +
"document.documentElement.scrollHeight, document.body.offsetHeight, " +
"document.documentElement.offsetHeight, document.body.clientHeight, " +
"document.documentElement.clientHeight);";
var executedScript = WebView.EvaluateScriptAsync(jsString).Result.Result;
height = Convert.ToInt32(executedScript);
WebView.Size = new System.Drawing.Size(width, height); //size;
Thread.Sleep(500);
// Wait for the screenshot to be taken.
var bitmap = WebView.ScreenshotOrNull();
bitmap.Save(#"d:\Test.jpg");
bitmap.Dispose();
}
private void ChromiumWebBrowser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
{
if(!e.IsLoading)
{
TakeScreenShot("https://ims.gov.il/he/RadarSatellite");
}
}
}
}
The xaml code
<Window
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:cef="clr-namespace:Web_Browser_WPF"
xmlns:Wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" x:Class="Web_Browser_WPF.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="720" Width="1024">
<Grid>
<Wpf:ChromiumWebBrowser HorizontalAlignment="Left" Margin="363,181,0,0" VerticalAlignment="Top"/>
<Wpf:ChromiumWebBrowser x:Name="chromiumBrowser1"/>
<Wpf:ChromiumWebBrowser Address="https://ims.gov.il/he/RadarSatellite" LoadingStateChanged="ChromiumWebBrowser_LoadingStateChanged" />
</Grid>
</Window>

UWP: use 1 MediaSource for several Players

I have some uwp application, where several videos are played simultaneously. I thought it might be a good idea to use 1 media source to improve performance. But I'm not sure why this idea doesn't work.
MainPage.xaml:
<Page
x:Class="UWP_OneMediaSourceForSeveralPlayers.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_OneMediaSourceForSeveralPlayers"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Loaded="Page_Loaded">
<StackPanel Orientation="Vertical" Background="Yellow" Height="400" Width="200">
<MediaPlayerElement x:Name="Player1" Height="200" Width="200" />
<MediaPlayerElement x:Name="Player2" Height="200" Width="200" />
</StackPanel>
</Page>
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Media.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace UWP_OneMediaSourceForSeveralPlayers
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
var uri = new Uri(BaseUri, "/Assets/Videos/video.mp4");
var mediaSource = MediaSource.CreateFromUri(uri);
Player1.Source = mediaSource;
Player2.Source = mediaSource;
Player1.MediaPlayer.Play();
Player2.MediaPlayer.Play();
}
}
}
That's what I see:
So, looks like the first video is loaded. But not the second...
NOW question: why I can not use 1 media source for 2 players? How to make it work? Or do you have any other idea how to run the same file in several players?
P.S. creating 2 media sources from URI is not a good solution for me, because my app can have a lot (10+) videos running at the same time. If I create a media source for each player it will hurt performance.

So what you can actually do here is share a MediaPlayer between the two MediaPlayerElement instance.
private void Page_Loaded(object sender, RoutedEventArgs e)
{
var uri = new Uri(BaseUri, "/Assets/Videos/video.mp4");
var mediaSource = MediaSource.CreateFromUri(uri);
var player = new MediaPlayer
{
Source = new MediaPlaybackItem(mediaSource)
};
Player1.SetMediaPlayer(player);
Player2.SetMediaPlayer(player);
player.Play();
}
If you don't require the transport controls from MediaPlayerElement, it's probably better to use MediaPlayerPresenter instead.

How do I append a Run to an existing Paragraph in a FlowDocument?

I need to expand an existing Run to include some new text (with different formatting) without adding an additional paragraph. Is this possible?
When I inspect the properties of the FirstBlock on the Document, I do not see any property which allow me to drill down into the paragraph so that I can add a Run to it.
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 WpfApp3
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.flowdoc.Document = new FlowDocument();
Run r = new Run("Hello ");
r.Background = new SolidColorBrush(Colors.Yellow);
r.FontSize = 14;
Paragraph p = new Paragraph(r);
flowdoc.Document.Blocks.Add(p);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Run r = new Run("World");
r.Background = new SolidColorBrush(Colors.LightCyan);
//Append run to existing run
//
}
}
}
<Window x:Class="WpfApp3.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<FlowDocumentReader Grid.Column="0" x:Name="flowdoc"></FlowDocumentReader>
<Button Grid.Column="1" Content="append" Click="Button_Click"></Button>
</Grid>
</Window>

To get your Paragraph you may iterate the Blocks property of the document.
You can then easily add a new Run to the Block's Inlines collection.
private void Button_Click(object sender, RoutedEventArgs e)
{
Run r = new Run("World");
r.Background = new SolidColorBrush(Colors.LightCyan);
//Append run to existing run
var p = flowdoc.Document.Blocks.OfType<Paragraph>().First();
p.Inlines.Add(r);
}

WPF MediaElement: Video opened twice

I want to use a MediaPlayer for videos and pictures with the MediaElement. I have already done tests, the MediaElement can also display pictures.
Currently I have the problem that the MediaElement seems to open twice.
Here is the example code:
XAML:
<Window x:Class="TestMediaElement.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestMediaElement"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="10">
<MediaElement Name="mediaPlayer" MediaOpened="media_MediaOpened" LoadedBehavior="Play" UnloadedBehavior="Manual"/>
</Grid>
</Window>
C#
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 TestMediaElement
{
public partial class MainWindow : Window
{
int currentMediaIndex = 0;
string[] Documents;
public MainWindow()
{
InitializeComponent();
Documents = System.IO.Directory.GetFiles("C:/Users/Feller/Desktop/Test/");
Uri first = new Uri(Documents[0], UriKind.RelativeOrAbsolute);
mediaPlayer.Source = first;
mediaPlayer.MediaOpened += media_MediaOpened;
}
private void media_MediaOpened(object sender, RoutedEventArgs e)
{
Console.WriteLine("Video opened");
}
}
}
Another problem is that images close automatically after about 5 seconds.
Can anyone help me with these problems?
Thank you very much!

MediaOpened event is subscribed twice. Either remove from the xaml or remove from code.
//mediaPlayer.MediaOpened += media_MediaOpened;

XAML margin error

I am trying to generate a dynamic form on windows universal app and having a problem with the margin.
I like to keep both Radiobutton and Textbox to be on the left side at margin 0.
The problem is somehow the Textbox can't stay on the left, i have both controls with the margin left at 0, somehow the textbox was pushing to the right of the screen.
This is the result after I ran the app.
The output result for Windows Universal app on Windows 10
My script file name MainPage.xaml.cs for project AppTestTrash
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace AppTestTrash
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
//Add dynamic RadioButton
var dynamicRadiobtn = new RadioButton();
dynamicRadiobtn.Name = "testme";
dynamicRadiobtn.Height = 30;
dynamicRadiobtn.Width = 50;
dynamicRadiobtn.Margin = new Thickness(0, 100, 0, 0);
dynamicForm.Children.Add(dynamicRadiobtn);
//Add dynamic texbox
var dynamicTextbox = new TextBox();
dynamicTextbox.Name = "testme2";
dynamicTextbox.Height = 30;
dynamicTextbox.Width = 50;
dynamicTextbox.Margin = new Thickness(0, 120, 0, 0);
dynamicForm.Children.Add(dynamicTextbox);
}
}
}
XAML file mainpage.xaml
<Page
x:Class="AppTestTrash.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppTestTrash"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<Grid Name="mainGrid" BorderBrush="AliceBlue" Width="500" Height="500" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" BorderThickness="2">
<StackPanel Name="dynamicForm" BorderThickness="1">
</StackPanel>
</Grid>
</Page>

To solve this issue, you can set dynamicTextbox's HorizontalAlignment property to Left like the following.
//Add dynamic texbox
var dynamicTextbox = new TextBox();
dynamicTextbox.Name = "testme2";
dynamicTextbox.Height = 30;
dynamicTextbox.Width = 50;
dynamicTextbox.HorizontalAlignment = HorizontalAlignment.Left;
dynamicTextbox.Margin = new Thickness(0, 120, 0, 0);
dynamicForm.Children.Add(dynamicTextbox);
The default value of HorizontalAlignment is Stretch, so your text box will be on the center of your grid even the left margin is 0. For more info, please see Remarks of HorizontalAlignment.