Web SDK (incl. UX)
Getting Started
3min
the easiest and quickest way to get started is to integrate one of the existing event experiences event specific experiences are importing the core and connecting any ui to the playback business logic and each available event experience has it's own npm package that can be installed and integrated in your web app using the default exp the default exp is a simple experience containing the main playback features, as well as the camera selection it does not contain any event specific data integrations install the @nativewaves/exp default and @nativewaves/exp core packages using the js package manager of your choice ( npm install save @nativewaves/exp core @nativewaves/exp default ) install @tanstack/react query (^4 36) and wrap your app with \<queryclientprovider> (see https //tanstack com/query/latest/docs/framework/react/overview https //tanstack com/query/latest/docs/framework/react/overview ) install react router dom (>=6) and wrap your app with \<browserrouter> or \<memoryrouter> (see https //reactrouter com/ https //reactrouter com/ ) use the \<experiencebasestandalone> component in your application make sure it is wraped with the \<playbackcontainer> component to provide it with the needed contexts full example import { experiencebasestandalone } from '@nativewaves/exp default' import { playbackcontainer, themeprovider } from '@nativewaves/exp core' import { queryclientprovider, queryclient } from '@tanstack/react query' import { hashrouter as router } from 'react router dom' const queryclient = new queryclient() export const experience = () => ( \<router> \<queryclientprovider client={queryclient}> \<themeprovider> \<playbackcontainer manifestid={manifestid} envtype={envtype} \> \<experiencebasestandalone routepath={'/'} /> \</playbackcontainer> \</themeprovider> \</queryclientprovider> \</router> ) properties name description example manifestid the exp manifest id provided by the console kt9gxxav4k9znx8q envtype the enviroment the manifest can be found prod routepath the subpath the exp is using (react router) /exp/default the same steps can be applied when integrating any of the other existing experiences using the core library when you want to create your own experiences you can also do that by importing our core package and developing your own ui please check out the custom experiences using core docid\ ughuigq1thywrwaeaiqkx section for more information