How does webview2 work on JUCE 7.0.5?

1

Hi，everyone。My current job requires displaying a local HTML page. When using WebBrowserComponent to load the page, a script error prompt will pop up. After reviewing the information, I found that using webview2 as a loading container may solve the problem, but I am not sure how to use it. Does anyone know the steps to use it? I would greatly appreciate it

2
  • You need to set JUCE_USE_WIN_WEBVIEW2 in the config flags for juce_gui_extra
  • Make sure that the WebView2 runtime is installed on any computer that will run the application (details on how to do this can be found here)
  • Use WebBrowserComponent::Options::withBackend to request the webview2 backend
  • Ensure that the WebView2Loader.dll library is visible to your application at runtime - you can use WinWebView2::withDLLLocation to load this from a custom location, if the dll isn’t in a standard system location. This dll can be found in the WebView2 Nuget package.
3

Thank you for your reply. Firstly, I am confident that the first and second steps have been completed.and WebView2Loader.dll is visible to the program.
image

Here is the updated code as per your prompt:

juce::WebBrowserComponent::Options opt;
    opt.withBackend(juce::WebBrowserComponent::Options::Backend::webview2);
    webBrowserComponent.reset(new juce::WebBrowserComponent(opt));
    addAndMakeVisible(webBrowserComponent.get());
    webBrowserComponent->goToURL("https://docs.juce.com/master/index.html");

Unfortunately, there are many unexpected script errors when loading web pages in the Windows environment, which is not possible in Mac. I currently do not know how to solve this problem.

4 
opt.withBackend(juce::WebBrowserComponent::Options::Backend::webview2);

This returns a new Options object with the backend set. The function is marked [[nodiscard]], so I would expect the usage you’ve shown to raise a warning at compile time.

Try:

using WBC = juce::WebBrowserComponent;
auto opt = WBC::Options().withBackend (WBC::Options::Backend::webview2);
webBrowserComponent.reset (new WBC (opt));
5

Yes, thank you very much. This returns a new Options object. We have resolved this issue according to your prompt.

6

Hello Reuk, I’m sorry to bother you again because I encountered a similar issue as last time. When I was using the vst or aax plugin in a Windows environment, I found that I couldn’t load the HTML page correctly, prompting a script error; Unable to load any content of the HTML interface under Mac. Is it caused by the plugin itself? Because I have no problem loading the HTML interface on a regular demo.

7

Can you say more about the problem you’re experiencing?

Is your current issue happening on MacOS? It generally shouldn’t be a problem to load HTML in a plugin, I did a quick test with VST3 and either a file:// or a plain http:// URL should work.

8

I’ll close the other thread.

9

Yes, the problem now occurs on Mac OS. I created a VST plugin using JUCE that cannot load any content in the WebBrowserComponent when it is not running on XCode. When I create a regular project running on XCode, the WebBrowserComponent has no issues, which makes me very confused.

10

If you build your plugin in Debug mode, you should be able to right click in the WebBrowserComponent area, and see an Inspect Element item.

If you open it, and go to the Console tab you should see the concrete error message that the WebView encountered. This should help us understand what operation is failing exactly, and we’ll know more about how to fix it.

11

When using macos to open the plugin, the WebBrowserComponent did not display any information, there was no error message when opening the console, and the body was empty. There was no error message, such as the goToUrl method not taking effect, which is where I am very confused. If using xcode debugging, the WebBrowserComponent works normally, so may it be due to sandbox mechanisms or not loading the webkit into the project?

12

Hi,everyone,How to integrate webkit when using the JUCE framework to load HTML pages in the WebBrowserComponent？

13

Did you see the “Inspect Element” option and then open the web developer console? I attached two images, what it looks like for me in a VST3 plugin.

If you saw the developer console, that means that WebKit is loaded into your plugin.

Are you using the App Sandbox perhaps?

webview-console1
webview-console11692×1178 113 KB

webview-console2
webview-console21672×1164 132 KB

15

Sorry , I’m only replying to you now.The situation is like this. There are multiple pages in my project. When I first open the project, the WebBrowserComponent will be completely covered by other controls. Juce uses a blank page to replace the content of the WebBrowserComponent. When I switch back, juce does not It will actively load the original page, so I think that WebBrowserComponent has not loaded any content. So I have to call withKeepPageLoadedWhenBrowserIsHidden() method to keep the page active.