Communicating from JavaScript Frontend to C++ Backend | JUCE 8 WebViews Tutorial

👉 PROJECT REPOSITORY: https://github.com/JanWilczek/juce-we...
👀 JUCE 8 WebViews feature description: https://juce.com/blog/juce-8-feature-...
🔗 JUCE 8 on GitHub: https://github.com/juce-framework/JUCE
💬 Share your thoughts on the update on the JUCE forum: https://forum.juce.com/t/juce-8-tutor...

Jan Wilczek, the founder of ‪@WolfSoundAudio‬ blog and YouTube channel, presents how to build an audio plugin in JUCE with a WebView GUI.

This episode focuses on ways of communicating from the JavaScript frontend to the C++ backend:

1. Calling a C++ function from JavaScript with the possibility of calling the continuation function from C++.
2. Listening for JavaScript events from C++.

In the video tutorial:
✅ How to use WebBrowserComponent::withNativeFunction()
✅ How to use WebBrowserComponent::withEventListener()

🔗 Check out the project repository and start using WebViews in you plugins today: https://github.com/JanWilczek/juce-we...

📅 Video Release Date: 16.07.2024

ABOUT JUCE 8

The JUCE team is delighted to announce the release of JUCE 8, representing 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 interfaces by unlocking the potential of WebViews, offering developers a modern foundation for next-generation applications.

An introduction to the main features of JUCE 8 can be found here:    • Dive Into JUCE 8: WebViews, Animations, Em...  

#JUCE #Cpp #JavaScript #AudioProgramming #WebViewGUIs #SoftwareDevelopment #AudioPlugins #JUCE8

TIMESTAMPS

00:00 Introduction
00:56 Method 1: withNativeFunction()
00:56 Creating a C++ GUI label to be updated from JavaScript
01:10 Registering a C++ function callable from JavaScript
04:47 Updating the C++ label text
06:17 Calling the completion object to allow JavaScript continuation
07:42 Creating an HTML button calling the C++ function
08:48 Calling a C++ function from JavaScript with continuation
11:10 Method 2: withEventListener()
12:20 Emitting a JUCE JavaScript event on HTML button click
13:36 Registering a JavaScript event listener in C++
15:49 Testing emitting JavaScript and handling them in C++
16:11 Summary