aframe-camera-recorder-component
v1.5.0
Published
A component to film and record A-Frame scenes with a controlled camera (pans, dollies, tilts).
Downloads
12
Readme
aframe-camera-recorder-component
A component to smoothly film and record A-Frame scenes to GIF with a controlled camera using ccapture.js.
API
| Property | Description | Default Value | | -------- | ----------- | ------------- | | dur | Length of video. | 3000 | | enabled | Whether to listen to play events. | true | | framerate | Framerate of capture. More takes longer to process. | 60 | | lookAt | Point (vec3) for camera to focus on (optional). | null | | holdTimeAfter | Duration to keep recording after camera animation finishes. | 250 | | motionBlurEnabled | Not sure if this does anything, parameter passed to CCapture.js. | true | | name | Download file name. | '' | | quality | Quality...I think this goes from 0 to 10? | 10 | | positionFrom | Camera starting position to animate from. | 0 0 0 | | positionTo | Camera starting position to animate to . | 0 0 0 | | rotationFrom | Camera starting rotation. | 0 0 0 | | rotationTo | Camera end rotation. | 0 0 0 | | showControls | Whether to inject buttons to control the recording (e.g., preview, record). | true | | workers | Number of workers used to process the GIF. Best to use the same amount of cores as the CPU. | 8 | | workerPath | Path to the required worker JS file to process the GIF. | https://rawgit.com/ngokevin/kframe/master/components/camera-recorder/ |
Converting to Video
The GIF will be large file size that can be reduced to like 70x smaller file size to mp4. Here is an ffmpeg command:
ffmpeg -i mygif.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" myvideo.mp4
Installation
Browser
Include the worker file on a path that can be referenced. Defaults to hosted version
at https://rawgit.com/ngokevin/kframe/master/components/camera-recorder/gif.worker.js.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-camera-recorder-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity camera camera-recorder="positionTo: -1 1.6 -7; lookAt: -8 5 8" position="5 1.6 0"></a-entity>
</a-scene>
</body>npm
Install via npm:
npm install aframe-camera-recorder-componentThen require and use.
require('aframe');
require('aframe-camera-recorder-component');