@airsurfer09/web-embed

A web embed library for pixel streaming functionality, available in both UMD (core) and ESM (React) formats.

Installation

npm install @airsurfer09/web-embed
# or
yarn add @airsurfer09/web-embed

Usage

Core (UMD) Build

The core build is available in UMD format and can be used in any JavaScript environment.

Browser (Script Tag)

<!-- Using CDN -->
<script src="https://unpkg.com/@airsurfer09/[email protected]/dist/core/convai-embed.umd.js"></script>

<!-- Or using local file -->
<script src="./node_modules/@airsurfer09/web-embed/dist/core/convai-embed.umd.js"></script>

<script>
  // Create a container element
  const container = document.getElementById('pixel-stream-container');

  // Create a custom initial screen (optional)
  const customInitialScreen = document.createElement('div');
  customInitialScreen.innerHTML = `
    <div style="
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      font-family: Arial, sans-serif;
    ">
      <div style="text-align: center;">
        <h2>Welcome to the Experience</h2>
        <p>Click anywhere to start</p>
      </div>
    </div>
  `;

  // Create a new instance
  const pixelStream = new PixelStreamCore.PixelStreamClient({
    expId: 'your-experiment-id',
    container: container,
    InitialScreen: customInitialScreen, // Add the custom initial screen
    // Optional configurations
    serviceUrls: {
      sessionFetch: 'your-custom-session-url',
      pixelStreamBase: 'your-custom-base-url',
    },
  });

  // Use the methods
  pixelStream.enableCamera();
  pixelStream.disableCamera();
  pixelStream.enableCharacterAudio();
  pixelStream.disableCharacterAudio();
  pixelStream.initializeExperience();

  // Clean up when done
  pixelStream.destroy();
</script>

Node.js (CommonJS)

const PixelStreamCore = require('@airsurfer09/web-embed/core');

// Create a custom initial screen (optional)
const customInitialScreen = document.createElement('div');
customInitialScreen.innerHTML = `
  <div style="
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-family: Arial, sans-serif;
  ">
    <div style="text-align: center;">
      <h2>Welcome to the Experience</h2>
      <p>Click anywhere to start</p>
    </div>
  </div>
`;

const pixelStream = new PixelStreamCore.PixelStreamClient({
  expId: 'your-experiment-id',
  container: document.getElementById('pixel-stream-container'),
  InitialScreen: customInitialScreen, // Add the custom initial screen
});

ES Modules

import PixelStreamCore from '@airsurfer09/web-embed/core';

// Create a custom initial screen (optional)
const customInitialScreen = document.createElement('div');
customInitialScreen.innerHTML = `
  <div style="
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-family: Arial, sans-serif;
  ">
    <div style="text-align: center;">
      <h2>Welcome to the Experience</h2>
      <p>Click anywhere to start</p>
    </div>
  </div>
`;

const pixelStream = new PixelStreamCore.PixelStreamClient({
  expId: 'your-experiment-id',
  container: document.getElementById('pixel-stream-container'),
  InitialScreen: customInitialScreen, // Add the custom initial screen
});

React (ESM) Build

The React build is available in ESM format and is optimized for React applications.

import { PixelStream } from '@airsurfer09/web-embed';

// Create a custom initial screen component
const CustomInitialScreen = () => (
  <div
    style={{
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'rgba(0, 0, 0, 0.8)',
      color: 'white',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <div style={{ textAlign: 'center' }}>
      <h2>Welcome to the Experience</h2>
      <p>Click anywhere to start</p>
    </div>
  </div>
);

function App() {
  return (
    <div id="pixel-stream-container" style={{ width: '100%', height: '100vh' }}>
      <PixelStream
        expId="your-experiment-id"
        InitialScreen={<CustomInitialScreen />} // Add the custom initial screen
        // Optional configurations
        serviceUrls={{
          sessionFetch: 'your-custom-session-url',
          pixelStreamBase: 'your-custom-base-url',
        }}
      />
    </div>
  );
}

API Reference

Core Build (PixelStreamClient)

Constructor Options

interface PixelStreamOptions {
  expId: string; // Required: The experiment ID
  container: HTMLElement; // Required: The container element
  serviceUrls?: {
    // Optional: Custom service URLs
    sessionFetch?: string;
    pixelStreamBase?: string;
  };
  InitialScreen?: HTMLElement; // Optional: Custom initial screen element
}

Methods

• enableCamera(): Promise - Enables the camera in the pixel stream
• disableCamera(): Promise - Disables the camera in the pixel stream
• enableCharacterAudio(): Promise - Enables character audio
• disableCharacterAudio(): Promise - Disables character audio
• initializeExperience(): void - Initializes the experience
• destroy(): void - Cleans up resources and removes event listeners

React Build (PixelStream)

Props

interface PixelStreamProps {
  expId: string; // Required: The experiment ID
  serviceUrls?: {
    // Optional: Custom service URLs
    sessionFetch?: string;
    pixelStreamBase?: string;
  };
  InitialScreen?: React.ReactNode; // Optional: Custom initial screen component
}

InitialScreen Usage

Core Build

The InitialScreen in the core build accepts an HTMLElement. You can create a custom loading screen with any HTML content and styles. The screen will be shown until the user clicks to start the experience.

Example:

const customInitialScreen = document.createElement('div');
customInitialScreen.innerHTML = `
  <div style="
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-family: Arial, sans-serif;
  ">
    <div style="text-align: center;">
      <h2>Welcome to the Experience</h2>
      <p>Click anywhere to start</p>
    </div>
  </div>
`;

React Build

The InitialScreen in the React build accepts any React component or element. You can create a custom loading screen component with JSX and React styles.

Example:

const CustomInitialScreen = () => (
  <div
    style={{
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'rgba(0, 0, 0, 0.8)',
      color: 'white',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <div style={{ textAlign: 'center' }}>
      <h2>Welcome to the Experience</h2>
      <p>Click anywhere to start</p>
    </div>
  </div>
);

License

MIT