Skip to content

Commit 0ee2d87

Browse files
authored
Update call-readiness-tutorial-part-2-requesting-device-access.md
1 parent 0a50a9d commit 0ee2d87

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

articles/communication-services/tutorials/call-readiness/call-readiness-tutorial-part-2-requesting-device-access.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ Access the full code for this tutorial on [GitHub](https://github.com/Azure-Samp
2626
## Requesting access to the camera and microphone
2727

2828
For calling applications, it's often vital a user has given permission to use the microphone and camera.
29-
In this section, we create a series of components that will encourage the user to grant access to the camera and microphone.
29+
In this section, we create a series of components that encourages the user to grant access to the camera and microphone.
3030
We display prompts to the user to guide them through granting access.
3131
We inform the user with a prompt if access isn't granted.
3232

3333
### Creating prompts for camera and microphone access
3434

35-
We first create a series of device permissions prompts to get users into a state where they've accepted the microphone and camera permissions. These prompts will use the `CameraAndMicrophoneSitePermissions` component
35+
We first create a series of device permissions prompts to get users into a state where they've accepted the microphone and camera permissions. These prompts use the `CameraAndMicrophoneSitePermissions` component
3636
from the UI Library. Like the Unsupported Browser prompt, we host these prompts inside a FluentUI `modal`.
3737

3838
`src/DevicePermissionPrompts.tsx`
@@ -71,7 +71,7 @@ const PermissionsModal = (props: { isOpen: boolean, kind: "denied" | "request" |
7171
### Checking for camera and microphone access
7272

7373
Here we add two new utility functions to check and request for camera and microphone access. Create a file called `devicePermissionUtils.ts` with two functions `checkDevicePermissionsState` and `requestCameraAndMicrophonePermissions`.
74-
`checkDevicePermissionsState` will use the [PermissionAPI](https://developer.mozilla.org/docs/Web/API/Permissions_API). However, querying for camera and microphone isn't supported on Firefox and thus we ensure this method returns `unknown` in this case. Later we ensure we handle the `unknown` case when prompting the user for permissions.
74+
`checkDevicePermissionsState` uses the [PermissionAPI](https://developer.mozilla.org/docs/Web/API/Permissions_API). However, querying for camera and microphone isn't supported on Firefox and thus we ensure this method returns `unknown` in this case. Later we ensure we handle the `unknown` case when prompting the user for permissions.
7575

7676
`src/DevicePermissionUtils.ts`
7777

@@ -84,7 +84,7 @@ import { StatefulCallClient } from "@azure/communication-react";
8484
*
8585
* @remarks
8686
* The Permissions API we are using is not supported in Firefox, Android WebView or Safari < 16.
87-
* In those cases this will return 'unknown'.
87+
* In those cases this returns 'unknown'.
8888
*/
8989
export const checkDevicePermissionsState = async (): Promise<{camera: PermissionState, microphone: PermissionState} | 'unknown'> => {
9090
try {
@@ -149,7 +149,7 @@ export const DeviceAccessChecksComponent = (props: {
149149
useEffect(() => {
150150
const runDeviceAccessChecks = async (): Promise<void> => {
151151

152-
// First we will check if we need to prompt the user for camera and microphone permissions.
152+
// First we check if we need to prompt the user for camera and microphone permissions.
153153
// The prompt check only works if the browser supports the PermissionAPI for querying camera and microphone.
154154
// In the event that is not supported, we show a more generic prompt to the user.
155155
const devicePermissionState = await checkDevicePermissionsState();
@@ -193,7 +193,7 @@ export const DeviceAccessChecksComponent = (props: {
193193

194194
```
195195

196-
After we have finished creating this component, we will add it to the `App.tsx`. First, add the import:
196+
After we have finished creating this component, we add it to the `App.tsx`. First, add the import:
197197

198198
```ts
199199
import { DeviceAccessChecksComponent } from './DeviceAccessChecksComponent';
@@ -237,15 +237,15 @@ const App = (): JSX.Element => {
237237
)}
238238

239239

240-
{/* After the device setup is complete, take the user to the call. For this sample we will just show a test complete page. */}
240+
{/* After the device setup is complete, take the user to the call. For this sample we show a test complete page. */}
241241
{testState === 'finished' && <TestComplete />}
242242
</CallClientProvider>
243243
</FluentThemeProvider>
244244
);
245245
}
246246
```
247247

248-
The app will now present the user with prompts to guide them through device access:
248+
The app presents the user with prompts to guide them through device access:
249249

250250
![Gif showing user being prompted for camera and microphone access](../media/call-readiness/prompt-device-permissions.gif)
251251

0 commit comments

Comments
 (0)