Skip to content

Commit

Permalink
feat: added mobile core docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@rohitkhirid @palashgo
rohitkhirid authored and palashgo committed Jul 25, 2022
1 parent f3a65ee commit 6ade164
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 191 deletions.
35 changes: 3 additions & 32 deletions docs/android-core/installation.mdx
View file
Expand Up @@ -11,37 +11,8 @@ tags: [web-core, installation, setup]
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
groupId="node-pm"
defaultValue="npm"
values={[
{ label: "npm", value: "npm" },
{ label: "yarn", value: "yarn" },
{ label: "CDN", value: "CDN" },
]}
>
<TabItem value="npm">
Install the SDK using npm.
Install the SDK using maven dependency.

```shell
npm install @dytesdk/web-core
```

</TabItem>
<TabItem value="yarn">
Install the SDK using yarn.

```shell
yarn add @dytesdk/web-core
```

</TabItem>
<TabItem value="CDN">
Add the following script tag in the head of your HTML file.

```html
<script src="https://cdn.dyte.in/core/dyte.js" />
```
</TabItem>
</Tabs>
implementation 'io.dyte.core:shared:1.0.0-staging.3'
```
78 changes: 17 additions & 61 deletions docs/android-core/local-user/events.mdx
View file
Expand Up @@ -8,23 +8,21 @@ tags: [web-core, local-user, self, self events]

# Local User - Events

You can subscribe to various events on the local user by calling `meeting.self.on(EVENT_NAME)`.
You can subscribe to various events on the local user by implementing `DyteSelfEventsListener` and passing the object to `meeting.addSelfEventsListener(dyteSelfEventsListener)`.

### Video update

Triggered when the user starts / stops the video using `enableVideo` or `disableVideo`

```js
const videoElem = document.getElementById('my-video');

meeting.self.on('videoUpdate', async ({ videoEnabled, videoTrack }) => {
if (videoEnabled) {
const stream = new MediaStream();
stream.addTrack(videoTrack);
videoElem.srcObject = stream;
videoElem.play();
} else {
videoElem.stop();
meeting.self.addSelfEventsListener(object : DyteSelfEventsListener {
override fun onVideoUpdate(videoEnabled: Boolean) {
super.onVideoUpdate(videoEnabled)
if (videoEnabled) {
// video is enabled, and other participants in room can see local user
} else {
// video is disabled, and other participants in room can not see local user.
}
}
});
```
Expand All @@ -34,56 +32,14 @@ meeting.self.on('videoUpdate', async ({ videoEnabled, videoTrack }) => {
Triggered when the user starts / stops the audio using `enableAudio` or `disableAudio`

```js
const audioElem = document.getElementById('my-audio');

meeting.self.on('audioUpdate', async ({ audioEnabled, audioTrack }) => {
if (audioEnabled) {
const stream = new MediaStream();
stream.addTrack(audioTrack);
audioElem.srcObject = stream;
audioElem.play();
} else {
audioElem.stop();
}
});
```

### Screenshare update

Triggered when the user starts / stops the screen share using `enableScreenShare()` or `disableScreenShare()`.

```js
const screenElem = document.getElementById('my-screen-share');

meeting.self.on('screenShareUpdate', async ({ screenShareEnabled, screenShareTracks }) => {
if (screenShareEnabled) {
const stream = new MediaStream();
stream.addTrack(screenShareTracks.video);
screenElem.srcObject(stream);
await screenElem.play();
} else {
await screenElem.stop();
meeting.self.addSelfEventsListener(object : DyteSelfEventsListener {
override fun onAudioUpdate(audioEnabled: Boolean) {
super.onAudioUpdate(videoEnabled)
if (audioEnabled) {
// audio is enabled, and other participants in room can hear local user
} else {
// audio is disabled, and other participants in room can not hear local user.
}
}
});
```

### Device change

Subscribe to the `deviceChange` event to handle the changing video, audio and speaker devices

```js
meeting.self.on('deviceChange', ({ device, preview }) => {
// handle microphone change
if (device.kind === 'audioinput') {
console.log('mic change', device);
}
// handle camera change
if (device.kind === 'videoinput') {
console.log('camera change', device);
}
// handle speaker change
if (device.kind === 'audiooutput') {
console.log('speaker change', device);
}
});
```
83 changes: 25 additions & 58 deletions docs/android-core/local-user/introduction.mdx
View file
Expand Up @@ -7,7 +7,7 @@ tags: [web-core, local-user, self]

# Introduction - Local User

The local user has the methods and properties on the local user media controls. Accessible via `self` key within the `meeting` object, the local user also contains the access control (permissions) and theming-related properties that will help to render the meeting state.
The local user has the methods and properties on the local user media controls. Accessible via `self` key within the `meeting` object.

## Properties

Expand All @@ -16,58 +16,54 @@ Here is a list of properties that local user provides:
- `id`: The ID of the participant pertaining to local user.
- `name`: Contains Name of the local user.
- `clientSpecificId`: Identifier provided by the developer while adding the participant.
- `roomJoined`: A boolean value indicating if the local user has joined the meeting.
- `preview`: The local audio and video stream for the preview purpose (it will be populated after calling `enablePreview`).
- `permissions`: The permissions related to various capabilities within a meeting context for the local user
- `mediaPermissions`: The current audio and video permissions given by the local user.
- `audioTrack`: The audio track for the local user.
- `videoTrack`: The video track for the local user.
- `screenShareTracks`: The screen share video and audio tracks for the local user.
- `audioEnabled`: A boolean value indicating if the audio currently enabled.
- `videoEnabled`: A boolean value indicating if the video currently enabled.
- `screenShareEnabled`: A boolean value indicating if the screen share is currently enabled.
- `suggestedTheme`: The suggested theme for building the user interface.

## Change default audio / video settings

By default as soon as you join the meeting the SDK will produce your video and audio streams.
To change this behaviour use the `default` parameter

```ts {5}
const meeting = await DyteClient.init({
roomName,
authToken,
defaults: {
audio: false, // Disable user's audio by default
video: true, // Enable user's video by default
},
});
```ts {7,8}
val meetingInfo = DyteMeetingInfo(
orgId = ORGNIZATION_ID,
baseUrl = BASE_URL,
roomName = MEETING_ROOM_NAME,
authToken = AUTH_TOKEN,
displayName = DISPLAY_NAME,
enableAudio = false, // Disable user's audio by default
enableVideo = true // Enable user's video by default
)
```

## Setup tracks
## Turn audio/video tracks after joining the room

If audio and video tracks are disabled during the `DyteClient` initialization process. You can setup the audio and video tracks by simply calling setup tracks method like below:
If audio and video tracks are disabled during the `DyteMobileClient` initialization process. You can setup the audio and video tracks by simply calling `enableAudio()` and `enableVideo()` like below:

```ts
meeting.self.setupTracks({ audio: true, video: true });
meeting.self.enableAudio();
meeting.self.enableVideo();
```

## Change the name of the local user

Change the user's name by calling `setName` method. The changed name will reflect across all participants ONLY if the change happens before joining the meeting.
Change the user's name by calling `setDisplayName` method. The changed name will reflect across all participants ONLY if the change happens before joining the meeting.

```ts
await meeting.self.setName('New Name');
await meeting.self.setDisplayName('New Name');
```

## Mute/Unmute microphone

```ts
// Mute Audio
await meeting.self.disableAudio();
meeting.self.disableAudio();

// Unmute Audio
await meeting.self.enableAudio();
meeting.self.enableAudio();

// Get current status
meeting.self.audioEnabled;
Expand All @@ -77,47 +73,18 @@ meeting.self.audioEnabled;

```ts
// Disable Video
await meeting.self.disableVideo();
meeting.self.disableVideo();

// Enable Video
await meeting.self.enableVideo();
meeting.self.enableVideo();

// Get current status
meeting.self.videoEnabled;
```

## Enable / Disable Screen share
## Switch camera between primary and secondary

```ts
// Enable Screenshare
await meeting.self.enableScreenShare();

// Disable Screenshare
await meeting.self.disableScreenShare();

// Get current status
meeting.self.screenShareEnabled;
```

## Preview media

Preview methods can be used to test the video / audio stream before sharing them with the meeting.

### Enable / Disable Audio and Video Preview

Enable a preview for audio and video. This will populate the `preview` property for the local user.
You can check if the streams are enabled in the preview using `meeting.self.preview.audioEnabled` and `meeting.self.preview.videoEnabled`.

```ts
// Enable preview
await meeting.self.enablePreview();

// Disable preview
await meeting.self.disablePreview();

// Enable only audio preview
await meeting.self.enablePreview({ video: false });

// Enable only video preview
await meeting.self.enablePreview({ audio: false });
```
// switch camera
meeting.self.switchCamera();
```
16 changes: 2 additions & 14 deletions docs/android-core/local-user/manage-media-devices.mdx
View file
Expand Up @@ -7,27 +7,15 @@ tags: [web-core, local-user, self, self events]

# Manage Media Devices

Media devices represents the hardwar for the camera, microphone and speaker devices.
Media devices represents the hardwar 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:

```js
// Get all media devices
const devices = meeting.self.getAllDevices();

```kotlin
// Get all audio devices
const audioDevices = meeting.self.getAudioDevices();

// Get all video devices
const videoDevices = meeting.self.getVideoDevices();

// Get all speakers
const speakerDevices = meeting.self.getSpeakerDevices();

// Get device by ID
const device = meeting.self.getDeviceById('12345', 'audio');

// Fetch current media devices being used
const currentDevices = meeting.self.getCurrentDevices();
```

## Set device
Expand Down
51 changes: 38 additions & 13 deletions docs/android-core/participants/participants.mdx
View file
Expand Up @@ -17,23 +17,48 @@ const joinedParticipants = meeting.participants.joined;

The `meeting.participants` object has the following properties.

- `joined`: A map that contains all the participants who have joined the meeting except the local user
- `waitlisted`: A map that contains all the participants waiting to join the meeting.
- `active`: A map that contains all the participants except the local user who are supposed to be on the screen at the moment
- `pinned`: A map that contains all the pinned participants of the meeting.
- `count`: The number of participants who are joined in the meeting.
- `pageCount`: Number of pages available in paginated mode.
- `maxActiveParticipantsCount`: The maximum number of participants that can be present in the active state.
- `joined`: A list that contains all the participants who have joined the meeting.
- `waitlisted`: A list that contains all the participants waiting to join the meeting.
- `active`: A list that contains all the participants except the local user who are supposed to be on the screen at the moment
- `pinned`: A list that contains all the pinned participants of the meeting.

Therefore, if you were to make a grid of participants, you'd use the `active` map, but to display all participants in the meeting you'd use the `joined` map.
Therefore, if you were to make a grid of participants, you'd use the `active` list, but to display all participants in the meeting you'd use the `joined` map.

Each participant in each of the `joined`, `waitlisted`, `active`, and `pinned` maps is of type [`DyteParticipant`](../../Reference/DyteParticipant). Read more about each individual `participant` object [here](../participant-object).
Each participant in each of the `joined`, `waitlisted`, `active`, and `pinned` list is of type [`DyteMeetingParticipant`](../../Reference/DyteParticipant). Read more about each individual `participant` object [here](../participant-object).

Each of these maps are of type [`DyteParticipantMap`](../../Reference/DyteParticipantMap), and therefore emit a `participantJoined` event when a participant is added to the map, and a `participantLeft` event when a participant leaves the map. For instance, to listen for when a participant gets pinned in the meeting, you can use the following snippet:
You can subscribe to various events on the participants by implementing `DyteParticipantEventsListener` and passing the object to `meeting.addParticipantEventsListener(DyteParticipantEventsListener)`.

```ts
meeting.participants.pinned.on('participantJoined', (participant) => {
console.log(`Participant ${participant.name} got pinned`);
### Video update

Triggered when the user starts / stops the video using `enableVideo` or `disableVideo`

```js
meeting.self.addParticipantEventsListener(object : DyteParticipantEventsListener {
override fun videoUpdate(videoEnabled: Boolean, participant: DyteMeetingParticipant) {
super.videoUpdate(videoEnabled, participant)
if (videoEnabled) {
// video is enabled, and other participants in room can see local user
} else {
// video is disabled, and other participants in room can not see local user.
}
}
});
```

### Audio update

Triggered when the user starts / stops the audio using `enableAudio` or `disableAudio`

```js
meeting.self.addSelfEventsListener(object : DyteSelfEventsListener {
override fun audioUpdate(audioEnabled: Boolean, participant: DyteMeetingParticipant) {
super.audioUpdate(audioEnabled, participant)
if (audioEnabled) {
// audio is enabled, and other participants in room can hear local user
} else {
// audio is disabled, and other participants in room can not hear local user.
}
}
});
```

Expand Down

0 comments on commit 6ade164

Please sign in to comment.