How do I show a placeholder image when as user's camera is off?

Video SDK
1

How do I show a placeholder image when as user’s camera is off?
Extra question: how would I show the user’s name in the bottom corner of there video player.
I am working in a next js project following the structure in Video SDK next js quickstart github repo.

3

You’ll have to do something like this:

Store the state of inactive (or all) users:

const Videocall = (props: { slug: string; JWT: string }) => {
   const session = props.slug;
   const jwt = props.JWT;
   const [inCall, setInCall] = useState(false);
+  const [inativeUsers, setInactiveUsers] = useState<number[]>([]);

sync the state with event listeners (I’m using video state change for ease of understanding, but you’ll have to keep a track of user’s joining/leaving also):

const renderVideo = async (event: {
    action: "Start" | "Stop";
    userId: number;
  }) => {
     const mediaStream = client.current.getMediaStream();
     if (event.action === "Stop") {
+      setInactiveUsers((prev) => [...prev, event.userId]);
       const element = await mediaStream.detachVideo(event.userId);
       Array.isArray(element)
         ? element.forEach((el) => el.remove())
         : element.remove();
     } else {
+      setInactiveUsers((prev) => prev.filter((id) => id !== event.userId));
       const userVideo = await mediaStream.attachVideo(
         event.userId,
         VideoQuality.Video_360P,
...

Use the state to render placeholders (I’m just rendering the id):

       <div className="flex w-full flex-1" style={inCall ? {} : { display: "none" }}>
         {/* @ts-expect-error html component */}
         <video-player-container ref={videoContainerRef} style={videoPlayerStyle} />
+        {inativeUsers.map(userId => <p key={userId}>{userId}</p>)}
       </div>
       {!inCall ? (
         <div className="mx-auto flex w-64 flex-col self-center">