VueJS

The example below serves as a foundational template for your experimentation. You will find a sample of a test stream in operation running with VueJS (latest version). Navigate through the HTML, CSS and Babel sections to understand the mechanics of the implementation. By selecting Edit on CodePen, you can further experiment with our WebSDK using your project's shareID in a fully interactive environment prior to integrating our solution into your application.

Code template

For a quick start, feel free to utilize the following code snippet as a template. It is pre-configured to assist you in beginning your project with ease.

Create a new file called PixelStreaming.vue

<template>
  <div id="video-container" ref="videoContainerRef" style="width: 100vw; height: 100vh"></div>
  <button @click="handleSendCommand({ test: 'Send command' })" class="button-interaction">
    Emit command to Unreal
  </button>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'
import * as PixelStreamingWebSdk from '@arcware-cloud/pixelstreaming-websdk'

export default {
  setup() {
    const videoContainerRef = ref(null)
    const arcwareApplication = ref(null)

    const handleSendCommand = (descriptor) => {
      if (arcwareApplication.value) {
        arcwareApplication.value.emitUIInteraction(descriptor)
      }
    }

    const initPixelStreaming = () => {
      const { Application } = PixelStreamingWebSdk.ArcwareInit(
        {
          shareId: 'share-d2477d89-0548-4785-9b9f-149071fb4fe3'
        },
        {
          initialSettings: {
            StartVideoMuted: true,
            AutoConnect: true,
            AutoPlayVideo: true
          },
          settings: {
            infoButton: true,
            micButton: true,
            audioButton: true,
            fullscreenButton: true,
            settingsButton: true,
            connectionStrengthIcon: true
          }
        }
      )

      arcwareApplication.value = Application
      videoContainerRef.value.appendChild(Application.rootElement)
    }

    onMounted(initPixelStreaming)

    return {
      videoContainerRef,
      handleSendCommand
    }
  }
}
</script>

<style scoped>
body {
  font-family: system-ui;
  background: #000;
  text-align: center;
  margin: 0;
  padding: 0;
  position: 'relative';
}

#app,
#video-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
}

#video-container video {
  left: 0;
  top: 0;
}

.button-interaction {
  position: absolute;
  width: 200px;
  right: 100px;
  bottom: 20px;
  margin: auto;
  z-index: 9;
}
</style>

Then import the component PixelStreaming.vue into your App.vue

<script setup lang="ts">
  import PixelStreaming from './components/PixelStreaming.vue'
</script>

<template>
  <main>
    <PixelStreaming />
  </main>
</template>