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/tutorials/chat-interop/includes/meeting-interop-features-inline-image-javascript.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,17 +7,17 @@ ms.topic: include
7
7
ms.service: azure-communication-services
8
8
---
9
9
10
-
In this tutorial, you will learn how to enable inline image support using the Azure Communication Services Chat SDK for JavaScript.
10
+
In this tutorial, you'll learn how to enable inline image support using the Azure Communication Services Chat SDK for JavaScript.
11
11
12
12
## Sample Code
13
13
Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/join-chat-to-teams-meeting).
14
14
15
15
## Prerequisites
16
16
17
17
* You've gone through the quickstart - [Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md).
18
-
* Create 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 connection string** for this tutorial.
18
+
* Create an Azure Communication Services resource. For details, see [Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to **record your connection string** for this tutorial.
19
19
* You've set up a Teams meeting using your business account and have the meeting URL ready.
20
-
* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.3.2-beta.1 or latest, see[here](https://www.npmjs.com/package/@azure/communication-chat).
20
+
* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.3.2-beta.1 or latest. See[here](https://www.npmjs.com/package/@azure/communication-chat).
21
21
22
22
## Goal
23
23
@@ -51,7 +51,7 @@ async function renderReceivedMessage(message) {
51
51
messagesContainer.innerHTML= messages;
52
52
}
53
53
```
54
-
From incoming event of type `ChatMessageReceivedEvent`, there's a property named `attachments`, which contains information about inline image, and it is all we need to render inline images in our UI:
54
+
From incoming event of type `ChatMessageReceivedEvent`, there's a property named `attachments`, which contains information about inline image, and it's all we need to render inline images in our UI:
Now we have an overlay set up, it's time to work on the logic to render full scale images. Recall that we have created a `onlick` event handler to call a function `fetchFullScaleImage`:
261
+
Now we have an overlay set up, it's time to work on the logic to render full scale images. Recall that we've created an `onClick` event handler to call a function `fetchFullScaleImage`:
Open your browser and navigate to http://localhost:8080/. Enter the meeting URL and the thread ID. Send some inline images from Teams client like this:
314
314
315
-
:::image type="content" source="../../media/meeting-interop-features-inline-3.png" alt-text="A screenshot of Teams client shown a sent message that reads Here are some ideas, let me know what you think! and two inline images of room interior mockups":::
315
+
:::image type="content" source="../../media/meeting-interop-features-inline-3.png" alt-text="A screenshot of Teams client shown a sent message reads: Here are some ideas, let me know what you think! The message aslo contains two inline images of room interior mockups":::
316
316
317
317
Then you should see the new message being rendered along with preview images:
0 commit comments