How can i distinguish between users on web and users on a phone. I want to change the aspect ratio or fit of the video element based on this factor.

Thanks for reaching out, Marcus. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.

im currently using the react sdk

Hey! Could you share a bit about how you’re currently rendering the video elements in your React app? Like, are you using any components from the LiveKit React SDK, or are you handling the video rendering on your own? Knowing this will help me give you advice that really fits your setup.

I just wanna know how i can do the platform check in react since I could not find isMobileBrowser()

Hey there! If you want to check the platform in React, here are a couple of friendly ways to do it: 1. Using LiveKit's Utility: The LiveKit SDK has this handy function called

isMobileBrowser()

that helps you figure out if someone’s on a mobile browser:

import { isMobileBrowser } from "@livekit/components-core";

const isMobile = isMobileBrowser();

Feel free to use this right inside your React components to easily check the platform. 2. Using a Custom Hook: If you like a more React-centric way, you can create your own custom hook to detect mobile devices like this:

import { getSelectorsByUserAgent } from "react-device-detect";

export const useMobile = () => {
  if (typeof navigator === "undefined") return false;
  const { isMobile } = getSelectorsByUserAgent(navigator.userAgent);
  return isMobile;
};

Then, just use this hook in your component like so:

import { useMobile } from "@/util/useMobile";

function MyComponent() {
  const isMobile = useMobile();

  return (
    <div>
      {isMobile ? (
        <p>Mobile user</p>
      ) : (
        <p>Web user</p>
      )}
    </div>
  );
}

If you’d like me to walk you through any part of this or help with the implementation, just let me know—I’m here to help!

I dont need to know my own platform. I need to know the other participants platform, if they are using the web or the app. How can I do that?

Hey there! If you want to find out whether other participants in a LiveKit room are using a web or mobile app, you can check out the

ClientInfo

structure tied to each participant. It gives you handy details about their platform and SDK. Here’s how you can do it: 1. Grab the participant's

ClientInfo

object. 2. Look at the

sdk

field to see which LiveKit SDK they’re on: • `JS`: That means a web client •

iOS

or `Android`: That’s a mobile client 1. If you want, peek at the

os

and

browser

fields for even more info: • `os`: Shows the operating system (like iOS or Android). • `browser`: Tells you the browser type for web clients (think Chrome, Safari). Here’s a quick example:

// Example in JavaScript/TypeScript
const clientInfo = participant.clientInfo;
if (clientInfo.sdk === 'JS') {
  console.log('Participant is using a web client');
} else if (clientInfo.sdk === 'iOS' || clientInfo.sdk === 'Android') {
  console.log('Participant is using a mobile client');
}

If you want a hand setting this up or have any questions, just let me know—I’m here to help! Sources: Sources/LiveKit/Protos/livekit_models.pb.swift | livekit-protocol/livekit/protocol/models.pyi | livekit-protocol/src/livekit.rs | Web and mobile frontends | LiveKit Docs

participant.clientInfo does not exists: "Property 'clientInfo' does not exist on type 'Participant'.ts(2339)"

I don't have the answer you're looking for. You could also try asking your question: • in one of the other Slack channels or • to https://deepwiki.com/livekit/livekit_composite which is trained on all LiveKit source code If you find the answer, please post it here to help others!