vroom-react/README.md

Vroom React UI

# vroom-react-ui #

![screen short](docs/images/202303170002.jpg)

## Installation
```
npm install vroom-react@leatest
```

```javascript
import { VroomUI } from "vroom-react"

/**
 * SDK configuration
 */
const token = (Math.random() + 1).toString(36).substring(7)
const name = (Math.random() + 1).toString(36).substring(7)
const config = {
  token: token,
  endpoint: 'https://newvroom-portal-ts.truevirtualworld.com/5874321674',
  displayName: name,
  layoutUI: 4
}

function App() {
  const [ callStart, setCallStart ] = useState(false)
  const [ audioMuted, setAudioMuted ] = useState(false)
  const [ videoMuted, setVideoMuted ] = useState(false)
  const [ layoutUpdate, setLayoutUpdate ] = useState(config.layoutUI)
  const [ frontCamEnable, setFrontCamEnable ] = useState(true)
  const [ currentCamera, setCurrentCamera ] = useState(null)
  const [ cameraDeviceList, setCameraDeviceList ] = useState([])
  const [ isMobile, setIsMobile ] = useState(false)
  const [ changeCameraToDeviceId, setChangeCameraToDeviceId ] = useState('')

  return (
    <>
      <VroomUI
        config={config}
        onValueCallStart={callStart}
        camera={cameraDeviceList}
        setEmitCurrentCamera={setCurrentCamera}
        setEmitCameraDeviceList={setCameraDeviceList}
        setEmitIsMobile={setIsMobile}
        onValueMuteAudio={audioMuted}
        onValueMuteVideo={videoMuted}
        layoutUI={layoutUpdate}
        onValueFrontCamera={frontCamEnable}
        onValueCameraChangeDeviceId={changeCameraToDeviceId}
      />

      <div className="controller-group">
        <div className="layout-group">
          <button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(1)}}>1</button>
          <button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(2)}}>2</button>
          <button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(3)}}>3</button>
          <button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(4)}}>4</button>
          {
            cameraDeviceList?.length > 0 && isMobile === false
              ? cameraDeviceList?.map((c) => {
                if (c?.deviceId) {
                  return (
                    <button key={c.deviceId} onClick={() => setChangeCameraToDeviceId(c.deviceId)} style={{width: '25%', height: '36px'}}>
                      <span style={{
                        color: currentCamera?.deviceId === c.deviceId ? 'red' : 'black'
                      }}>
                        {c.kind} {c.label}
                      </span>
                    </button>
                  )
                }

                return <></>
              })
              : <></>
          }
        </div>
        <div className="controller">
          <StartButton callStart={callStart} setCallStart={setCallStart} />
          <AudioMuteButton audioMuted={audioMuted} setAudioMuted={setAudioMuted} />
          <VideoMuteButton videoMuted={videoMuted} setVideoMuted={setVideoMuted} />
          {
            isMobile && <SwitchCameraButton frontCamOn={frontCamEnable} setFrontCamOn={setFrontCamEnable} />
          }
        </div>
      </div>
    </>
  );
}

export default App;
```