Record a room using the SDK

💡

The recorder service only works on apps hosted on some domain and not on localhost as your web app needs to be connected to the internet to use the recording service.

💡

Suggested hosting platforms are Vercel (opens in a new tab), Netlify (opens in a new tab) or ngrok (opens in a new tab) .

Walkthrough

Developing an Audio/Video application using Huddle01 SDK

To record a session within your app using Huddle01 SDK, you need first need to setup an audio/video application.

Walkthroughs for setting up an audio/video application using Huddle01 SDK can be found here:
React App
Vanilla

💡

React Native SDK powered apps are not supported for recording at the moment.

Creating a route for recorder to join the room

Once you have setup an audio/video application, you need to create a route for the recorder to join the room like so:

- [roomId].tsx
- contact.mdx
_app.tsx
index.tsx

This is what your pages folder should look like after creating the route for recorder to join the room.

Rendering Audio/Video for Recorder to Consume

Once you've created the route for recorder to join the room, you need to render the audio/video for recorder to consume.

The [roomId].tsx file should look like this:

import { usePeers } from "@huddle01/react/hooks";
 
const Recorder = () => {
 
  const { peers } = usePeers();
 
  return (
    <div>
      <div className="grid grid-cols-4">
          {Object.values(peers)
            .filter((peer) => peer.cam)
            .map((peer) => (
              <Video
                key={peer.peerId}
                peerId={peer.peerId}
                track={peer.cam}
                // debug
              />
            ))}
          {Object.values(peers)
            .filter((peer) => peer.mic)
            .map((peer) => (
              <Audio key={peer.peerId} peerId={peer.peerId} track={peer.mic} />
            ))}
        </div>
    </div>
  );
}
 
export default Recorder;

Line 1: Imported the usePeers() hook to get access to peers in the room.
Line 5: Destructured the peers object containing all the information related to the peers in the room.
Line 9-25: Rendered the audio/video elemnts for all peers in the room.

Enable the Recorder Service

To enable the recorder service you'll need the roomId to which you want to connect to.
We'll be getting that from the query params in the following way in NextJS:

import { useRouter } from "next/router";
 
const Recorder = () => {
  ...
 
  const router = useRouter();
 
   const [roomId, setRoomId] = useState(router.query.roomId?.toString() || "");
 
  useEffect(() => {
    setRoomId(router.query.roomId?.toString() || "");
  }, [router.query.roomId?.toString()]);
 
 
  return <> ... </>
}

Here we're storing the roomId in a state variable to pass it down to our recording service.

import { usePeers } from "@huddle01/react/hooks";
import { useRecorder } from "@huddle01/react/app-utils";
 
const Recorder = () => {
 
  const { peers } = usePeers();
 
  const router = useRouter();
  const [roomId, setRoomId] = useState(router.query.roomId?.toString());
  useEffect(() => {
    setRoomId(router.query.roomId?.toString());
  }, [router.query.roomId?.toString()]);
 
  useRecorder(roomId, process.env.NEXT_PUBLIC_PROJECT_ID);
 
  return (
    <div>
      <div className="grid grid-cols-4">
          {Object.values(peers)
            .filter((peer) => peer.cam)
            .map((peer) => (
              <Video
                key={peer.peerId}
                peerId={peer.peerId}
                track={peer.cam}
                // debug
              />
            ))}
          {Object.values(peers)
            .filter((peer) => peer.mic)
            .map((peer) => (
              <Audio key={peer.peerId} peerId={peer.peerId} track={peer.mic} />
            ))}
        </div>
    </div>
  );
}
 
export default Recorder;

Line 2: Imported the useRecorder() hook to enable the recorder service.
Line 9-14: Run logic to store roomId from query params (opens in a new tab) and pass it to the recorder service with the Project ID (Get it from here)

Start and Stop Recording

Lastly, to start the recording service you can run the startRecording() method in the following way inside your app:

import { useRecording } from "@huddle01/react/hooks";
 
const App = () => {
 
  ...
 
  const {
    startRecording,
    stopRecording,
    error,
    data,
  } = useRecording();
 
  useEffect(() => {
    console.log({data});
  }, [data])
 
  return (
    <>
 
      ...
 
      <button
        disabled={!startRecording.isCallable}
        onClick={() => startRecording(`${window.location.href}rec/${roomId}`)}
      >
        {`START_RECORDING error: ${error}`}
      </button>
    </>
  )
}

Simlarly, to stop the recording service you can run the stopRecording() method in the following way inside your app:

<button
  disabled={!stopRecording.isCallable}
  onClick={() => stopRecording()}
>
 STOP_RECORDING
</button>

To get access to the recording data once you've stopped the recording service, you can use the data variable returned by the useRecording() hook as shown above.

That’s a wrap! 🎉

Token Gated Rooms Audio spaces