├── LICENSE
├── README.md
├── a-recorder.js
├── index.html
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 archilogic.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # aframe-recorder
 2 | Recording component for A-Frame using MediaRecorder
 3 | 
 4 | ## Getting Started
 5 | 
 6 | These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
 7 | 
 8 | ### Prerequisites
 9 | 
10 | This component is compatible with A-Frame 0.5, 0.6 and 0.7
11 | 
12 | ### Usage
13 | 
14 | To use this component, include the component as follows
15 | 
16 | ```html
17 | <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
18 | <script src="https://rawgit.com/archilogic-com/aframe-recorder/master/a-recorder.js"></script>
19 | <a-scene>
20 |   <a-entity recorder="recording.webm"></a-recorder>
21 |   <!-- insert the rest of your a-scene -->
22 | </a-scene>
23 | ```
24 | 
25 | To start recording, you can either
26 | 
27 | * send a `start` event to the component or
28 | * use `document.querySelector('[recorder]').components.recorder.start()`
29 | 
30 | To end the recording, you can either
31 | 
32 | * send a `stop` event to the component or
33 | * use `document.querySelector('[recorder]').components.recorder.stop()`
34 | 
35 | See [the live example here](https://archilogic-com.github.io/aframe-recorder/).
36 | 
37 | ## Deployment
38 | 
39 | This component is deployed via npm.
40 | 
41 | ## Built With
42 | 
43 | * [A-Frame](https://aframe.io)
44 | * [Canvas captureStream API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)
45 | * [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)
46 | 
47 | ## Contributing
48 | 
49 | All contributions are welcome. For typos, small bug fixes and small improvements, please feel free to submit a Pull Request.
50 | If you are not sure if you have found a bug or have some larger scale changes in mind, please open an issue so duplication of work and misunderstandings can be avoided.
51 | 
52 | ## Versioning
53 | 
54 | We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/archilogic-com/3dio-furniture-app/tags).
55 | 
56 | ## Authors
57 | 
58 | * **Ben Devine** - *Idea, Prototype* - [bnjm](https://github.com/bnjm)
59 | * **Martin Splitt** - *Code, Documentation* - [avgp](https://github.com/avgp)
60 | See also the list of [contributors](https://github.com/archilogic-com/a-recorder/contributors) who participated in this project.
61 | 
62 | ## License
63 | 
64 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
65 | 
66 | ## Acknowledgments
67 | 
68 | * [The A-Frame team](https://aframe.io/community/#a-frame-team) and community for building A-Frame and inspiring us to make 3D and VR on the web easier
69 | 


--------------------------------------------------------------------------------
/a-recorder.js:
--------------------------------------------------------------------------------
 1 | AFRAME.registerComponent('recorder', {
 2 | 
 3 |   schema: { type: 'string', default: 'recording.webm' },
 4 | 
 5 |   init: function () {
 6 |     this.el.addEventListener('start', this.start.bind(this))
 7 |     this.el.addEventListener('stop', this.stop.bind(this))
 8 |   },
 9 | 
10 |   start: function () {
11 |     var stream = this.el.parentNode.querySelector('canvas').captureStream(25)
12 |     this._recorder = new MediaRecorder(stream, { mimeType: 'video/webm' })
13 |     var frames = []
14 | 
15 |     this._recorder.ondataavailable = function (evt) {
16 |       if (evt.data) frames.push(evt.data)
17 |     }
18 | 
19 |     this._recorder.onstop = () => {
20 |       var fileBlob = new Blob(frames, { type: 'video/webm' })
21 |       var dataUrl = window.URL.createObjectURL(fileBlob)
22 |       var link = document.createElement('a')
23 |       link.href = dataUrl
24 |       link.download = this.data
25 |       link.click()
26 |     }
27 | 
28 |     this._recorder.start(100)
29 |   },
30 | 
31 |   stop: function () {
32 |     if(!this._recorder) return
33 |     this._recorder.stop()
34 |   }
35 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
 5 |   <script src="a-recorder.js"></script>
 6 | </head>
 7 | <body>
 8 |   <a-scene>
 9 |     <a-entity recorder="boring.webm"></a-entity>
10 |     <a-box position="0 1.6 -3" rotation="0 0 0" color="#4CC3D9">
11 |       <a-animation begin="start" attribute="rotation" to="0 0 360" dur="5000" easing="linear"></a-animation>
12 |     </a-box>
13 |     <a-sky color="#ECECEC"></a-sky>
14 |   </a-scene>
15 |   <script>
16 |     var recorder = document.querySelector('[recorder]')
17 | 
18 |     document.querySelector('a-scene').addEventListener('renderstart', () => {
19 |       recorder.dispatchEvent(new CustomEvent('start'))
20 |       document.querySelector('a-animation').emit('start')
21 |     })
22 | 
23 |     document.querySelector('a-animation').addEventListener('animationend', () => {
24 |       recorder.dispatchEvent(new CustomEvent('stop'))
25 |     })
26 |   </script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "a-recorder",
 3 |   "version": "1.0.0",
 4 |   "description": "Record A-Frame scenes with MediaRecorder",
 5 |   "main": "a-recorder.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/archilogic-com/aframe-recorder.git"
12 |   },
13 |   "keywords": [
14 |     "A-Frame",
15 |     "MediaRecorder"
16 |   ],
17 |   "author": "Martin Splitt <martin@3d.io>",
18 |   "license": "ISC",
19 |   "bugs": {
20 |     "url": "https://github.com/archilogic-com/aframe-recorder/issues"
21 |   },
22 |   "homepage": "https://github.com/archilogic-com/aframe-recorder#readme"
23 | }
24 | 


--------------------------------------------------------------------------------