👉 PROJECT REPOSITORY: https://github.com/JanWilczek/juce-webview-tutorial
💬 Share your thoughts on the JUCE forum: https://forum.juce.com/t/juce-8-tutorial-videos
Jan Wilczek, the founder of @WolfSoundAudio blog and YouTube channel, demonstrates how to prepare an audio plugin containing WebViews for distribution to your customers.
In the video tutorial:
✅ Ensure proper WebView runtime on client devices running Windows, macOS, Linux, iOS, or Android
✅ Install WebView2 Runtime and link to WebView2 loader library on Windows
✅ Embed your web UI files into your plugin binary
✅ Serve web UI files directly from C++ backend
✅ Classes explained: ZipFile, ZipStream, ZipEntry
REGARDING ZIPPING WEB UI FILES AND READING THEM FROM BINARY DATA
When zipping web UI files, there are a few problems you may run into.
⚠ WARNING: The solution proposed in the video (zipping webview files with CMake's file() command and looking for requested files comparing the last part of the filepath) may fail for same-named files or files with identical suffixes, e.g., "index.js" and "js/juce/index.js" have the same suffix; when "index.js" is requested, "js/juce/index.js" may be returned.
To mitigate this, you should not iterate over zipped files and compare their filenames using endsWith() but rather use juce::ZipFile::getEntry() and provide the exact filepath that's contained in the zip. However, this is not directly compatible with CMake's file() command; CMake may introduce unnecessarily relative paths. A cross-platform solution is to use add_custom_target() to fix the working directory: this is the approach used in the repository on GitHub.
📅 Video Release Date: 21.03.2025
ABOUT JUCE 8
The JUCE team represents a significant advancement in audio application and plug-in development. This release showcases highly anticipated updates, including substantial low-level improvements to text rendering, lightning-fast Direct2D rendering on Windows, and the introduction of a new animation framework. In addition to bolstering traditional UI capabilities, JUCE pioneers a new era in audio software by unlocking the potential of WebViews, offering developers a scalable way to use web technologies in graphical user interfaces of audio plugins.
An introduction to the main features of JUCE 8 can be found here: https://youtu.be/mjp4Xu1QA0w?si=mWHDjQYUx_9xsf5b
#JUCE #Cpp #JavaScript #AudioProgramming #WebViewGUIs #SoftwareDevelopment #AudioPlugins #JUCE8
TIMESTAMPS
00:00 Introduction
00:12 Tutorial recap
00:52 Plugin distribution WITHOUT WebViews
01:36 Plugin distribution WITH WebViews
03:02 What is a WebView runtime?
04:18 Windows prerequisites: WebView2 Runtime
04:54 Windows prerequisites: linking to WebView2 loader library
06:50 macOS & iOS prerequisites: WebKit framework
07:22 Linux prerequisites: libwebkit2gtk-4.1 or 4.0 package
07:43 Android prerequisites: android.webkit library
08:07 Distributing WebView files with the plugin
10:25 Packaging WebView files as JUCE's binary data
15:59 Zipping WebView files for distribution with CMake
20:29 Serving WebView files from C++ backend
22:33 Reading WebView files from a zip file in binary data
28:07 Testing the complete plugin
28:43 Recap: Serving web UI files from C++
31:39 Recap