How to set up Janus video room codes (React)

[오지훈]

I am developing Janus WebRTC with React. I'm currently developing with react-janus-component , and I want to open multiple rooms with different room numbers. When opening a room, the room code is blank, so a random value is created to open the room. It opens with a room code that I did not intend with the message.

import React, { useState } from 'react';

import {  JanusComponent, 

          JanusVideoRoom, 

          JanusPublisher, 

          JanusSubscriber, JanusPlayer, JanusChat } from 'react-janus-components';

function Videoroom() {

  const [room, setRoom] = useState(null);

  const [pubId, setPubId] = useState(null);

  const [pubPvtId, setPubPvtId] = useState(null);

  const [chatroom, setChatroom] = useState(null);

  return (

    <div className="App">

      <h1>{room}</h1>

      <JanusComponent 

        server="[My Janus-Gateway Server]"

      >

        <JanusVideoRoom

          roomId="testroom"

        >

          <JanusPublisher

            opaqueId="test12234"

            secret="1234"

            username="test_dude"

            setRoom={setRoom}

            setPubId={setPubId}

            setPubPvtId={setPubPvtId}

          >

            <JanusPlayer 

                readyText="Something"

              />

          </JanusPublisher>

          <JanusSubscriber

            opaqueId="test12234"

            room={room}

            pubId={pubId}

            pubPvtId={pubPvtId}

          >

              <JanusPlayer 

                readyText="Something"

              />

          </JanusSubscriber>

        </JanusVideoRoom>

        <JanusChat

          opaqueId="test12234"

          isPublisher={true}

          chatroom={chatroom}

          setChatroom={setChatroom}

          username="mainboi"

          display="Main guy 123"

        />

        { chatroom ? (

        <JanusChat

          opaqueId="test12234"

          isPublisher={false}

          chatroom={chatroom}

          setChatroom={setChatroom}

          username="subboi"

          display="Sub guy 456"

        />) : (<div></div>)

        }

      </JanusComponent>

    </div>

  );

}

export default Videoroom;