aframe-motion-capture

0.1.0 • Public • Published

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');

Package Sidebar

Install

npm i aframe-motion-capture

Weekly Downloads

8

Version

0.1.0

License

MIT

Last publish

Collaborators

  • dmarcos