You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/communication-services/samples/includes/web-calling-hero.md
+9-12Lines changed: 9 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,19 +6,19 @@ author: probableprime
6
6
manager: mikben
7
7
ms.service: azure-communication-services
8
8
ms.subservice: azure-communication-services
9
-
ms.date: 06/30/2021
9
+
ms.date: 09/13/2023
10
10
ms.topic: include
11
11
ms.custom: include file
12
12
ms.author: rifox
13
13
---
14
14
15
15
The Azure Communication Services **Group Calling Hero Sample** demonstrates how the Communication Services Calling Web SDK can be used to build a group calling experience.
16
16
17
-
In this Sample quickstart, we'll learn how the sample works before we run the sample on your local machine. We'll then deploy the sample to Azure using your own Azure Communication Services resources.
17
+
In this Sample quickstart, we learn how the sample works before we run the sample on your local machine and then deploy the sample to Azure using your own Azure Communication Services resources.
18
18
19
19
## Download code
20
20
21
-
Find the project for this sample on [GitHub](https://github.com/Azure-Samples/communication-services-web-calling-hero). A version of the sample which includes features currently in public preview such as [Teams Interop](../../concepts/teams-interop.md) and [Call Recording](../../concepts/voice-video-calling/call-recording.md) can be found on a separate [branch](https://github.com/Azure-Samples/communication-services-web-calling-hero/tree/public-preview).
21
+
Find the project for this sample on [GitHub](https://github.com/Azure-Samples/communication-services-web-calling-hero). A version of the sample that includes features currently in public preview such as [Teams Interop](../../concepts/teams-interop.md) and [Call Recording](../../concepts/voice-video-calling/call-recording.md) can be found on a separate [branch](https://github.com/Azure-Samples/communication-services-web-calling-hero/tree/public-preview).
22
22
23
23
[](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2Fcommunication-services-web-calling-hero%2Fmain%2Fdeploy%2Fazuredeploy.json)
24
24
@@ -30,31 +30,28 @@ Here's what the sample looks like:
30
30
31
31
:::image type="content" source="../media/calling/landing-page.png" alt-text="Screenshot showing the landing page of the sample application.":::
32
32
33
-
When you press the "Start a call" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify the camera and microphone that you want to use. You'll be able to disable/enable your devices with toggle controls:
33
+
When you press the "Start a call" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you are prompted to specify the camera and microphone that you want to use. You are able to disable/enable your devices with toggle controls:
34
34
35
35
:::image type="content" source="../media/calling/pre-call.png" alt-text="Screenshot showing the pre-call screen of the sample application.":::
36
36
37
-
Once you configure your display name and devices, you can join the call session. You'll then see the main call canvas where the core calling experience lives.
37
+
Once you configure your display name and devices, you can join the call session. You will see the main call canvas where the core calling experience lives.
38
38
39
39
:::image type="content" source="../media/calling/main-app.png" alt-text="Screenshot showing the main screen of the sample application.":::
40
40
41
41
Components of the main calling screen:
42
42
43
43
-**Media Gallery**: The main stage where participants are shown. If a participant has their camera enabled, their video feed is shown here. Each participant has an individual tile which shows their display name and video stream (when there is one)
44
44
-**Header**: This is where the primary call controls are located to toggle settings and participant side bar, turn video and mix on/off, share screen and leave the call.
45
-
-**Side Bar**: This is where participants and settings information are shown when toggled using the controls on the header. The component can be dismissed using the 'X' on the top right corner. Participants side bar will show a list of participants and a link to invite more users to chat. Settings side bar allows you to configure microphone and camera settings.
45
+
-**Side Bar**: This is where participants and settings information are shown when toggled using the controls on the header. The component can be dismissed using the 'X' on the top right corner. Participants side bar shows a list of participants and a link to invite more users to chat. Settings side bar allows you to configure microphone and camera settings.
46
46
47
-
> [!NOTE]
48
-
> Based on limitations on the Web Calling SDK, only 4 video streams and 1 screen sharing stream is rendered. For more information see, [Calling SDK Stream Support](../../concepts/voice-video-calling/calling-sdk-features.md#calling-sdk-streaming-support).
49
-
50
-
Below you'll find more information on prerequisites and steps to set up the sample.
47
+
Below you can find more information on prerequisites and steps to set up the sample.
51
48
52
49
## Prerequisites
53
50
54
51
- An Azure account with an active subscription. For details, see [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
55
52
-[Node.js (12.18.4 and above)](https://nodejs.org/en/download/)
56
53
-[Visual Studio Code (Stable Build)](https://code.visualstudio.com/Download)
57
-
- An Azure Communication Services resource. For details, see [Create an Azure Communication Services resource](../../quickstarts/create-communication-resource.md). You'll need to record your resource **connection string** for this quickstart.
54
+
- An Azure Communication Services resource. For details, see [Create an Azure Communication Services resource](../../quickstarts/create-communication-resource.md). You need to record your resource **connection string** for this quickstart.
58
55
59
56
## Before running the sample for the first time
60
57
@@ -95,7 +92,7 @@ Below you'll find more information on prerequisites and steps to set up the samp
95
92
npm run start
96
93
```
97
94
98
-
This will open a client server on port 3000 that serves the website files, and an api server on port 8080 that performs functionality like minting tokens for call participants.
95
+
This opens a client server on port 3000 that serves the website files, and an api server on port 8080 that performs functionality like minting tokens for call participants.
0 commit comments