{"_id":"360viewer","_rev":"3-aeb4048a6afe4c006fc542b56454409f","name":"360viewer","description":"360º video/image viewer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"360viewer","version":"1.0.0","description":"360º video/image viewer","main":"dist/kaleidoscope.min.js","jsnext:main":"dist/kaleidoscope.es.js","scripts":{"test":"mocha test.js","build":"rollup -c && cat dist/kaleidoscope.js | node_modules/.bin/uglifyjs --screw-ie8 -m -c > dist/kaleidoscope.min.js"},"repository":{"type":"git","url":"git+https://github.com/thiagopnts/360viewer.git"},"keywords":["360","video","image"],"author":{"name":"Thiago Pontes","email":"hello@thiago.me"},"license":"Apache-2.0","bugs":{"url":"https://github.com/thiagopnts/360viewer/issues"},"homepage":"https://github.com/thiagopnts/360viewer#readme","devDependencies":{"babel-core":"^6.7.6","babel-loader":"^6.2.4","babel-preset-es2015":"^6.6.0","babel-preset-es2015-rollup":"^1.1.1","mocha":"^2.4.5","rollup":"^0.33.0","rollup-plugin-babel":"^2.6.1","rollup-plugin-commonjs":"^3.0.2","rollup-plugin-node-resolve":"^1.7.1","rollup-plugin-strip":"^1.1.1","rollup-plugin-uglify":"^1.0.1","sinon":"^1.17.3","uglify-js":"^2.6.4"},"dependencies":{"threejs360":"^1.0.2"},"gitHead":"7b290aa2deb1e0a31aeaad9e0c5d37f014b2bb61","_id":"360viewer@1.0.0","_shasum":"1d43e66739605c37ded15bf95a2e52cb16b26ca2","_from":".","_npmVersion":"3.5.3","_nodeVersion":"5.5.0","_npmUser":{"name":"thiagopnts","email":"email@thiago.me"},"dist":{"shasum":"1d43e66739605c37ded15bf95a2e52cb16b26ca2","tarball":"https://registry.npmjs.org/360viewer/-/360viewer-1.0.0.tgz","integrity":"sha512-jc80wCuTVuVCFpEGkPvO1YYXGCio11wPH5LZU7am8r6tuS8Tl3cgFDj+rmcnWG6sDjg3sCD9aowiNZCvTKGnjg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzw6ksXe+5ItskbPPfxNNXoMkGDNkMxyUGPqvOpQDlHQIhAJNz4Mo1EJnMO66NYsCGjS/M4FMQXiQOAkhg62GkXUav"}]},"maintainers":[{"name":"thiagopnts","email":"email@thiago.me"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/360viewer-1.0.0.tgz_1466833955759_0.251613688422367"}}},"readme":"<img src=\"kaleidoscope.gif\" height=\"150\" width=\"100%\"/>\n# Kaleidoscope\nAn embeddable, lightweight, dependency-free 360º video/image viewer\n\n[demo](http://thiago.me/kaleidoscope)\n\n## Usage\nAdd the script to your page:\n```html\n<script src=\"dist/kaleidoscope.min.js\"></script>\n```\n\n#### Videos\n```js\nvar viewer = new Kaleidoscope.Video({source: 'equirectangular-video.mp4', containerId: '#target'});\nviewer.render();\n```\n\n#### Images\n```js\nvar viewer = new Kaleidoscope.Image({source: 'equirectangular-image.jpg', containerId: '#target'});\nviewer.render();\n```\n\n## Documentation\n\n#### Kaleidoscope.Video\n\n```js\nlet viewer = new Kaleidoscope.Video(options)\n```\n<dl>\n<dt>\noptions\n</dt>\n<dd>\nObject.\n</dd>\n</dl>\n\n`options.source` source video to be played.\n\n`options.containerId` is where you want to render the 360, this is going to be retrieved via `document.querySelector` and when you call `render()` the 360 canvas will be append to it.\n\n`options.container` HTML element to attach the 360 canvas to. You should always either pass a `containerId` or a `container`.\n\n`options.height` height of the 360 canvas. Defaults to `360`.\n\n`options.width` width of the 360 canvas. Defaults to `640`.\n\n`options.video` a video tag element to be used as source and rendered in the 360 canvas.\n\n`options.autoplay` to autoplay the video once rendered. Doesn't work on mobile. Defaults to `true`.\n\n`options.muted` to define if the video should start muted. Defaults to `false`.\n\n`options.loop` to define if the video should loop. Defaults to `false`.\n\n`options.onError` callback to when something goes wrong.\n\n`viewer.render()` renders the canvas in the defined `containerId` or `container`.\n\n`viewer.play()` starts the current video. Useful for mobile.\n\n`viewer.pause()` pauses the current video.\n\n#### Kaleidoscope.Image\n\n```js\nlet viewer = new Kaleidoscope.Image(options)\n```\n<dl>\n<dt>\noptions\n</dt>\n<dd>\nObject.\n</dd>\n</dl>\n\n`options.source` source of the image to be rendered.\n\n`options.containerId` is where you want to render the 360, this is going to be retrieved via `document.querySelector` and when you call `render()` the 360 canvas will be append to it.\n\n`options.container` HTML element to attach the 360 canvas to. You should always either pass a `containerId` or a `container`.\n\n`options.height` height of the 360 canvas. Defaults to `360`.\n\n`options.width` width of the 360 canvas. Defaults to `640`.\n\n`options.onError` callback to when something goes wrong.\n\n`viewer.render()` renders the canvas in the defined `containerId` or `container`.\n\n## Supported Browsers\n\n- Google Chrome\n- Microsoft Edge\n- Firefox\n- Internet Explorer 11\n- Safari\n- Chrome Android\\*\n- Safari iOS\n\n\\*Most recent versions.\n\n## Known issues\n\n360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some CORS [implementation bugs](https://bugs.webkit.org/show_bug.cgi?id=135379)\n","maintainers":[{"name":"thiagopnts","email":"email@thiago.me"}],"time":{"modified":"2022-06-12T14:07:15.223Z","created":"2016-06-25T05:52:38.405Z","1.0.0":"2016-06-25T05:52:38.405Z"},"homepage":"https://github.com/thiagopnts/360viewer#readme","keywords":["360","video","image"],"repository":{"type":"git","url":"git+https://github.com/thiagopnts/360viewer.git"},"author":{"name":"Thiago Pontes","email":"hello@thiago.me"},"bugs":{"url":"https://github.com/thiagopnts/360viewer/issues"},"license":"Apache-2.0","readmeFilename":"README.md"}