diff --git a/.github/workflows/update-api-specs-check.yml b/.github/workflows/update-api-specs-check.yml new file mode 100644 index 0000000000..524b27bf05 --- /dev/null +++ b/.github/workflows/update-api-specs-check.yml @@ -0,0 +1,37 @@ +name: Update API Specs Check + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + update-api-specs-check: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Get changed files + id: changed-files + uses: tj-actions/changed-files@v23 + with: + since_last_remote_commit: true + files_separator: "," + files: static/api/v1.yaml,static/api/v2.yaml + + - name: Fail workflow if api specs has updated - comment err msg on PR + if: steps.changed-files.outputs.only_changed == 'true' && github.event_name == 'pull_request' + env: + PR_NUMBER: ${{ github.event.pull_request.number }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: gh pr comment $PR_NUMBER --body 'Avoid updating the api-specs directly. They will be overwritten.' && exit 1 + + - name: Fail workflow if api specs has updated - echo err msg + if: steps.changed-files.outputs.only_changed == 'true' && github.event_name != 'pull_request' + run: echo 'Avoid updating the api-specs directly. They will be overwritten.' && exit 1 diff --git a/docs/web-core/04-room-metadata.mdx b/docs/web-core/04-room-metadata.mdx index 19823f3e0f..26e94c7391 100644 --- a/docs/web-core/04-room-metadata.mdx +++ b/docs/web-core/04-room-metadata.mdx @@ -9,7 +9,6 @@ tags: [web-core, room-metadata] All metadata pertaining to a meeting is stored in `meeting.meta`. This includes: - `roomName`: The name of the room the current participant is connected to. -- `joined`: Indicates whether the participant has successfully joined the room successfully or not. - `roomType`: Indicates the meeting is a group-call or a webinar. - `meetingTitle`: The title of the meeting. - `meetingStartedTimestamp`: The timestamp when the meeting started. diff --git a/docs/web-core/05-Participants/01-participants.mdx b/docs/web-core/05-Participants/01-participants.mdx index 47ef0d40dd..c323aa72cc 100644 --- a/docs/web-core/05-Participants/01-participants.mdx +++ b/docs/web-core/05-Participants/01-participants.mdx @@ -1,5 +1,4 @@ --- -sidebar_position: 1 title: Participants description: Events, methods and data pertaining to meeting participants. slug: participants @@ -8,7 +7,7 @@ tags: [web-core, participants, participant] # Participants -All meeting participants data is stored under `meeting.participants`. Use the methods and events to consume the participants data. +The data regarding all meeting participants is stored under `meeting.participants`. This **does not** include the local user. Use the methods and events to consume the participants data. For example, to get all the participants who joined the meeting: ```ts @@ -16,59 +15,68 @@ For example, to get all the participants who joined the meeting: const joinedParticipants = meeting.participants.joined; ``` -## Properties +The `meeting.participants` object has the following properties. -- `joined`: Contains all the participants who have joined the meeting. -- `waitlisted`: Contains all the participants waiting to join the meeting. -- `active`: Contains all the active participants producing media (audio/ video/screen). -- `pinned`: Contains all the pinned participants of the meeting. +- `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. +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. -## Methods +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). -### Set view mode +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: -Change the participant view between paginated and active grid mode. This will trigger `viewModeChanged` event as a side affect. +```ts +meeting.participants.pinned.on('participantJoined', (participant) => { + console.log(`Participant ${participant.name} got pinned`); +}); +``` + +## Set participant view mode + +The view mode indicates whether the participants are populated in `ACTIVE_GRID` mode or `PAGINATED` mode. In `ACTIVE_GRID` mode, the partcipants are automatically replaced in `meeting.participants.active`, based on who is speaking or who has their video turned on. + +In `PAGINATED` mode, the participants in `meeting.participants.active` will be fixed. Only when you call the `meeting.participants.setPage(pageNumber)` method, it will replace the `active` participants with a different set of participants. + +You can change the participant view between `ACTIVE_GRID` and `PAGINATED` mode using the following method. This will trigger `viewModeChanged` event as a side affect. ```ts // set the view mode to paginated await meeting.participants.setViewMode('PAGINATED'); + // set the view mode to active grid await meeting.participants.setViewMode('ACTIVE_GRID'); ``` -### Set page number +## Set page number in paginated mode -Switching beween pages +The `setPage()` method allows you to switch between pages of participants present in the meeting. ```ts // switch to second page await meeting.participants.setPage(2); ``` -### Disable audio or video for participants +## Host control methods + +The `meeting.participants` object has host control methods that allow you to disable the audio and video streams of other users in the meeting (given that the user preset has the right permissions). ```ts // mute all participants await meeting.participants.disableAllAudio(); + // disable video for all participants await meeting.participants.disableAllVideo(); -// disable audio for a specific participant -await meeting.participants.disableAudio(peerId); -// disable video for a specific participant -await meeting.participants.disableVideo(peerId); ``` -### Kick participants - -To remove participats from a meeting, you can user kick methods +To remove all participants from a meeting, you can call the `kickAll()` method. ```ts // remove all participants from the meeting await meeting.participants.kickAll(); -// remove a specified participant from the meeting -await meeting.participants.kick(peerId); ``` diff --git a/docs/web-core/05-Participants/02-participant-object.mdx b/docs/web-core/05-Participants/02-participant-object.mdx new file mode 100644 index 0000000000..d67cba85d2 --- /dev/null +++ b/docs/web-core/05-Participants/02-participant-object.mdx @@ -0,0 +1,84 @@ +--- +title: The participant object +description: The object corresponding to a particular participant. +slug: participants/participant +tags: [web-core, participants, participant] +--- + +# The participant object + +The `participant` object consists of all the information related to a particular participant. For instance, it contains a partcipants video/audio/screenshare stream, and the participant's name. It also contains state variables that indicate whether a participant's camera is on or off, and whether they are muted or unmuted. Head over to [DyteParticipant](../../Reference/DyteParticipant) for a detailed reference. + +The participant object has the following properties. + +- `id`: The `participantId` of the participant (aka `peerId`). +- `userId`: The `userId` of the participant. +- `name`: The participant's name. +- `picture`: The participant's picture (if any). +- `clientSpecificId`: An arbitrary ID that can be set to identify the participant. +- `device`: Information about the device used by the participant. +- `videoTrack`: The video track of the participant. +- `audioTrack`: The audio track of the participant. +- `screenShareTracks`: The video and audio (if any) track of the participant's screen share stream. +- `videoEnabled`: Set to true if the participant's camera is on. +- `audioEnabled`: Set to true if the participant is unmuted. +- `screenShareEnabled`: Set to true if the participant is sharing their screen. +- `supportsRemoteControl`: Set to true if the participant is using an SDK that supports remote control. +- `isPinned`: Set to true if the participant is pinned. + +The participant object is an event emitter, so you can set listeners on this object for events such as video and audio updates. For instance, to fire a callback when a participant toggles their mic, you can subscribe to the following events. + +```ts +meeting.participants.joined.get(participantId).on('audioUpdate', ({ audioEnabled, audioTrack }) => { + // This will only be fired on mic toggles for the participant with ID `participantId` + console.log('The participant with id', + participantId, + 'has toggled their mic to', + audioEnabled, + ); +}); +``` + +The events emitted by all participant objects are also re-emitted by all the maps in `meeting.participants`. Therefore, you can add a listener to `meeting.participants.joined` for the `audioUpdate` event. For instance, the same code above can be re-implemented as follows. + +```ts +meeting.participants.joined.on('audioUpdate', (participant, { audioEnabled, audioTrack }) => { + // This will be fired on mic toggles for all participants in the meeting + console.log('The participant with id', + participantId, + 'has toggled their mic to', + audioEnabled, + ); +}); +``` + +Read more about the participant events in the [events](../../Reference/DyteParticipant) section in the API reference. + +## Host controls methods + +If you (the local user) have the relevant permissions in the meeting, you can disable a participant's video/audio streams, or even remove them from the meeting. + +```ts +const participant = meeting.participants.joined.get(participantId); + +// To disable a participant's video stream +participant.disableVideo(); + +// To disable a participant's audio stream +participant.disableAudio(); + +// To kick a participant from the meeting +participant.kick(); +``` + +You can also `pin` or `unpin` a participant in the meeting. All "pinned" participants are added to the `meeting.participants.pinned` map. + +```ts +const participant = meeting.participants.joined.get(participantId); + +// Pin a participant to the meeting. +await participant.pin(); + +// Unpin a participant in the meeting. +await participant.unpin(); +``` diff --git a/docs/web-core/05-Participants/02-events.mdx b/docs/web-core/05-Participants/03-events.mdx similarity index 99% rename from docs/web-core/05-Participants/02-events.mdx rename to docs/web-core/05-Participants/03-events.mdx index eb6f95fbc8..3ec1bc56d9 100644 --- a/docs/web-core/05-Participants/02-events.mdx +++ b/docs/web-core/05-Participants/03-events.mdx @@ -1,5 +1,4 @@ --- -sidebar_position: 2 title: Participant Events description: Event handling for participants. slug: participants/events diff --git a/docs/web-core/09-recording.mdx b/docs/web-core/09-recording.mdx new file mode 100644 index 0000000000..b9eb925dad --- /dev/null +++ b/docs/web-core/09-recording.mdx @@ -0,0 +1,36 @@ +--- +title: Recording +description: Control recordings in a meeting. +slug: recording +tags: [web-core, recording] +--- + +# Recording + +The `meeting.recording` object can be used start and stop recordings in a meeting. You can also get the current status of a recording using this API. + +The `meeting.recording` object has the following properties: + +- `recordingState`: Indicates the current recording state of the meeting. + +## Start a recording + +To start a recording, you can call the `start` method in the `meeting.recording` object. The valid states are `IDLE`, `STARTING`, `RECORDING`, and `STOPPING`. + +```ts +await meeting.recording.start(); +``` + +## Stop a recording + +Call `meeting.recording.stop()` to stop the active recording. + +```ts +await meeting.recording.stop(); +``` + +## Get active recording state + +The `meeting.recording.recordingState` property describes the current state of the recording. The valid states are `IDLE`, `STARTING`, `RECORDING`, and `STOPPING`. + +To update the state of recording at any time, call the `meeting.recording.refreshActiveRecordingState()` method. diff --git a/web-core_versioned_docs/version-0.27.x/01-installation.mdx b/web-core_versioned_docs/version-0.27.x/01-installation.mdx new file mode 100644 index 0000000000..8a0d0b7aae --- /dev/null +++ b/web-core_versioned_docs/version-0.27.x/01-installation.mdx @@ -0,0 +1,47 @@ +--- +title: Installation +description: Install web-core. +slug: installation +tags: [web-core, installation, setup] +--- + +# Installation + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + + + + +Install the SDK using npm. + +```shell +npm install @dytesdk/web-core +``` + + + +Install the SDK using yarn. + +```shell +yarn add @dytesdk/web-core +``` + + + +Add the following script tag in the head of your HTML file. + +```html +