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:

We have made the decision to make all projects private in the future, and this change will affect how you use the plugin.

Please be aware that all new projects will now be created as private. If your project is currently public and you change it to private, there will be no way to revert back to a public setting.

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.

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

React

AngularJS

VueJS

Plain HTML

Example WebRTC Plugin Applications