@arcware/webrtc-plugin
Advanced tools
Javascript/Typescript module to connect any frontend to Unreal Engine 4 app with pixel streaming enabled through signalling WS.
Javascript/Typescript module to connect any frontend to Unreal Engine 4 app with pixel streaming enabled through signalling WS.
import { WebRTCClient } from "@arcware/webrtc-plugin";
// Vue template
<div ref="sizeContainer">
<div ref="videoContainer">
<video ref="videoRef" />
</div>
</div>
// React template
const sizeContainerRef = React.useRef();
const containerRef = React.useRef();
const videoRef = React.useRef();
<div ref={sizeContainerRef}>
<div ref={containerRef}>
<video ref={videoElRef} />
</div>
</div>;
// Angular template
<div #sizeContainer>
<div #container>
<video #videoEl></video>
</div>
</div>
@ViewChild("videoEl") inputVideo!: ElementRef;
@ViewChild("container") container!: ElementRef;
@ViewChild("sizeContainer") sizeContainer!: ElementRef;
// Initialize WebRTC
const args = {
address: "Signalling WS URL",
packageId: "Name of the package (if there are multiple applications)",
settings: {},
// --- Containers Options ---
// Vue
sizeContainer: this.$refs.sizeContainer,
container: this.$refs.videoContainer,
videoRef: this.$refs.videoRef,
// React
sizeContainer: sizeContainerRef.current,
container: containerRef.current,
videoRef: videoRef.current,
// Angular
sizeContainer: this.sizeContainer.nativeElement,
container: this.container.nativeElement,
videoRef: this.inputVideo.nativeElement,
// --- ---
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.
};
const webrtc_client = new WebRTCClient(args);
const emitUIInteraction = webrtc_client.emitUIInteraction; // Method to send descriptors to UE4 app
// <script> with index.html example implementation
<head>
<script type="module">
import { WebRTCClient } from "https://unpkg.com/@arcware/webrtc-plugin@latest/index_new.umd.js";
window.addEventListener("load", function () {
const args = {
address: "Signalling WSS URL",
packageId: "id/alias of the package",
settings: {},
sizeContainer: "container",
playOverlay: true,
};
this.webrtc = new WebRTCClient(args);
});
</script>
</head>
<body style="background: black; margin: 50px">
<div id="container"></div>
</body>
// React/Next example implementation
const sizeContainerRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
let webrtc_client: WebRTCClient;
useEffect(() => {
const args: WebRTCClientProps = {
address: "Signalling WSS URL",
packageId: "id/alias of the package",
sizeContainer: sizeContainerRef.current as HTMLDivElement,
container: containerRef.current as HTMLDivElement,
videoRef: videoRef.current as HTMLVideoElement,
settings: {},
sizeContainer: "container",
playOverlay: true,
};
// it's protection from double-load, due to React 18 double-render feature on dev environment.
if (!webrtc_client) webrtc_client = new WebRTCClient(args);
});
Please follow to WebRTCClientProps interface exported from module to check properties types
FAQs
### Getting started
The npm package @arcware/webrtc-plugin receives a total of 665 weekly downloads. As such, @arcware/webrtc-plugin popularity was classified as not popular.
We found that @arcware/webrtc-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."