Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[android-core] Pre-call section #355

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 54 additions & 46 deletions docs/android-core-new/pre-call/1-media-preview.mdx
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 docs/android-core-new/pre-call/2-handling-permissions.mdx
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.
11 changes: 11 additions & 0 deletions docs/android-core-new/pre-call/3-meeting-meta.mdx
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.
117 changes: 0 additions & 117 deletions docs/android-core-new/pre-call/3-virtual-bg.mdx

This file was deleted.

17 changes: 0 additions & 17 deletions docs/android-core-new/pre-call/4-meeting-meta.mdx

This file was deleted.

Loading
Loading