@arcware/webrtc-plugin

Arcware WebRTC Plugin

Getting started

Our plugin enables any frontend to connect to Unreal Engine applications with pixel streaming enabled through signaling WS.

With the provided address parameter set to wss://signalling-client.ragnarok.arcware.cloud/, establishing a connection to our services has never been easier.

To identify your project, simply use the packageId parameter, which can be found in the URL of your project's page on our platform: https://platform.arcware.cloud/project/your-package-id/. This can be also found in the page details of your project within our platform.

With our plugin, you can easily establish a real-time streaming connection between your frontend and any Unreal Engine application hosted in our servers.

Address parameter: wss://signalling-client.ragnarok.arcware.cloud/

---

packageId parameter:https://platform.arcware.cloud/project/your-package-id/

---

Installation:

Before you can start using our plugin to connect your frontend to Unreal Engine applications, the first step is to install the package from:

https://www.npmjs.com/package/@arcware/webrtc-plugin

Or it can be easily installed from the npm registry using the following command:

npm i @arcware/webrtc-plugin

This will download and install the package to your local environment, allowing you to quickly and easily integrate it into your frontend and begin connecting to Unreal Engine applications.

---

Importing the package to your application:

• React:

import { webrtcPlugin } from "@arcware/webrtc-plugin";

• AngularJS:

import { webrtcPlugin } from "@arcware/webrtc-plugin";

• VueJS:

import webrtcPlugin from "@arcware/webrtc-plugin";

• Plain HTML:

<script type="module">
  import { WebRTCClient } from "https://unpkg.com/@arcware/webrtc-plugin@latest/index_new.umd.js">
</script>

Once you've imported the plugin, you can use it in your code to establish a connection between your frontend and any Unreal Engine application.

Important: Don't forget to set the address and packageId parameters as necessary to establish your connection.

---

Props:

The main props that our plugin can receive include:

address: Signalling WS URL,
packageId: Name of the package (if there are multiple applications),
settings: {},
playOverlay: true,   // Set default overlay with play button. Make it false and use loader
loader: (val) => {},   // Callback for loading screen, etc. Once stream is ready, the function will be triggered with false value.
applicationResponse: (response) => {},   // Callback for Unreal Engine application messages.

The container-related props can receive different values depending on the framework you are using:

• React:

sizeContainer: sizeContainerRef.current,
container: containerRef.current,
videoRef: videoRef.current,

• AngularJS:

sizeContainer: this.sizeContainer.nativeElement,
container: this.container.nativeElement,
videoRef: this.inputVideo.nativeElement,

• VueJS:

sizeContainer: this.$refs.sizeContainer,
container: this.$refs.videoContainer,
videoRef: this.$refs.videoRef,

• Plain HTML:

sizeContainer: document.getElementById("sizeContainer");
container: document.getElementById("videoContainer");
videoRef: document.getElementById("videoRef");

---

For more details about other parameters, you can visit:

https://docs.arcware.cloud/web-integration/web-sdk-plugin/props-and-types

---

Implementing the plugin in different frameworks:

• React

• AngularJS

• VueJS

• PlanHTML

• Example Web SDK applications

---

Note

For further information such as props, containers, and examples of applications, please visit our documentation site: Arcware CloudRT Technical Documentation