Configuring with React

Configuring the stream once you have one.

Configuring the stream

Once you're connected, you are likely to want to customise the scene, that can mean changing the configuration of your subject, or the environment it is in. Here follows some examples of how we would do this with the React library.

To configure the subject, the environment it is in, or the camera it is using, you will need to add some additional imports, like so:

import { useEnvironment, usePRCodes, useCamera } from "@zerolight-core/libzl-react"

We're also re-using the <ConnectionWidget/> here previously defined in the basic demo.

Live Editor

// our options - usually these would be derived/enumerated
const paints = [
	{label: "Grey",   		id: "5YA1"},
	{label: "Red",     		id: "P8A1"},
	{label: "Green",   		id: "0ZA1"}
]
    
const environments = [
	{label: "Brickwall",	id: "2-5D_Gen_Brickwall"},
	{label: "Studio", 		id: "3D_Gen_VW_White_Studio"}
]

let cameras = [
	{label: "Exterior",		id: "GlobalStageCamera"},
	{label: "Interior", 	id: "Interior"},
	{label: "Wheel",		id: "View07_Ext_Detail_shot_Wheel_Light"}
]

// put some space between the different widget types, and hide link visibility to stream state
WidgetGroup = ({children}) => {
    const streamState = useZLBoltStreamState();

    if (streamState === StreamConnectionState.Ready){
      return <span style={{paddingLeft: "8px"}}>{children}</span>
    }
    return null;
}

// lets you change the paint on the fly
const ConfigurationStringWidget = () => {
    const prcodes = usePRCodes();
    const zlbolt = useZLBolt();
	    
    return <WidgetGroup>
                  {paints.map((paint) => 
                    <button 
                        key={paint.id} 
                        onClick={() => {
								// just finding the 4 char code and replacing it, your string 
								// generation is likely to be more sophisticated!
								let codes = zlbolt.getPrCodes().split(",").filter(x => x.length < 4);
								codes.push(paint.id);
								zlbolt.setPrCodes(codes.join(","));
						}}
                    >
                        {paint.label}
                    </button>)}
           </WidgetGroup>

}

// a dynamic button to loop through a list of environments
const EnvironmentWidget = () => {
    const zlbolt = useZLBolt();
    const currentEnvironment = useEnvironment();

	let currentIndex = environments.findIndex(x => x.id === currentEnvironment);
	let newIndex = (currentIndex+1)%environments.length;
	
	return <WidgetGroup>
				<button onClick={() => zlbolt.switchEnvironment(environments[newIndex].id)}>
					Go to {environments[newIndex].label}
				</button>
			</WidgetGroup>
}

// offers some camera choices, with the active camera button disabled
const CameraWidget = () => {
    const zlbolt = useZLBolt();
    const currentCamera = useCamera();
    
    return <WidgetGroup>
      		  {cameras.map((camera) => 
			  	<button 
					disabled={camera.id == currentCamera} 
					key={camera.id} 
					onClick={() => zlbolt.switchCamera(camera.id)}
				>
					{camera.label}
				</button>)}
   		   </WidgetGroup>
}

const StreamDemo = () => {
	// libZL doesn't support SSR
	if (useIsBrowser()){

		const zlbolt = new LibZL().zlbolt("palettedocs");
		
		return (<ZLBolt zlbolt={zlbolt} options={defaultDemoOptions}>	
					<ConnectionWidget/>	
					<ConfigurationStringWidget/>
					<EnvironmentWidget/>
					<CameraWidget/>
					<ZLBoltStreamContainer/>
				</ZLBolt>);
	}

	return (<div>Unsupported</div>);
}

render(<StreamDemo/>)

Result

Loading...

note

Provisioning for this demo is light so there may be some delays getting a stream.