Create WPF Video Calling App

Learn how to create your own WPF video calling app using the Dyte SDK and the Microsoft Edge WebView2 control.

Windows Presentation Foundation (WPF), is a popular UI framework for building Windows applications. Since its launch in 2006, it has gained popularity, and many apps running on Windows these days benefit from its features. Due to easy interoperability with Win32 APIs and backward compatibility, WPF is still a popular choice.

Let’s begin to write some code!

Web App Creation

Create a Web Application using any tool that allows you to create an HTML file and run it on Live Server! In our sample, we are calling it 'solution-webapp'

In the HTML, refer to Dyte Web Components SDK and define custom elements:

Once you refer to the SDKs, you should be able to create a dyte-meeting component that can render the meeting on the browser.

Using the following script, you can start a meeting, join it, and get notified whenever something happens, such as recording status changes or someone joining or leaving a meeting.

meeting.joinRoom();

This line of code will join the meeting and add or admit current attendees (who have the authToken) to it.

document.getElementById('my-meeting').meeting = meeting;

This line of code will assign the current ongoing meeting to the previously created dyte-meeting component.

You can test this HTML file by running it through Live Server.

Microsoft Edge WebView2

Under the hood, Microsoft Edge utilises the well-known Chromium engine. It has the same features and rendering abilities as Chrome and other browsers. On top of that, Microsoft has added features to improve productivity and performance. The Microsoft Edge WebView2 component or control extends the Chromium experience to WPF apps. Install the most recent version of WebView2 - Microsoft Edge Developer.

Developing a WPF Video Calling App

To create a WPF app, you'll need a Visual Studio setup. You can use different versions or editions and get started with it. Create a new WPF app by going to File > New > Project. Give this project a name; we've used 'solution-wpfapp' in the current sample. Use the .NET 6 or 7 version.

Install NuGet Package

We must now include WebView2 Nuget Package in this project. Open Package Manager Console and enter the below command to install WebView2

PM> NuGet\Install-Package Microsoft.Web.WebView2 -Version 1.0.1724-prerelease

After installing the NuGet package, we can use Microsoft Edge WebView2 in our application.

Component & Design UI

Let's make ExamWindow a separate XAML Window and add a reference to the newly added package.

xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

Using the WebView2 component will be the same as using any other component.

For this example, we'll use the layout shown below. However, you are free to design your interface as you see fit.

Just as we did with DyteMeeting, we must also Initialize the ExamWindow, which is a XAML window in the WPF app. We do so using the following code snippet.

public ExamWindow()
{
     InitializeComponent();
     Loaded += ExamWindowLoaded;
     InitializeAsync();
}

We also need to initialise the Edge WebView2 component, which is demonstrated in the code snippet below.

async void InitializeAsync()
{
  await ParticipantWebView.EnsureCoreWebView2Async(null);
}

We set the HTML page URL we created and launched in Web App Creation when the ExamWindow is loaded. In addition, we pass the authToken so that a participant can be added to the meeting.

private void ExamWindowLoaded(object sender, RoutedEventArgs e)
{
     var host = string.Empty;        //Example: http://127.0.0.1:8082";
     var url = string.Empty;         //Example: default.html;
     var authToken = string.Empty;   //Example: XXXXXXXXxXXXXX;
     var source = new Uri(string.Concat(host, "/", url, "?", "&authToken=", authToken));
     ParticipantWebView.Source = new Uri(source.ToString());
}

Setup Communication & Events

In this video calling app sample, we would like to send events to the WPF app, such as when someone joins a meeting, or when the recording begins or ends. Likewise, we would like to send chat messages. To do so, we'll use events exposed by WebView in the browser and subscribe to them in the WPF app.

Let's change the HTML to include those events. Before calling joinRoom(), we will add the following code snippet;

//Attach meeting object to window object of the browser
window.meeting = meeting;
//Subscribe to events emitted by Dyte meeting.
meeting.recording.on('recordingUpdate', (e) => {
  window.chrome.webview?.postMessage("recordingUpdate:" + e);
});
meeting.self.on('roomJoined', () => {
  window.chrome.webview?.postMessage("roomJoined");
});
meeting.self.on('roomLeft', () => {
  window.chrome.webview?.postMessage("roomLeft");
});
meeting.chat.on('chatUpdate', ({ message, messages }) => {
  window.chrome.webview?.postMessage(message);
});

After we configure these event handlers, the event will send messages to the WPF app, which we must subscribe to. We also want WPF to send messages to the Web. So, let's add the following event subscriptions to the constructor.

ParticipantWebView.WebMessageReceived += ParticipantWebViewWebMessageReceived;

As a result, whenever an event occurs, the WPF app receives a message, which is displayed in a MessageBox.

private void ParticipantWebViewWebMessageReceived(object? sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
     MessageBox.Show(e.WebMessageAsJson);
}

Finally, when the button is pressed, we will send chat messages to the meeting.
First, let's add a Button and a TextBox to the UI.

 Send Message 

We can now add a button clicked event that sends a chat message in a meeting.

private void SendMessageClick(object sender, RoutedEventArgs e)
{
ParticipantWebView.ExecuteScriptAsync($"meeting.chat.sendTextMessage('{ChatMessage.Text}');");
}

That is essentially what the app is all about. This app will be tested in two steps.

1. Check that the solution-webapp is running. Make a note of the URL. If the URL differs, make a note of it and make the necessary changes in the WPF app.
2. Launch the WPF app.

Conclusion

We can bring Dyte video calling to WPF apps while retaining the framework's richness by using the Microsoft Edge WebView2 control. You now have your own WPF video calling app built with the Dyte SDK. Please see the sample in GitHub repository.