Skip to main content
START NOW (FREE)

Viewer API

Viewer Url Signing

This feature allows for the signing and verification of viewer urls.

  1. First, an app must be created in the admin panel for the group. This will provide api_key and api_secret values.

  2. To sign a viewer url, make the following request which will return a token.
GET https://briovr.com/api/v1/viewer/sign-url?key=&secret=&expiry=&url=

key: api_key

secret: api_secret

expiry: seconds since epoch

url: the viewer url

Viewer Configurator API

This feature allows for interaction with the viewer and its features using JavaScript.

  1. The API sends and receives events using messages.
  2. To use the API, first enable the embedded API in the configurator.
  3. Next, embed the BRIO scene's viewer link in an HTML document.
  4. Use the following script to get and set configurator values:

 


<html>
    <body>
        <div id="button-container">
            <h3>Materials</h3>
        </div>
        <iframe
            id="brio-embed"
            src="https://view.briovr.com/6f3cd8ae-5495-4006-adbd-1fd6d4334e37" width="600"
            height="400" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking"
            sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
            mozallowfullscreen="true" webkitallowfullscreen="true" onload="loaded()" />
    </body>

    <script>
        function loaded() {
            const buttonsContainer = document.getElementById("button-container")
            const embed = getEmbed()
            // initialize the viewer API and get configurator items
            window.addEventListener('message', (ev) => {
                console.log('ev', ev)
                const data = JSON.parse(ev.data)
                if (ev.data && data.command === "MESSAGE") {
                    if (data.uri === 'brio/v1/engines/embed') {
                        getConfiguratorData()
                    } else if (data.uri === 'brio/v1/engines/configurator') {
                        handleMaterialConfiguratorItems(data.payload)
                    }
                }
            })
            function getEmbed() {
                const iframe = document.getElementById('brio-embed');
                return iframe.contentWindow;
            }
           
            function getConfiguratorData() {
                embed.postMessage(JSON.stringify({
                    command: "GET",
                    uri: 'brio/v1/engines/configurator',
                }), '*')
            }
            
            // parse the recieved configurator items
            function handleMaterialConfiguratorItems(configuratorData) {
                if (!configuratorData.configurators) {
                    return
                }

                const materialItems = configuratorData.configurators.materialItems[0] || configuratorData.configurators.materialItems
                console.log("materialItems", materialItems)
                materialItems.items.forEach(materialConfiguration => {
                    const material = materialConfiguration
                    const button = document.createElement('button')
                    button.innerText = material.name
                    button.onclick = (e) => {
                        setConfiguratorItem({
                            type: 'materials',
                            key: materialItems.key,
                            uuid: material.uuid,
                            color: '#0000ff'
                        })
                    }
                    buttonsContainer.appendChild(button)
                });
            }
            // sets the selected configurator item
            function setConfiguratorItem(payload) {
                console.log('setting', payload)
                embed.postMessage(JSON.stringify({
                    command: "SET",
                    uri: 'brio/v1/engines/configurator',
                    payload
                }), '*')
            }
        }
    </script>
</html>

Related articles