How to preview camera and microphone before joining any channel?

[DasOhmoff]

What kind of problem do you need help?

Hello, thanks for this great package!

I would like to be able to preview my camera and microphone before I join a channel, how can I make this happen? The hooks and components do not seem to display anything before I join a channel. For example the following does not work without joining a channel:

export function App() {
  const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

  function VideoPreview() {
    const { localCameraTrack } = useLocalCameraTrack();

    // Only works when useJoin is present
    // useJoin({ appid: "***", channel: "***", token: "***" });

    return (
      <LocalVideoTrack
        style={{ aspectRatio: "16/9" }}
        play
        track={localCameraTrack}
      ></LocalVideoTrack>
    );
  }

  return (
    <AgoraRTCProvider client={client}>
      <VideoPreview />
    </AgoraRTCProvider>
  );
}

Thank you for helping me out :)

[guoxianzhe]

@DasOhmoff You can make a custom hook to doing this work. Currently useLocalCameraTrack is controlled by useIsConnected If you don't join the channel, you can not get any result from useLocalCameraTrack

[DasOhmoff]

I attempted to create a custom hook by copying the source code of useLocalCameraTrack and adjusting it to work without requiring a connection. Unfortunately, I was unsuccessful in getting it to work properly. The hook relies on imports from the project that are not exported outside the package, such as tools.ts, which in turn have other imports I don't have access to. This makes it very inconvenient to use. Even after copying all necessary imports into my own project, the hook still doesn't work. It seems that simply ignoring whether one is connected or not within useLocalCameraTrack doesn't solve the problem.

As a result, I'm unsure how to create a custom hook for this, and it seems that I'll need to develop my own implementation. How can I create a hook that works, and where can I find information on this?

Regardless, I believe that this feature should be included in the package, as its absence is detrimental to the project. I really like this project, and how it's organized, it's architecture, and ease of use, and I want to see it thrive. However, previewing the camera is essential, whether it's before joining a channel, adjusting its configuration within the settings menu, or simply selecting the correct camera. Every video calling app I know of, including Discord, Slack, MSTeams, and Zoom, offers such features. I can't think of any app where it isn't necessary in some capacity. Therefore, I believe that practically every user of this package will need this feature sooner or later, and its absence would create friction for basically 100% of users.

I really think such a feature should be added to this package. Thank's for reading :)

[timsun28]

I agree with @DasOhmoff here where this would be a great addition to the package overall in order to build an initial welcome page where the user can switch mic/camera and prepare before joining the call.

Doing this separately, with custom code, could also introduce unwanted bugs where the camera is still active in your previous component for the setup and would have trouble loading for the Agora package.

[DasOhmoff]

@guoxianzhe What do you think in regards to this? I would not even know how to implement this feature myself, I tried and was not able to make it work. How would I implement this myself (In case the package won't support that feature soon)? Don't you think that it would make a lot of sense for this to be a feature of the package?

[timsun28]

@DasOhmoff In case you want to build a simple interface before the user connects to the call and this doesn't get implemented by Agora in this package, you can use an alternative package for react called: react-webcam. It's a very simplistic package to setup a webcam component for the user on a separate page.

You can look at this example to see how you can get a list of cameras/mics to show to the user where they can select which one they want to use. Save the selected camera/mic id somewhere and pass it along to the Agora component like this:

const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn, {
    microphoneId: selectedMicrophone?.deviceId,
});
const { localCameraTrack } = useLocalCameraTrack(cameraOn, {
    cameraId: selectedCamera?.deviceId,
});

This way Agora will also know which device to use for the videocall as the initial option. You then need to build a different part that allows you to switch cameras/mics during the call.

Hope this helps you build what you need for now while this feature possibly gets added in the future.