{"id":13515449,"url":"https://github.com/thiagopnts/kaleidoscope","last_synced_at":"2025-04-04T13:13:22.246Z","repository":{"id":57093020,"uuid":"56331331","full_name":"thiagopnts/kaleidoscope","owner":"thiagopnts","description":":crystal_ball: An embeddable, lightweight 360º video/image viewer","archived":false,"fork":false,"pushed_at":"2021-04-20T10:44:59.000Z","size":7857,"stargazers_count":349,"open_issues_count":12,"forks_count":54,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-23T00:31:38.233Z","etag":null,"topics":["360","360-video","javascript","video"],"latest_commit_sha":null,"homepage":"http://thiago.me/kaleidoscope/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thiagopnts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-15T15:42:34.000Z","updated_at":"2024-10-02T09:35:49.000Z","dependencies_parsed_at":"2022-08-22T21:40:12.251Z","dependency_job_id":null,"html_url":"https://github.com/thiagopnts/kaleidoscope","commit_stats":null,"previous_names":["thiagopnts/360viewer"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagopnts%2Fkaleidoscope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagopnts%2Fkaleidoscope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagopnts%2Fkaleidoscope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagopnts%2Fkaleidoscope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiagopnts","download_url":"https://codeload.github.com/thiagopnts/kaleidoscope/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182401,"owners_count":20897381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["360","360-video","javascript","video"],"created_at":"2024-08-01T05:01:11.481Z","updated_at":"2025-04-04T13:13:22.217Z","avatar_url":"https://github.com/thiagopnts.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","AR/VR/360"],"sub_categories":[],"readme":"\u003cimg src=\"kaleidoscope.gif\" height=\"150\" width=\"100%\"/\u003e\n\n# Kaleidoscope\n\nAn embeddable, lightweight, dependency-free 360º video/image viewer\n\n[demo](http://thiago.me/kaleidoscope)\n\n## Examples\n\nThe examples code can be found in the `examples/` folder.\n\n[Viewing 360 Images](http://thiago.me/kaleidoscope/examples/image)\n\n[Viewing 360 Videos with HLS](http://thiago.me/kaleidoscope/examples/hls)*\n\n[Viewing 360 Videos with DASH](http://thiago.me/kaleidoscope/examples/dash)*\n\n[Viewing 360 Videos with progressive download](http://thiago.me/kaleidoscope/examples/mp4)\n\n* The HLS and Dash examples doesn't work on old Safari and iOS due CORS restrictions\n\n## Usage\nGet the code:\n```bash\n$ npm install kaleidoscopejs\n```\n\nAdd the script to your page:\n```html\n\u003cscript src=\"node_modules/kaleidoscopejs/dist/kaleidoscope.min.js\"\u003e\u003c/script\u003e\n```\nor import the library using your favorite bundler.\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\u003cdl\u003e\n\u003cdt\u003e\noptions\n\u003c/dt\u003e\n\u003cdd\u003e\nObject.\n\u003c/dd\u003e\n\u003c/dl\u003e\n\n`options.source` source video to be played. This can be either a video tag or an url to the video file. Passing a tag is useful when embedding in player or using adaptative streaming. An example of how to use it with HLS.js can be found [here.](https://github.com/thiagopnts/kaleidoscope/issues/16#issuecomment-270478823)\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.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.initialYaw` number to define initial yaw of 360, should be in degrees(45, 90, 180 etc).\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`options.verticalPanning` disables vertical panning. Defaults to `false`.\n\n`options.onDragStart` callback called when user interaction starts.\n\n`options.onDragStop` callback called when user interaction ends.\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`viewer.centralize()` move camera back to the original center.\n\n`viewer.setSize({height, width})` sets canvas size.\n\n`viewer.destroy()` destroy viewer cleaning up all used resources.\n\n#### Kaleidoscope.Image\n\n```js\nlet viewer = new Kaleidoscope.Image(options)\n```\n\u003cdl\u003e\n\u003cdt\u003e\noptions\n\u003c/dt\u003e\n\u003cdd\u003e\nObject.\n\u003c/dd\u003e\n\u003c/dl\u003e\n\n`options.source` source of the image to be rendered. This can be either an url to the image or the img tag itself.\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.initialYaw` number to define initial yaw of 360, should be in degrees(45, 90, 180 etc).\n\n`options.verticalPanning` disables vertical panning. Defaults to `false`.\n\n`options.onDragStart` callback called when user interaction starts.\n\n`options.onDragStop` callback called when user interaction ends.\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.centralize()` move camera back to the original center.\n\n`viewer.setSize({height, width})` sets canvas size.\n\n`viewer.destroy()` destroy viewer cleaning up all used resources.\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\n## Donations\n\nWould you like to buy me a beer?\n\nETH 0x2230591c013e4E7e3B819B2B51496e34ED884c03\n\nBTC 16qKaBh6DuuJuaQp4x3Eut8MAsVnpacVm5\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagopnts%2Fkaleidoscope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiagopnts%2Fkaleidoscope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagopnts%2Fkaleidoscope/lists"}