0.0.25-beta • Published 9 months ago
vroom-react-ui-beta v0.0.25-beta
vroom-react-ui
Installation
npm install vroom-react@leatest
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;
0.0.22-beta
1 year ago
0.0.24-beta
11 months ago
0.0.21-beta
1 year ago
0.0.25-beta
9 months ago
0.0.23-beta
1 year ago
0.0.20-beta
1 year ago
0.0.19-beta
1 year ago
0.0.18-beta
1 year ago
0.0.17-beta
1 year ago
0.0.16-beta
1 year ago
0.0.15-beta
1 year ago
0.0.14-beta
1 year ago
0.0.13-beta
1 year ago
0.0.12-beta
1 year ago
0.0.11-beta
1 year ago
0.0.10-beta
1 year ago
0.0.9-beta
1 year ago
0.0.8-beta
1 year ago
0.0.7-beta
1 year ago
0.0.6-beta
1 year ago
0.0.5-beta
1 year ago
0.0.4-beta
1 year ago
0.0.3-beta
1 year ago
0.0.2-beta
1 year ago
0.0.1-beta-001
1 year ago