https://github.com/donmccurdy/aframe-proxy-controls

A-Frame component to proxy keyboard/gamepad controls between devices over WebRTC.
https://github.com/donmccurdy/aframe-proxy-controls

aframe webrtc websocket webvr

Last synced: 2 days ago
JSON representation

A-Frame component to proxy keyboard/gamepad controls between devices over WebRTC.

• Host: GitHub
• URL: https://github.com/donmccurdy/aframe-proxy-controls
• Owner: donmccurdy
• License: mit
• Archived: true
• Created: 2015-12-24T02:27:15.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-01-19T22:10:21.000Z (over 5 years ago)
• Last Synced: 2024-09-15T06:39:24.273Z (18 days ago)
• Topics: aframe, webrtc, websocket, webvr
• Language: JavaScript
• Homepage:
• Size: 301 KB
• Stars: 49
• Watchers: 7
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A-Frame `proxy-controls` Component

![Status](https://img.shields.io/badge/status-experimental-orange.svg)

[![License](https://img.shields.io/badge/license-MIT-007ec6.svg)](https://github.com/donmccurdy/aframe-proxy-controls/blob/master/LICENSE)

A-Frame component to proxy keyboard/gamepad controls between devices over WebRTC.

## Overview

With a mobile device / Google Cardboard for WebVR, designing the UI around a single button is an obstacle. This component provides an *experimental* way to proxy user input events (keyboard, perhaps Leap Motion later) from a keyboard-connected device to the mobile viewer.

For performance, WebRTC DataStreams are used to minimize latency between the devices. [Browser support for this standard is limited](http://caniuse.com/#feat=rtcpeerconnection) - notably, Safari (including all iPhone browsers) does not support it. I will consider adding fallback support via WebSockets in the future, if the latency is bearable.

## Usage

Add the `proxy-controls` component to the scene, and use one of the input controller components on the object(s) you want to control. For example:

```html

  

```

The `gamepad-controls` component is available separately, [here](https://github.com/donmccurdy/aframe-gamepad-controls).

## Options

Options are assigned with A-Frame's entity/component/property pattern:

```html

                                   

                                 

```

Property            | Default  | Description

--------------------|----------|-------------

enabled             | true     | Enables/disables event updates from the host.

debug               | false    | Enables/disables logging in the console.

proxyUrl            | https://proxy-controls.donmccurdy.com | URL of the remote proxy server / signaling server.

pairCode            | \ | Pair code that should be used to match with the remote host. If not provided, a random pair code is assigned.

enableOverlay       | true | Enables/disables the overlay UI showing the pair code.

enableOverlayStyles | true | Enables/disables the CSS used to style the pair code overlay.

## Events

When the pair code is available, a `proxycontrols.paircode` event is fired. If you want to hide the default overlay, use this to show the pair code to the user as needed:

```javascript

scene.addEventListener('proxycontrols.paircode', function (e) {

  console.log(e.detail.pairCode);

});

```