Next.js Discord

Discord Forum

NextJs14 and Whereby lib

Unanswered
F1 posted this in #help-forum
Open in Discord
F1OP
i have a problem when i use whereby lib with NextJs
this source of whereby
https://docs.whereby.com/reference/react-hooks-reference/useroomconnection

when i call useRoomConnection to connect to the room and set parameter audio and video to true it always turn microphone and camera on.

i have this main page
// mainpage.tsx
'use client'

import React, { useState } from "react";
import VideoPreview from "./preview";
import RoomConnection from "./roomConnection";

export default function VideoCallRoom() {
    const [isReady, setIsReady] = useState(false)
    const [myName, setMyName] = useState('Easy Sunday');
    const [microphoneStatus, setMicrophoneStatus] = useState(true);
    const [cameraStatus, setCameraStatus] = useState(true);

    if (isReady) {
        return (
            <RoomConnection myName={myName} microphoneStatus={microphoneStatus} cameraStatus={cameraStatus} />
        )
    } else {
        return (
            <VideoPreview setIsReady={setIsReady} setMyName={setMyName} setMicrophoneStatus={setMicrophoneStatus} setCameraStatus={setCameraStatus} />
        )
    }
}


and RoomConnection page that receive cameraStatus and microphoneStatus from preview page.
But when i call useRoomConnection it always turn microphone and camera on.

// RoomConection.tsx
// whereby
    const roomConnection = useRoomConnection(ROOM_URL, {
        localMediaOptions: {
            audio: true,
            video: true,
        }, 
    });
    console.log("sdkasfsgbfiwbgfiubfoihrnoinaerignv")
    const { components, state, actions } = roomConnection; 
    const { VideoView } = components;
    const { localParticipant, remoteParticipants } = state;
    const { toggleCamera, toggleMicrophone } = actions;
    
    useEffect(()=> {
      if (!cameraStatus) {
          toggleCamera();
      }
    }, [])

so i try useEffect to check if cameraStatus = false then i toggle camera to off. but it do useRoomConnection many time how to make it do once after render?

14 Replies

@F1 i have a problem when i use whereby lib with NextJs this source of whereby https://docs.whereby.com/reference/react-hooks-reference/useroomconnection when i call useRoomConnection to connect to the room and set parameter audio and video to true it always turn microphone and camera on. i have this main page // mainpage.tsx 'use client' import React, { useState } from "react"; import VideoPreview from "./preview"; import RoomConnection from "./roomConnection"; export default function VideoCallRoom() { const [isReady, setIsReady] = useState(false) const [myName, setMyName] = useState('Easy Sunday'); const [microphoneStatus, setMicrophoneStatus] = useState(true); const [cameraStatus, setCameraStatus] = useState(true); if (isReady) { return ( <RoomConnection myName={myName} microphoneStatus={microphoneStatus} cameraStatus={cameraStatus} /> ) } else { return ( <VideoPreview setIsReady={setIsReady} setMyName={setMyName} setMicrophoneStatus={setMicrophoneStatus} setCameraStatus={setCameraStatus} /> ) } } and RoomConnection page that receive cameraStatus and microphoneStatus from preview page. But when i call useRoomConnection it always turn microphone and camera on. // RoomConection.tsx // whereby const roomConnection = useRoomConnection(ROOM_URL, { localMediaOptions: { audio: true, video: true, }, }); console.log("sdkasfsgbfiwbgfiubfoihrnoinaerignv") const { components, state, actions } = roomConnection; const { VideoView } = components; const { localParticipant, remoteParticipants } = state; const { toggleCamera, toggleMicrophone } = actions; useEffect(()=> { if (!cameraStatus) { toggleCamera(); } }, []) so i try useEffect to check if cameraStatus = false then i toggle camera to off. but it do useRoomConnection many time how to make it do once after render?
try
  useEffect(()=> {
    if (!cameraStatus) {
        toggleCamera();
    }
  }, [cameraStatus])
F1OP
same result bro when i toggleCamera(); i think it set state and rerender because when i toggleCamera(); it log "sdkasfsgbfiwbgfiubfoihrnoinaerignv"
F1OP
yes it turn off camera but i want when initiate or render RoomConnection page the init value of camera and microphone should same as sent from props cameraStatus and MicrophonStatus but now it always initiate with camera and microphone open
F1OP
it not work bro from whereby lib it just set for permission to access audio and video
i have try to set audio to false and it cannot do toggle microphone function
so i want a solution that make my code do this once after render
const roomConnection = useRoomConnection(ROOM_URL, {
    localMediaOptions: {
        audio: microphoneStatus,
        video: cameraStatus,
    }, 
});

because now when any state set it do that code too. TT
F1OP
Yes bro
@F1 Yes bro
maybe you could do this?
 {cameraStatus && localParticipant?.stream && (
    <VideoView stream={localParticipant?.stream} muted={!cameraStatus} />
  )}
F1OP
Muted is a parameter that tells us whether we can hear ourselves or not, isn't it?
@F1 Muted is a parameter that tells us whether we can hear ourselves or not, isn't it?
well I don't know, I have never used whereby actually lol
look like it is