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﻿)
Install react-router-dom (>=6) and wrap your App with <BrowserRouter> or <MemoryRouter>. (see 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
TypeScript
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>
)
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﻿ section for more information.

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

Installation

Event System

Getting Started

﻿Using the Default EXP﻿

Using the Core library

Using the Default EXP