Identified Guests Tutorial#

This tutorial extends the Anonymous Access tutorial to show how to add identified guests to an OpenVidu Meet room.

An identified guest is a room member with a fixed name and a unique access link that grants access to the room without any login. Each link is meant to be delivered privately to a single person and can be revoked individually.

Building on the Anonymous Access tutorial, it keeps the shared anonymous access links (access as moderator or speaker) and adds the following features:

Add an identified guest to a room by name, with a base role (moderator or speaker).
Each identified guest gets a unique access link that can be copied and shared.
List and remove the members of a room, revoking their access.
Access the room through a guest's unique link, with no login required.

The application uses the OpenVidu Meet API to manage rooms and room members, and the OpenVidu Meet WebComponent to embed the meeting.

Anonymous guests vs. explicit members

OpenVidu Meet rooms can be accessed either through shared anonymous links (the moderator/speaker links from the Anonymous Access tutorial) or by adding explicit room members with personalized access and permissions. Identified guests are one of the two kinds of explicit room members (the other being users). See the Room Members feature for the full picture.

Running this tutorial#

1. Run OpenVidu Meet#

You need Docker Desktop. You can install it on Windows , Mac or Linux .

Run this command in Docker Desktop's terminal:

docker compose -p openvidu-meet -f oci://openvidu/local-meet:3.8.0 up -y openvidu-meet-init

Info

For a detailed guide on how to run OpenVidu Meet locally, visit Try OpenVidu Meet locally .

2. Download the tutorial code#

git clone https://github.com/OpenVidu/openvidu-meet-tutorials.git -b 3.8.0

3. Run the application#

To run this application, you need Node.js (≥ 18) installed on your device.

Navigate into the application directory

cd openvidu-meet-tutorials/access/meet-identified-guests

Install dependencies

npm install

Run the application

npm start

Once the server is up and running, you can test the application by visiting http://localhost:6080. You should see a screen like this:

Understanding the code#

This tutorial builds upon the Anonymous Access tutorial, adding identified guest management. We'll focus on the new features and modifications related to identified guests; the room creation/listing/deletion, the anonymous access links and the WebComponent embedding are inherited from the Anonymous Access tutorial.

Backend modifications#

Besides the usual room endpoints (POST /rooms, GET /rooms, DELETE /rooms/:roomId), the server exposes endpoints to manage the room members:

POST /rooms/:roomId/members: Add an identified guest to a room.
GET /rooms/:roomId/members: List the identified guests of a room.
DELETE /rooms/:roomId/members/:memberId: Remove a member from a room.

Add an identified guest#

The POST /rooms/:roomId/members endpoint adds an identified guest to a room:

index.js
// Add an identified guest to a room
app.post('/rooms/:roomId/members', async (req, res) => {
    const { roomId } = req.params; // (1)!
    const { name, baseRole } = req.body; // (2)!

    if (!name || !baseRole) {
        res.status(400).json({ message: `'name' and 'baseRole' are required` });
        return;
    }

    try {
        // Add an identified guest to the room.
        // Providing 'name' (and no 'userId') creates a member of type 'identified_guest'
        const member = await httpRequest('POST', `rooms/${roomId}/members`, {
            name, // (3)!
            baseRole // (4)!
        });

        console.log('Identified guest added:', member);
        res.status(201).json({ message: `Identified guest '${name}' added to room '${roomId}'`, member });
    } catch (error) {
        handleApiError(res, error, `Error adding identified guest '${name}' to room '${roomId}'`);
    }
});

The roomId is obtained from the request parameters.
The name of the identified guest and the baseRole are obtained from the request body.
The name is the fixed display name the participant will have in the meeting. Providing name (and not userId) is what tells the API to create a member of type identified_guest.
The baseRole (moderator or speaker) defines the default set of permissions for the member.

This endpoint adds the identified guest by sending a POST request to the rooms/:roomId/members endpoint. The API responds with the created member, which includes a generated memberId (in the form guest-XXXX) and a unique accessUrl such as http://localhost:9080/meet/room/<roomId>?secret=guest-XXXX. That URL is unique to this member and grants access to the room with no login required.

Info

You can fine-tune the member's permissions beyond the base role by including a customPermissions object in the request. See the addRoomMember operation in the REST API reference for the full list of permissions.

List identified guests#

The GET /rooms/:roomId/members endpoint lists the identified guests of a room:

index.js
// List the identified guests of a room
app.get('/rooms/:roomId/members', async (req, res) => {
    const { roomId } = req.params;

    try {
        // List the identified guests of the room using the API (100 max)
        const { members } = await httpRequest('GET', `rooms/${roomId}/members?type=identified_guest&maxItems=100`); // (1)!
        res.status(200).json({ members });
    } catch (error) {
        handleApiError(res, error, `Error fetching members of room '${roomId}'`);
    }
});

List the room members by sending a GET request to the rooms/:roomId/members endpoint, filtering by type=identified_guest to retrieve only the identified guests.

Remove a member#

The DELETE /rooms/:roomId/members/:memberId endpoint removes a member, revoking their unique link:

index.js
// Remove a member from a room
app.delete('/rooms/:roomId/members/:memberId', async (req, res) => {
    const { roomId, memberId } = req.params;

    try {
        // Removing a member revokes their access immediately
        // (they are expelled if currently in a meeting)
        await httpRequest('DELETE', `rooms/${roomId}/members/${memberId}`); // (1)!
        res.status(200).json({ message: `Member '${memberId}' removed from room '${roomId}'` });
    } catch (error) {
        handleApiError(res, error, `Error removing member '${memberId}' from room '${roomId}'`);
    }
});

Remove the member by sending a DELETE request to the rooms/:roomId/members/:memberId endpoint. The member's unique link stops working immediately; if they are currently in the meeting, they are expelled from it.

Frontend modifications#

The home view keeps the shared anonymous access (access as moderator or speaker) and adds a Members button per room, which opens a dedicated members view to manage the room's identified guests.

The room list#

The getRoomListItemTemplate() function renders each room with the inherited anonymous access buttons plus a new Members button:

app.js
function getRoomListItemTemplate(room) {
    return `
        <li class="ov-list-item">
            <span class="ov-list-item__name">${room.roomName}</span>
            <div class="ov-list-item__actions">
                <button
                    type="button"
                    title="Access as moderator"
                    class="ov-btn ov-btn--primary ov-btn--sm"
                    onclick="accessRoom('${room.access.anonymous.moderator.url}', '#home');"
                >
                    <span class="material-symbols-outlined">shield_person</span>
                    Moderator
                </button>
                <button
                    type="button"
                    title="Access as speaker"
                    class="ov-btn ov-btn--secondary ov-btn--sm"
                    onclick="accessRoom('${room.access.anonymous.speaker.url}', '#home');"
                >
                    <span class="material-symbols-outlined">record_voice_over</span>
                    Speaker
                </button>
                <button
                    type="button"
                    class="ov-btn ov-btn--users ov-btn--sm"
                    onclick="manageMembers('${room.roomId}');"
                >
                    <span class="material-symbols-outlined">group</span>
                    Members
                </button>
                <button
                    type="button"
                    title="Delete room"
                    class="ov-icon-btn ov-icon-btn--danger"
                    onclick="deleteRoom('${room.roomId}');"
                >
                    <span class="material-symbols-outlined">delete</span>
                </button>
            </div>
        </li>
    `;
}

The Moderator and Speaker buttons use the room's shared anonymous links (room.access.anonymous.moderator.url and room.access.anonymous.speaker.url) and are inherited from the Anonymous Access tutorial. The new Members button calls manageMembers(), which opens the members view for that room.

Rendering the members list#

The getMemberListItemTemplate() function builds each member item, showing the name, the base role, the unique access link, and buttons to copy the link, access the room and remove the member:

app.js
function getMemberListItemTemplate(member) {
    // In this tutorial every member is an identified guest, so each one has a unique
    // access link and buttons to copy it, access the room through it and remove the member.
    return `
        <li class="ov-member">
            <div class="ov-member__info">
                <p class="ov-member__name">
                    ${member.name}
                    <span class="ov-badge ov-badge--${member.baseRole === 'moderator' ? 'moderator' : 'speaker'}">
                        <span class="material-symbols-outlined">${member.baseRole === 'moderator' ? 'shield_person' : 'record_voice_over'}</span>
                        ${member.baseRole}
                    </span>
                </p>
                <p class="ov-member__url" title="${member.accessUrl}">${member.accessUrl}</p>
            </div>
            <div class="ov-member__actions">
                <button
                    type="button"
                    title="Copy access link"
                    class="ov-icon-btn"
                    onclick="copyAccessUrl('${member.memberId}', this)"
                >
                    <span class="material-symbols-outlined">content_copy</span>
                </button>
                <button
                    type="button"
                    title="Access as ${member.name}"
                    class="ov-icon-btn"
                    onclick="accessRoom('${member.accessUrl}', '#members')"
                >
                    <span class="material-symbols-outlined">login</span>
                </button>
                <button
                    type="button"
                    title="Remove member"
                    class="ov-icon-btn ov-icon-btn--danger"
                    onclick="removeMember('${member.memberId}')"
                >
                    <span class="material-symbols-outlined">delete</span>
                </button>
            </div>
        </li>
    `;
}

Each item displays the member's fixed name, a badge with its baseRole, and its unique accessUrl. The three buttons call copyAccessUrl() to copy the link to the clipboard, accessRoom() to access the room in the app through that link, and removeMember() to revoke the member.

Adding an identified guest#

When the "Add guest" form is submitted, the addGuest() function creates the identified guest with the provided name and role:

app.js
async function addGuest(e) {
    // Prevent the default form submission
    e.preventDefault();

    // Clear previous error message
    const errorDiv = document.querySelector('#add-member-error');
    errorDiv.textContent = '';
    errorDiv.hidden = true;

    try {
        const name = document.querySelector('#guest-name').value; // (1)!
        const baseRole = document.querySelector('#guest-role').value;

        // Providing 'name' adds an identified guest (member of type 'identified_guest')
        const { member } = await httpRequest('POST', `/rooms/${currentRoom.roomId}/members`, {
            name,
            baseRole
        }); // (2)!

        // Add the new member to the start (the API returns members newest first)
        prependToMap(members, member.memberId, member); // (3)!
        renderMembers();

        // Reset the form
        e.target.reset();
    } catch (error) {
        console.error('Error adding guest:', error.message);

        // Show error message
        errorDiv.textContent = error.message || 'Error adding guest';
        errorDiv.hidden = false;
    }
}

Get the guest's name and the chosen baseRole from the form.
Make a POST request to the /rooms/:roomId/members endpoint to add the identified guest to the current room.
Add the returned member (including its generated memberId and unique accessUrl) to the start of the local members map with prependToMap() (so it appears first, matching the API order) and re-render the list.

Copying the access link#

The copyAccessUrl() function copies the member's unique link to the clipboard and briefly shows a confirmation:

app.js
async function copyAccessUrl(memberId, button) {
    const member = members.get(memberId);
    if (!member) {
        return;
    }

    try {
        await navigator.clipboard.writeText(member.accessUrl); // (1)!

        // Briefly show a confirmation icon
        const icon = button.querySelector('.material-symbols-outlined');
        icon.textContent = 'check'; // (2)!
        setTimeout(() => {
            icon.textContent = 'content_copy';
        }, 1500);
    } catch (error) {
        console.error('Error copying access link:', error.message);
    }
}

Copy the member's unique accessUrl to the clipboard using the Clipboard API.
Temporarily swap the copy icon for a check icon to confirm the link was copied. This unique link is what you would deliver privately to the intended participant.

Accessing the room#

The accessRoom() function embeds the OpenVidu Meet WebComponent for a given room URL. It is shared by the anonymous access buttons and the per-guest access button:

app.js
// Embed the OpenVidu Meet component for the given room URL.
// 'returnViewId' is the view to show again when the meeting is closed
// (the home screen for anonymous access, the members screen for an identified guest).
function accessRoom(roomUrl, returnViewId) {
    // Hide the home and members screens and show the room screen
    const homeScreen = document.querySelector('#home');
    homeScreen.hidden = true;
    const membersScreen = document.querySelector('#members');
    membersScreen.hidden = true;
    const roomScreen = document.querySelector('#room');
    roomScreen.hidden = false;

    // Inject the OpenVidu Meet component into the meet container specifying the room URL
    const meetContainer = document.querySelector('#meet-container');
    meetContainer.innerHTML = `
        <openvidu-meet
            room-url="${roomUrl}"
        >
        </openvidu-meet>
    `; // (1)!

    // Add event listener for when the OpenVidu Meet component is closed
    const meet = document.querySelector('openvidu-meet');
    meet.once('closed', () => {
        // (2)!
        console.log('OpenVidu Meet component closed');

        // Clear the OpenVidu Meet component and go back to the view we came from
        meetContainer.innerHTML = '';
        roomScreen.hidden = true;
        const returnView = document.querySelector(returnViewId);
        returnView.hidden = false;
    });
}

Inject the OpenVidu Meet WebComponent with the room-url attribute set to the given URL. For an identified guest this is their unique accessUrl, which already carries the member's secret, so the participant enters the meeting directly with the fixed name and no login.
Add a listener for the closed event so that, when the component is closed, the meeting is cleared and the previous view is shown again (returnViewId is #home for anonymous access or #members for an identified guest).

Embedding vs. sharing the link

This tutorial embeds the meeting in the app for convenience while testing, but the main purpose of an identified guest is its unique access link. In a real application you would typically deliver each member's accessUrl privately (by email, message, etc.) instead of opening it yourself, and the participant would access the room directly through that link.

Accessing this tutorial from other computers or phones#

To access this tutorial from other computers or phones, follow these steps:

Ensure network connectivity: Make sure your device (computer or phone) is connected to the same network as the machine running OpenVidu Meet and this tutorial.
Configure OpenVidu Meet for network access: Start OpenVidu Meet by following the instructions in the Accessing OpenVidu Meet from other computers or phones section.
Update the OpenVidu Meet server URL: Modify the OV_MEET_SERVER_URL environment variable in your .env file to match the URL shown when OpenVidu Meet starts.
```
# Example for IP address 192.168.1.100
OV_MEET_SERVER_URL=https://192-168-1-100.openvidu-local.dev:9443/meet
```
Update the OpenVidu Meet WebComponent script URL: In the public/index.html file, update the <script> tag that includes the OpenVidu Meet WebComponent to use the same base URL as above.
```
<script src="http://192-168-1-100.openvidu-local.dev:9443/meet/v1/openvidu-meet.js"></script>
```
Restart the tutorial to apply the changes:
```
npm start
```
Access the tutorial: Open your browser and navigate to https://192-168-1-100.openvidu-local.dev:6443 (replacing 192-168-1-100 with your actual private IP) on the computer where you started the tutorial or any device in the same network.

Connecting this tutorial to an OpenVidu Meet production deployment#

If you have a production deployment of OpenVidu Meet (installed in a server following deployment steps ), you can connect this tutorial to it by following these steps:

Update the server URL: Modify the OV_MEET_SERVER_URL environment variable in the .env file to point to your OpenVidu Meet production deployment URL.
```
# Example for a production deployment
OV_MEET_SERVER_URL=https://your-openvidu-meet-domain.com/meet
```
Update the API key: Ensure the OV_MEET_API_KEY environment variable in the .env file matches the API key configured in your production deployment. See Generate an API Key section to learn how to obtain it.
```
OV_MEET_API_KEY=your-production-api-key
```
Update the OpenVidu Meet WebComponent script URL: In the public/index.html file, update the <script> tag that includes the OpenVidu Meet WebComponent to use the same base URL as above.
```
<script src="https://your-openvidu-meet-domain.com/meet/v1/openvidu-meet.js"></script>
```
Restart the tutorial to apply the changes:
```
npm start
```

Make this tutorial accessible from other computers or phones

By default, this tutorial runs on http://localhost:6080 and is only accessible from the local machine. If you want to access it from other computers or phones, you have the following options:

Use tunneling tools: Configure tools like VS Code port forwarding , ngrok , localtunnel , or similar services to expose this tutorial to the internet with a secure (HTTPS) public URL.
Deploy to a server: Upload this tutorial to a web server and configure it to be accessible with a secure (HTTPS) public URL. This can be done by updating the source code to manage SSL certificates or configuring a reverse proxy (e.g., Nginx, Apache) to serve it.