Skip to content

Anonymous Access Tutorial#

Source code

This tutorial shows how individuals can access an OpenVidu Meet room through anonymous access links. An anonymous access link is a predefined, shareable URL that lets anyone access a room without identifying themselves, with a role fixed by the link: moderator or speaker. These links can be shared freely with any participant.

It uses the same application as the WebComponent tutorial (built with Node.js and Express for the backend and plain HTML/CSS/JavaScript for the frontend), but here we focus on how the anonymous access links are obtained and used to let participants into a room.

The application uses the OpenVidu Meet API to create and delete rooms (which is where the anonymous access links come from), and the OpenVidu Meet WebComponent to embed the video call.

Anonymous access vs. explicit members

Anonymous access links are the simplest way to let people into a room: they are shared, role-based and require no identification. When you need per-individual access, fixed names or custom permissions, you add explicit room members instead, as shown in the Identified Guests and Users tutorials. See the Room Access 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 installed on your device.

  1. Navigate into the application directory
cd openvidu-meet-tutorials/embedding-options/meet-webcomponent-basic
  1. Install dependencies
npm install
  1. 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 uses the same application as the WebComponent tutorial, so the room creation/deletion and the WebComponent embedding are explained there. Here we focus on the anonymous access links: where they come from and how the application uses them to access a room.

Anonymous access links are generated by OpenVidu Meet when a room is created. The room object returned by the API (POST /rooms, see the Direct Link tutorial backend section) includes an access object with the anonymous links for each role:

  • room.access.anonymous.moderator.url: the link that grants access as a moderator.
  • room.access.anonymous.speaker.url: the link that grants access as a speaker.

These URLs already carry a secret that identifies the role, so anyone who opens them accesses the room with that role and no further identification.

Info

Anonymous access can be enabled or disabled per role when creating or updating a room. See the Room Access feature for details.

The room list template exposes the two anonymous access links as Moderator and Speaker buttons:

app.js
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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}');"
                >
                    <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}');"
                >
                    <span class="material-symbols-outlined">record_voice_over</span>
                    Speaker
                </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>
    `;
}

Each button passes the corresponding anonymous access link (room.access.anonymous.moderator.url or room.access.anonymous.speaker.url) to the accessRoom() function. Because the role is encoded in the link, choosing a button is all it takes to define how that individual will access the room.

The accessRoom() function receives the chosen anonymous access link and embeds the OpenVidu Meet WebComponent pointing to it:

app.js
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// Embed the OpenVidu Meet component for the given room URL.
function accessRoom(roomUrl) {
    // Hide the home screen and show the room screen
    const homeScreen = document.querySelector('#home');
    homeScreen.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}"
            leave-redirect-url="/"
        >
        </openvidu-meet>
    `; // (1)!
}
  1. The room-url attribute is set to the anonymous access link. Since the link already carries the role secret, the participant enters the meeting directly with that role and no login.

Because anonymous links are shared and not tied to a specific person, this is the quickest way to let participants into a room. When you need to give each participant their own link or identify them individually, continue with the Identified Guests tutorial.

Accessing this tutorial from other computers or phones#

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

  1. 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.

  2. Configure OpenVidu Meet for network access: Start OpenVidu Meet by following the instructions in the Accessing OpenVidu Meet from other computers or phones section.

  3. 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

  4. 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>

  5. Restart the tutorial to apply the changes:

    npm start

  6. 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:

  1. 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

  2. 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

  3. 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>

  4. 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.