VueJS

Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"

The example below demonstrates how to integrate the Arcware Pixel Streaming WebSDK into a Vue.js application (Vue 3).

This example shows how to:

• initialize the WebSDK inside a Vue component

• attach the stream to a DOM container using Vue refs

• send commands from the web interface to Unreal Engine

You can also experiment with this example using CodePen:

Open the Vue example on CodePen

Replace the example shareId with your own project Share ID to connect to your application.

---

Code Template

For a quick start, you can use the following implementation.

---

Step 1 — Create the PixelStreaming Component

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: "<your-shareId-goes-here>"
        },
        {
          initialSettings: {
            StartVideoMuted: true,
            AutoConnect: true,
            AutoPlayVideo: true
          },
          settings: {
            infoButton: true,
            micButton: true,
            audioButton: true,
            fullscreenButton: true,
            settingsButton: true,
            connectionStrengthIcon: true
          }
        }
      );

      arcwareApplication.value = Application;

      if (videoContainerRef.value) {
        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;
}

#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>

---

Step 2 — Import the Component

Now import the component into your main application file.

Example App.vue:

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

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

---

How This Example Works

1. Initialize the SDK

The ArcwareInit function creates the WebSDK components and prepares the streaming connection.

---

2. Mount the Stream

A Vue ref (videoContainerRef) is used to access the container element.

The SDK provides the streaming container via:

Application.rootElement

This element contains the video player and input handling logic.

---

3. Send Messages to Unreal Engine

The function

emitUIInteraction()

allows the web UI to send commands to the Unreal application.

In this example, clicking the button sends a simple test message.

---

Notes

• Replace <your-shareId-goes-here> with your project’s Share ID.

• The stream should always be mounted inside onMounted() to ensure the DOM container exists.

• Vue refs are used to safely access DOM elements inside the component lifecycle.