-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(android-core): add Pre-call section
completes: MOB-1600
- Loading branch information
1 parent
75cd42c
commit b8f7717
Showing
7 changed files
with
140 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,111 +1,119 @@ | ||
# Media Preview | ||
|
||
This section focuses on pre-call functionality, providing developers with the tools needed to prepare the media environment before joining the meeting. If you are using our UI Kits, this will be handled by `dyte-setup-screen` or could be built with `dyte-participant-tile`, `dyte-settings` components. | ||
Before joining a meeting, users may want to preview and configure their media devices like camera, microphone, and audio output. | ||
This section provides developers with the tools to prepare the media environment before joining a Dyte meeting. | ||
|
||
If you are using our UI Kits, this functionality can be handled by `DyteSetupFragment` or built with `DyteParticipantTileView` | ||
and `DyteSettingsFragment` components. | ||
|
||
|
||
## Properties | ||
|
||
- `audioEnabled`: A <span className="tag-orange">boolean</span> value indicating if the audio currently enabled. | ||
- `videoEnabled`: A <span className="tag-orange">boolean</span> value indicating if the video currently enabled. | ||
|
||
- `audioTrack`: The audio track for the local user. | ||
- `videoTrack`: The video track for the local user. | ||
|
||
## Methods | ||
|
||
### Toggling Media | ||
|
||
The same methods used by post joining meeting are also used to control media-pre meeting. | ||
The same methods used for controlling media during a meeting are also applicable for pre-call media configuration. | ||
|
||
**1. Mute/Unmute microphone** | ||
|
||
```ts | ||
```kotlin | ||
// Mute Audio | ||
await meeting.self.disableAudio(); | ||
meeting.localUser.disableAudio() | ||
|
||
// Unmute Audio | ||
await meeting.self.enableAudio(); | ||
meeting.localUser.enableAudio() | ||
``` | ||
|
||
```mermaid | ||
flowchart LR | ||
classDef basic fill:white; | ||
eam("enableAudio()") --> success("Emits <code>audioUpdate</code> event on <code>self</code>") | ||
eam -. possibly .-> indirect("Update <code>mediaPermissions.audio</code> with <code>mediaPermissionUpdate</code> event") | ||
eam("enableAudio()") --> success("Gives <code>onAudioUpdate</code> callback to <code>DyteSelfEventsListener</code>") | ||
class eam basic; | ||
``` | ||
|
||
<br /> | ||
|
||
Anytime there is an update in audio state you will get a `audioUpdate` event | ||
|
||
```ts | ||
|
||
meeting.self.on('audioUpdate', ({ audioEnabled, audioTrack })=> { | ||
// if enabled show a visual(izer) preview of the audio to the user | ||
}); | ||
Anytime there is an update in the audio state of the local user, the Core SDK notifies the client through the `onAudioUpdate` callback | ||
from `DyteSelfEventsListener`. Here's how you can register the listener: | ||
|
||
```kotlin | ||
meeting.addSelfEventsListener(object : DyteSelfEventsListener { | ||
override fun onAudioUpdate(audioEnabled: Boolean) { | ||
// Show a visual preview of the audio to the user if enabled | ||
} | ||
}) | ||
``` | ||
|
||
**2. Enable/Disable camera** | ||
|
||
```ts | ||
```kotlin | ||
// Disable Video | ||
await meeting.self.disableVideo(); | ||
meeting.localUser.disableVideo() | ||
|
||
// Enable Video | ||
await meeting.self.enableVideo(); | ||
meeting.localUser.enableVideo() | ||
``` | ||
|
||
```mermaid | ||
flowchart LR | ||
classDef basic fill:white; | ||
eam("enableVideo()") --> success("Emits <code>videoUpdate</code> event on <code>self</code>") | ||
eam -. possibly .-> indirect("Update <code>mediaPermissions.audio</code> with <code>mediaPermissionUpdate</code> event") | ||
eam("enableVideo()") --> success("Gives <code>onVideoUpdate</code> callback to <code>DyteSelfEventsListener</code>") | ||
class eam basic; | ||
``` | ||
<br /> | ||
|
||
```ts | ||
meeting.self.on('videoUpdate', ({ videoEnabled, videoTrack })=> { | ||
// if videoEnabled play video here to a <video> element | ||
}); | ||
Whenever there is an update in the video state of the local user, the Core SDK notifies the client through the `onVideoUpdate` callback | ||
from `DyteSelfEventsListener`. Here's how you can register the listener: | ||
|
||
```kotlin | ||
meeting.addSelfEventsListener(object : DyteSelfEventsListener { | ||
override fun onVideoUpdate(videoEnabled: Boolean) { | ||
// Show local user's VideoView if video is enabled | ||
} | ||
}) | ||
``` | ||
|
||
### Changing Media Device | ||
|
||
Media devices represents the hardware for the camera, microphone and speaker | ||
devices. To get the list of media devices that are currently being used, you can | ||
use the following methods: | ||
|
||
```ts | ||
// Fetch current media devices being used | ||
const currentDevices = meeting.self.getCurrentDevices(); | ||
``` | ||
|
||
```js | ||
// Get all media devices | ||
const devices = meeting.self.getAllDevices(); | ||
Media devices represent the hardware for the camera, microphone, and speaker devices. To get the list of media devices currently | ||
available, use the following methods: | ||
|
||
```kotlin | ||
// Get all audio devices | ||
const audioDevices = meeting.self.getAudioDevices(); | ||
const audioDevices = meeting.localUser.getAudioDevices() | ||
|
||
// Get all video devices | ||
const videoDevices = meeting.self.getVideoDevices(); | ||
const videoDevices = meeting.localUser.getVideoDevices() | ||
``` | ||
|
||
// Get all speakers | ||
const speakerDevices = meeting.self.getSpeakerDevices(); | ||
To get the currently selected media device, use the following methods: | ||
|
||
```kotlin | ||
// Get current audio device being used | ||
const currentAudioDevice = meeting.localUser.getSelectedAudioDevice() | ||
|
||
// Get current video device being used | ||
const currentVideoDevice = meeting.localUser.getSelectedVideoDevice() | ||
``` | ||
|
||
These methods should be called when you want the user to be shown these preferences. When the user selects a device, use the below method to select the device. | ||
Use these methods to create a UI that allows users to configure their media devices. When the user selects a device, use the below methods to set the device. | ||
|
||
**Set device** | ||
|
||
```js | ||
meeting.self.setDevice(device); | ||
// eg. device = videoDevices[0]; | ||
```kotlin | ||
// Set audio device | ||
meeting.localUser.setAudioDevice(device) | ||
// eg. device = audioDevices[0] | ||
|
||
// Set video device | ||
meeting.localUser.setVideoDevice(device) | ||
// eg. device = videoDevices[0] | ||
``` |
59 changes: 20 additions & 39 deletions
59
docs/android-core-new/pre-call/2-handling-permissions.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,31 @@ | ||
# Handling Browser Permissions | ||
# Handling Device Permissions | ||
|
||
## Properties | ||
Before allowing users to interact with their camera and microphone, it's important to check if the necessary permissions are | ||
granted on their Android device. Dyte's Android Core SDK provides easy-to-use APIs to check the status of these permissions. | ||
|
||
`self.mediaPermissions`: The current audio and video **browser permissions** given by the local | ||
user. | ||
### Checking Permissions | ||
|
||
Permissions start with `NOT_REQUESTED` and can go into 4 different states | ||
Use the following APIs to check if the camera and microphone permissions are granted: | ||
|
||
```kotlin | ||
// Check if CAMERA permission is granted | ||
val cameraPermissionGranted = meeting.localUser.isCameraPermissionGranted | ||
|
||
```mermaid | ||
stateDiagram-v2 | ||
NOT_REQUESTED --> ACCEPTED | ||
NOT_REQUESTED --> DENIED | ||
NOT_REQUESTED --> SYSTEM_DENIED | ||
NOT_REQUESTED --> COULD_NOT_START | ||
// Check if RECORD_AUDIO (microphone) permission is granted | ||
val micPermissionGranted = meeting.localUser.isMicrophonePermissionGranted | ||
``` | ||
|
||
<br /> | ||
Alternatively, you can also use Android's standard way to check if these permissions are granted: | ||
- `android.permission.CAMERA` | ||
- `android.permission.RECORD_AUDIO` | ||
|
||
Refer to the [Android official documentation](https://developer.android.com/training/permissions/requesting#already-granted) | ||
for more information on checking permissions. | ||
|
||
- `ACCEPTED` - The user accepted browser permission prompts | ||
- `DENIED` - The user denied browser permission prompts | ||
- `SYSTEM_DENIED` - The user's browser does not have the required permission, in this case usually the OS hasn't granted permission the browser application | ||
- `COULD_NOT_START` - Unable to start the selected device, you can retry with a different device | ||
You can use the permission status to enable or disable camera and microphone buttons in the pre-call UI, or provide visual | ||
feedback to indicate the availability of these media devices. | ||
|
||
<br /> | ||
### Automatic Permission Request | ||
|
||
:::warning | ||
|
||
One other thing to note down here is user might revoke permission later, or might unplug devices etc so these states can change at runtime | ||
|
||
::: | ||
|
||
<br /> | ||
|
||
|
||
Use the `mediaPermissionUpdate` event on `self` to listen for these changes | ||
|
||
```mermaid | ||
stateDiagram-v2 | ||
NOT_REQUESTED --> ACCEPTED | ||
NOT_REQUESTED --> DENIED | ||
NOT_REQUESTED --> SYSTEM_DENIED | ||
NOT_REQUESTED --> COULD_NOT_START | ||
ACCEPTED --> DENIED | ||
ACCEPTED --> COULD_NOT_START | ||
DENIED --> ACCEPTED | ||
COULD_NOT_START --> ACCEPTED | ||
``` | ||
When the Dyte SDK is initialised, it automatically checks for the required media permissions. If the permissions are not granted, | ||
the SDK requests them on behalf of the developers. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# Meeting Metadata | ||
|
||
### Change the name of the user | ||
|
||
You can allow the user to edit their name by using the `setDisplayName` method. | ||
|
||
```kotlin | ||
meeting.localUser.setDisplayName("New Name") | ||
``` | ||
|
||
**Note**: The name change will only be reflected to other participants if this method is called before joining the room. |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.