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-project-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-project-id>/

ShareId:

To connect to a private project, you will need to use the shareId feature. Instead of using the packageId property, you can now use the shareId property.

If you have defined multiple projects for the same shareId, you will need to provide both (packageId + shareId), otherwise the shareId is enough.

Here is an example of a shareId with only one project assigned:

 ...
 new WebRTCClient({
 ...
 // packageId: 'my-project-id', 
 // With only 1 project assigned to a shareId, no packageId has to be specified.
 shareId: 'share-afedf133-571e-48bb-85f7-38a62e1ffb4',
 ...
});
...

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.

Props:

The main props that our plugin can receive include:

  • address: Signalling WS URL,

  • packageId: Id of the project,

  • shareId: the share ID configured on the platform,

  • 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:

  • VueJS:

sizeContainer: this.$refs.sizeContainer,
container: this.$refs.videoContainer,
videoRef: this.$refs.videoRef,
audioRef: this.$refs.audioRef,
  • React:

sizeContainer: sizeContainerRef.current,
container: containerRef.current,
videoRef: videoRef.current,
audioRef: audioRef.current,
  • AngularJS:

sizeContainer: this.sizeContainer.nativeElement,
container: this.container.nativeElement,
videoRef: this.inputVideo.nativeElement,
audioRef: this.inputAudio.nativeElement,
  • Plain HTML:

sizeContainer: document.getElementById('sizeContainer');
container: document.getElementById('videoContainer');
videoRef: document.getElementById('videoRef');
audioRef: document.getElementById('audioRef');

For more details about the rest of the parameters, you can visit:

Props and Types

Implementing the plugin in different frameworks:

ReactAngularJSVueJSPlain HTMLExample WebRTC Plugin Applications

Last updated