Skip to content

Commit c7bcdc3

Browse files
garchiro7garchiro7
committed
Update the quickstarts
1 parent d77e7f0 commit c7bcdc3

File tree

2 files changed

+1254
-404
lines changed

2 files changed

+1254
-404
lines changed

‎articles/communication-services/quickstarts/voice-video-calling/includes/get-started/get-started-windows.md

Lines changed: 199 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ ms.author: rifox
99
In this quickstart, you learn how to start a call using the Azure Communication Services Calling SDK for Windows.
1010

1111
## [UWP](#tab/uwp)
12+
1213
You can download the sample app from [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/Calling).
1314

1415
### Prerequisites
@@ -42,7 +43,7 @@ Right select your project and go to `Manage Nuget Packages` to install `Azure.Co
4243
#### Request access
4344

4445
Go to `Package.appxmanifest` and select `Capabilities`.
45-
Check `Internet (Client & Server)` to gain inbound and outbound access to the Internet. Check `Microphone` to access the audio feed of the microphone.
46+
Check `Internet (Client & Server)` to gain inbound and outbound access to the Internet. Check `Microphone` to access the audio feed of the microphone. Check `WebCam` to access the camera of the device.
4647

4748
:::image type="content" source="../../media/windows/request-access.png" alt-text="Screenshot showing requesting access to Internet and Microphone in Visual Studio.":::
4849

@@ -1407,3 +1408,200 @@ You can build and run the code on Visual Studio. For solution platforms, we supp
14071408
You can make an outbound call by providing a user ID in the text field and clicking the `Start Call` button. Calling `8:echo123` connects you with an echo bot, this feature is great for getting started and verifying your audio devices are working.
14081409

14091410
:::image type="content" source="../../media/windows/run-the-winui-app.png" alt-text="Screenshot showing running the WinUI quickstart app":::
1411+
1412+
1413+
You can download the sample app from [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/CallingWinUI).
1414+
1415+
### Prerequisites
1416+
1417+
To complete this tutorial, you need the following prerequisites:
1418+
1419+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
1420+
- Install [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) and [Windows App SDK version 1.2 preview 2](https://learn.microsoft.com/windows/apps/windows-app-sdk/preview-channel#version-12-preview-2-120-preview2).
1421+
- Basic understanding of how to create a WinUI 3 app. [Create your first WinUI 3 (Windows App SDK) project](https://learn.microsoft.com/windows/apps/winui/winui3/create-your-first-winui3-app?pivots=winui3-packaged-csharp) is a good resource to start with.
1422+
- A deployed Communication Services resource. [Create a Communication Services resource](../../../create-communication-resource.md). You need to **record your connection string** for this quickstart.
1423+
- A [User Access Token](../../../identity/access-tokens.md) for your Azure Communication Service. You can also use the Azure CLI and run the command with your connection string to create a user and an access token.
1424+
1425+
1426+
```azurecli-interactive
1427+
az communication identity token issue --scope voip --connection-string "yourConnectionString"
1428+
```
1429+
1430+
For details, see [Use Azure CLI to Create and Manage Access Tokens](../../../identity/access-tokens.md?pivots=platform-azcli).
1431+
1432+
### Setting up
1433+
1434+
#### Creating the project
1435+
1436+
In Visual Studio, create a new project with the **Blank App, Packaged (WinUI 3 in Desktop)** template to set up a single-page WinUI 3 app.
1437+
1438+
:::image type="content" source="../../media/windows/create-a-new-winui-project.png" alt-text="Screenshot showing the New WinUI Project window within Visual Studio.":::
1439+
1440+
#### Install the package
1441+
1442+
Right click over your project and go to `Manage Nuget Packages` to install `Azure.Communication.Calling` [1.0.0-beta.33](https://www.nuget.org/packages/Azure.Communication.Calling/1.0.0-beta.33) or superior. Make sure Include Preleased is checked.
1443+
1444+
#### Request access
1445+
1446+
:::image type="content" source="../../media/windows/request-access.png" alt-text="Screenshot showing requesting access to Internet and Microphone in Visual Studio.":::
1447+
1448+
#### Set up the app framework
1449+
1450+
We need to configure a basic layout to attach our logic. In order to place an outbound call, we need a `TextBox` to provide the User ID of the callee. We also need a `Start Call` button and a `Hang Up` button.
1451+
Open the `MainWindow.xaml` of your project and add the `Grid` node to your `Window`:
1452+
1453+
```C#
1454+
<Window
1455+
x:Class="CallingQuickstart.MainWindow"
1456+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
1457+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
1458+
xmlns:local="using:CallingQuickstart"
1459+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
1460+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1461+
mc:Ignorable="d">
1462+
<Grid>
1463+
<Grid.RowDefinitions>
1464+
<RowDefinition Height="60*"/>
1465+
<RowDefinition Height="200*"/>
1466+
<RowDefinition Height="60*"/>
1467+
</Grid.RowDefinitions>
1468+
<TextBox x:Name="CalleeTextBox" Text="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" Height="40" Margin="10,10,10,10" />
1469+
<Grid Grid.Row="1">
1470+
</Grid>
1471+
<StackPanel Grid.Row="2" Orientation="Horizontal">
1472+
<Button x:Name="CallButton" Content="Start Call" Click="CallButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
1473+
<Button x:Name="HangupButton" Content="Hang Up" Click="HangupButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
1474+
<TextBlock x:Name="State" Text="Status" TextWrapping="Wrap" VerticalAlignment="Center" Margin="40,0,0,0" Height="40" Width="200"/>
1475+
</StackPanel>
1476+
</Grid>
1477+
</Window>
1478+
```
1479+
1480+
Open the `MainWindow.xaml.cs` and replace the content with following implementation:
1481+
```C#
1482+
using Azure.Communication.Calling;
1483+
using Azure.WinRT.Communication;
1484+
using Microsoft.UI.Xaml;
1485+
using System;
1486+
using System.Collections.Generic;
1487+
using System.Linq;
1488+
using System.Threading.Tasks;
1489+
using Windows.Media.Core;
1490+
1491+
namespace CallingQuickstart
1492+
{
1493+
public sealed partial class MainWindow : Window
1494+
{
1495+
CallAgent callAgent;
1496+
Call call;
1497+
DeviceManager deviceManager;
1498+
1499+
public MainWindow()
1500+
{
1501+
this.InitializeComponent();
1502+
Task.Run(() => this.InitCallAgentAndDeviceManagerAsync()).Wait();
1503+
}
1504+
1505+
private async Task InitCallAgentAndDeviceManagerAsync()
1506+
{
1507+
// Create and cache CallAgent and optionally fetch DeviceManager
1508+
}
1509+
1510+
private async void CallButton_Click(object sender, RoutedEventArgs e)
1511+
{
1512+
// Start call
1513+
}
1514+
1515+
private async void HangupButton_Click(object sender, RoutedEventArgs e)
1516+
{
1517+
// End call
1518+
}
1519+
1520+
private async void Call_OnStateChangedAsync(object sender, PropertyChangedEventArgs args)
1521+
{
1522+
// Update call state
1523+
}
1524+
}
1525+
}
1526+
```
1527+
1528+
### Object model
1529+
1530+
The following classes and interfaces handle some of the major features of the Azure Communication Services Calling SDK:
1531+
1532+
| Name | Description |
1533+
| ------------------------------------- | ------------------------------------------------------------ |
1534+
| `CallClient` | The `CallClient` is the main entry point to the Calling client library. |
1535+
| `CallAgent` | The `CallAgent` is used to start and join calls. |
1536+
| `Call` | The `Call` is used to manage placed or joined calls. |
1537+
| `CommunicationTokenCredential` | The `CommunicationTokenCredential` is used as the token credential to instantiate the `CallAgent`.|
1538+
| `CommunicationUserIdentifier` | The `CommunicationUserIdentifier` is used to represent the identity of the user, which can be one of the following options: `CommunicationUserIdentifier`, `PhoneNumberIdentifier` or `CallingApplication`. |
1539+
1540+
### Authenticate the client
1541+
1542+
Initialize a `CallAgent` instance with a User Access Token, which enables us to make and receive calls, and optionally obtain a DeviceManager instance to query for client device configurations.
1543+
1544+
In the following code, replace `<AUTHENTICATION_TOKEN>` with a User Access Token. Refer to the [user access token](../../../identity/access-tokens.md) documentation if you don't already have a token available.
1545+
1546+
Add the following code to the `InitCallAgentAndDeviceManagerAsync` function.
1547+
1548+
```C#
1549+
var callClient = new CallClient();
1550+
this.deviceManager = await callClient.GetDeviceManager();
1551+
1552+
var tokenCredential = new CommunicationTokenCredential("<AUTHENTICATION_TOKEN>");
1553+
var callAgentOptions = new CallAgentOptions()
1554+
{
1555+
DisplayName = "<DISPLAY_NAME>"
1556+
};
1557+
1558+
this.callAgent = await callClient.CreateCallAgent(tokenCredential, callAgentOptions);
1559+
this.callAgent.OnCallsUpdated += Agent_OnCallsUpdatedAsync;
1560+
this.callAgent.OnIncomingCall += Agent_OnIncomingCallAsync;
1561+
```
1562+
1563+
### Start a call
1564+
1565+
Add the implementation to the `CallButton_Click` to start a call with the `callAgent` we created, and hook up call state event handler.
1566+
1567+
```C#
1568+
var startCallOptions = new StartCallOptions();
1569+
1570+
var callees = new ICommunicationIdentifier[1]
1571+
{
1572+
new CommunicationUserIdentifier(CalleeTextBox.Text.Trim())
1573+
};
1574+
1575+
this.call = await this.callAgent.StartCallAsync(callees, startCallOptions);
1576+
this.call.OnStateChanged += Call_OnStateChangedAsync;
1577+
```
1578+
1579+
### End a call
1580+
1581+
End the current call when the `Hang Up` button is clicked. Add the implementation to the HangupButton_Click to end a call with the callAgent we created, and tear down the call state event handler.
1582+
1583+
```C#
1584+
this.call.OnStateChanged -= Call_OnStateChangedAsync;
1585+
await this.call.HangUpAsync(new HangUpOptions());
1586+
```
1587+
1588+
### Track call state
1589+
1590+
Stay notified about the state of current call.
1591+
1592+
```C#
1593+
var state = (sender as Call)?.State;
1594+
this.DispatcherQueue.TryEnqueue(() => {
1595+
State.Text = state.ToString();
1596+
});
1597+
```
1598+
1599+
### Run the code
1600+
1601+
You can build and run the code on Visual Studio. For solution platforms, we support `ARM64`, `x64` and `x86`.
1602+
1603+
You can make an outbound call by providing a user ID in the text field and clicking the `Start Call` button. Calling `8:echo123` connects you with an echo bot, this feature is great for getting started and verifying your audio devices are working.
1604+
1605+
:::image type="content" source="../../media/windows/run-the-winui-app.png" alt-text="Screenshot showing running the WinUI quickstart app":::
1606+
1607+
---

0 commit comments

Comments
 (0)