neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update JavaScript basic tutorial to display local video first in the grid layout

Browse Source
This commit is contained in:
juancarmore 2024-05-07 17:30:19 +02:00
parent ee80b29d87
commit 186d6d5806
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
basic/frontend/javascript/README.md
View File

@ -1,8 +1,8 @@
# Basic Frontend JavaScript
# Basic JavaScript
Basic client application built with plain HTML, CSS and JavaScript. It internally uses [livekit-client-sdk-js](https://docs.livekit.io/client-sdk-js/).
For further information, check the [tutorial documentation](https://livekit-tutorials.openvidu.io/basic/frontend/javascript).
For further information, check the [tutorial documentation](https://livekit-tutorials.openvidu.io/basic/client/javascript).
## Prerequisites
@ -14,7 +14,7 @@ For further information, check the [tutorial documentation](https://livekit-tuto
```bash
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git
cd openvidu-livekit-tutorials/basic/frontend/javascript
cd openvidu-livekit-tutorials/client/javascript
```
2. Run the application

23
basic/frontend/javascript/web/app.js
View File

@ -70,18 +70,18 @@ async function joinRoom() {
}
}
function addTrack(track, participantIdentity, local = false) {
function addTrack(track, participantIdentity, isLocal = false) {
const element = track.attach();
element.id = track.sid;
/* If the track is a video track, we create a container and append the video element to it
with the participant's identity */
if (track.kind === "video") {
const videoContainer = createVideoContainer(participantIdentity);
videoContainer.appendChild(element);
appendParticipantData(videoContainer, participantIdentity + (local ? " (You)" : ""));
const videoContainer = createVideoContainer(participantIdentity, isLocal);
videoContainer.append(element);
appendParticipantData(videoContainer, participantIdentity + (isLocal ? " (You)" : ""));
} else {
document.getElementById("layout-container").appendChild(element);
document.getElementById("layout-container").append(element);
}
}
@ -108,11 +108,18 @@ function generateFormValues() {
document.getElementById("participant-name").value = "Participant" + Math.floor(Math.random() * 100);
}
function createVideoContainer(participantIdentity) {
function createVideoContainer(participantIdentity, isLocal = false) {
const videoContainer = document.createElement("div");
videoContainer.id = `camera-${participantIdentity}`;
videoContainer.className = "video-container";
document.getElementById("layout-container").appendChild(videoContainer);
const layoutContainer = document.getElementById("layout-container");
if (isLocal) {
layoutContainer.prepend(videoContainer);
} else {
layoutContainer.append(videoContainer);
}
return videoContainer;
}
@ -120,7 +127,7 @@ function appendParticipantData(videoContainer, participantIdentity) {
const dataElement = document.createElement("div");
dataElement.className = "participant-data";
dataElement.innerHTML = `<p>${participantIdentity}</p>`;
videoContainer.appendChild(dataElement);
videoContainer.prepend(dataElement);
}
function removeVideoContainer(participantIdentity) {