|
1 | 1 | ---
|
2 | 2 | page_type: sample
|
3 | 3 | languages:
|
4 |
| -- javascript |
| 4 | + - javascript |
5 | 5 | products:
|
6 |
| -- azure |
7 |
| -- azure-communication-services |
| 6 | + - azure |
| 7 | + - azure-communication-services |
8 | 8 | ---
|
9 | 9 |
|
10 | 10 | # Get Started with Rooms
|
11 | 11 |
|
12 |
| -This code sample showcases the ability to join a Rooms call using the CallComposite of the ACS UI library. For an overview of how Rooms works, you can read this |
13 |
| -(documentation)[https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#managing-rooms-and-joining-room-calls]. To join a rooms call, you need the room id of the an existing room and the local user's id needs to be added to that room. The Rooms Client is needed to do this but is out of scope for this ACS UI library quickstart sample. For more information on how to create/manage rooms and add users to rooms using the Rooms Client, follow this (quickstart)[https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?tabs=windows&pivots=programming-language-javascript]. |
| 12 | +This code sample showcases the ability to join a Rooms call using the CallComposite of the ACS UI library. For an overview of how Rooms works, you can read this |
| 13 | +[documentation](https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#managing-rooms-and-joining-room-calls). To join a rooms call, you need the room id of the an existing room and the local user's id needs to be added to that room. The Rooms Client is needed to do this but is out of scope for this ACS UI library quickstart sample. For more information on how to create/manage rooms and add users to rooms using the Rooms Client, follow this [quickstart](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?tabs=windows&pivots=programming-language-javascript). |
14 | 14 |
|
15 | 15 | ## Prerequisites
|
16 | 16 |
|
17 |
| -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . |
18 |
| -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). |
| 17 | +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . |
| 18 | +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. |
19 | 19 | - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). You will need the endpoint value for the resource
|
20 | 20 | - An identity with both VoIP and Chat scopes. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity).
|
21 | 21 | - Create a room and add your user id to the room by using the provided sample scripts which are based on this Rooms client [quickstart](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?pivots=programming-language-javascript).
|
22 |
| - - First, enter your connection string from your Communication Services resource in `.\src\scripts\settings.js` to run the Rooms client scripts. |
23 |
| - - Create a room by running `node .\src\scripts\createRoom.js` and copy the room id from the output. |
24 |
| - - Add your user as a Presenter to the generated room by running `node .\src\scripts\addParticipantToRoom.js <USER_ID> <ROOM_ID>` with the corresponding ids |
25 |
| - - You can also change the role of the user to Attendee or Consumer in `.\src\scripts\addParticipantToRoom.js` and rerun the script. |
| 22 | + - First, enter your connection string from your Communication Services resource in `.\src\scripts\settings.js` to run the Rooms client scripts. |
| 23 | + - Open terminal and navigate to `src\scripts`. |
| 24 | + - Create a room by running `node createRoom.js` and copy the room id from the output. |
| 25 | + - Add your user as a Presenter to the generated room by running `node addParticipantToRoom.js <USER_ID> <ROOM_ID>` with the corresponding ids |
| 26 | + - You can also change the role of the user to Attendee or Consumer in `addParticipantToRoom.js` and rerun the script. |
26 | 27 |
|
27 | 28 | ## Run the code
|
28 | 29 |
|
29 | 30 | 1. Run `npm i` on the directory of the project to install dependencies
|
30 | 31 | 2. Swap placeholders with values in the code.
|
31 |
| - - Go to the `src` folder and find the `App.tsx` file. |
32 |
| - - Enter the `USER_ID` and `TOKEN` for the identity you created. |
33 |
| - - Enter the generated `ROOM_ID` to join the room and make sure the user is added to the room to be able to join the room. |
34 |
| - - Optional: You can update the display name to match a string value of your choice. |
35 |
| - - Save the file. |
36 |
| -4. Run `npm run start` |
| 32 | + - Go to the `src` folder and find the `App.tsx` file. |
| 33 | + - Enter the `USER_ID` and `TOKEN` for the identity you created. |
| 34 | + - Enter the generated `ROOM_ID` to join the room and make sure the user is added to the room to be able to join the room. |
| 35 | + - Optional: You can update the display name to match a string value of your choice. |
| 36 | + - Save the file. |
| 37 | +3. Run `npm run start` |
0 commit comments