Skip to content

Commit f7f6511

Browse files
authored
Update call-readiness-tutorial-part-2-requesting-device-access.md
1 parent fadaaa5 commit f7f6511

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ 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'll create a series of components that will encourage the user to grant access to the camera and microphone.
30-
We'll display prompts to the user to guide them through granting access.
31-
We'll also inform the user with a prompt if access isn't granted.
29+
In this section, we create a series of components that will encourage the user to grant access to the camera and microphone.
30+
We display prompts to the user to guide them through granting access.
31+
We inform the user with a prompt if access isn't granted.
3232

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

35-
We'll 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
36-
from the UI Library. Like the Unsupported Browser prompt, we'll also host these prompts inside a FluentUI `modal`.
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
36+
from the UI Library. Like the Unsupported Browser prompt, we host these prompts inside a FluentUI `modal`.
3737

3838
`src/DevicePermissionPrompts.tsx`
3939

@@ -70,8 +70,8 @@ const PermissionsModal = (props: { isOpen: boolean, kind: "denied" | "request" |
7070

7171
### Checking for camera and microphone access
7272

73-
Here we'll 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'll ensure we handle the `unknown` case when prompting the user for permissions.
73+
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.
7575

7676
`src/DevicePermissionUtils.ts`
7777

@@ -110,12 +110,12 @@ export const requestCameraAndMicrophonePermissions = async (callClient: Stateful
110110

111111
### Prompting the user to grant access to the camera and microphone
112112

113-
Now we have the prompts and check and request logic, we'll create a `DeviceAccessComponent` to prompt the user regarding device permissions.
114-
In this component we'll display different prompts to the user based on the device permission state:
113+
Now we have the prompts and check and request logic, we create a `DeviceAccessComponent` to prompt the user regarding device permissions.
114+
In this component we display different prompts to the user based on the device permission state:
115115

116-
- If the device permission state is unknown, we'll display a prompt to the user informing them we're checking for device permissions.
117-
- If we're requesting permissions, we'll display a prompt to the user encouraging them to accept the permissions request.
118-
- If the permissions are denied, we'll display a prompt to the user informing them that they've denied permissions, and that they'll need to grant permissions to continue.
116+
- If the device permission state is unknown, we display a prompt to the user informing them we're checking for device permissions.
117+
- If we're requesting permissions, we display a prompt to the user encouraging them to accept the permissions request.
118+
- If the permissions are denied, we display a prompt to the user informing them that they've denied permissions, and that they need to grant permissions to continue.
119119

120120
`src/DeviceAccessChecksComponent.tsx`
121121

@@ -193,13 +193,13 @@ 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 will add it to the `App.tsx`. First, add the import:
197197

198198
```ts
199199
import { DeviceAccessChecksComponent } from './DeviceAccessChecksComponent';
200200
```
201201

202-
Then update the `TestingState` type to be the following:
202+
Then update the `TestingState` type to be the following value:
203203

204204
```ts
205205
type TestingState = 'runningEnvironmentChecks' | 'runningDeviceAccessChecks' | 'finished';

0 commit comments

Comments
 (0)