aframe-motion-capture

A-Frame motion capture components record pose and events from entities (i.e., camera and tracked controllers) and be replayed or persisted to JSON. The motion capture components allow to emulate the presence of a VR headset and controllers. We can build test automation for VR experiences. One can replay the recorded user behavior and assert the state of the entities at the end. This can happen with no user intervention at all. We can also record user interactions and develop on the go where there's no VR hardware available. One can iterate over the visual aspect or behavior of the experience using the recorded user input

Usage

WebVR Recording

Set the avatar-recorder on the scene. Make sure your controllers have ids. Then hit <space> to toggle recording. A JSON will automatically be downloaded once the recording finishes.

<a-scene avatar-recorder>
  <a-entity id="controller1" hand-controls"></a-entity>
  <a-entity id="controller2" hand-controls"></a-entity>
</a-scene>

WebVR Replaying

Specify the path to a captured WebVR recording JSON file. Hit p to toggle playback.

<a-scene avatar-replayer="src: recording.json">
  <a-entity id="controller1" hand-controls"></a-entity>
  <a-entity id="controller2" hand-controls"></a-entity>
</a-scene>

API

Keyboard Shortcuts

Key	Description
space	Toggle recording.
c	Clear recording from localStorage and memory.
p	Toggle replaying.

avatar-recorder

Property	Description	Default Value
autoPlay		true
autoRecord		false
binaryFormat		false
localStorage		false

avatar-replayer

Property	Description	Default Value
loop		false
src		''
spectatorMode		false

motion-capture-replayer

Property	Description	Default Value
enabled		true
loop		true
recorderEl	Selector.	null
src		''

motion-capture-recorder

Property	Description	Default Value
autoStart		false
enabled		true
hand		'right'
persistStroke		false
visibleStroke		true

stroke

Trace of the path of an entity.

Property	Description	Default Value
color		#EF2D5E
enabled		true

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>Motion Capture</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-motion-capture/dist/aframe-motion-capture.min.js"></script> 
</head>
 
<body>
  <a-scene avatar-recorder avatar-replayer></a-scene>
</body>

npm

Install via npm:

npm install aframe-motion-capture

Then require and use.

require('aframe');
require('aframe-motion-capture');

aframe-motion-capture