Initial Commit

Author: ProGamerGov

CITATION.cff

@@ -0,0 +1,20 @@
+abstract: "360 degree image and video viewer"
+authors:
+  - family-names: Egan
+    given-names: Ben
+cff-version: 1.2.0
+date-released: "2025-05-12"
+keywords:
+  - "image viewer"
+  - "video player"
+  - 360
+  - panorama
+  - equirectangular
+  - viewer
+  - "360 degrees"
+  - "360 degree image"
+  - research
+license: MIT
+message: "If you use this software, please cite it using these metadata."
+repository-code: "https://github.com/ProGamerGov/html-360-viewer"
+title: "Browser-Based Viewer for 360 Images and Videos"

LICENSE

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

ReadMe.md

@@ -0,0 +1,97 @@
+# 360° Image & Video Viewer
+
+A lightweight, browser-based viewer for 360-degree images and videos. No additional setup required, just open the HTML file in any modern browser.
+
+
+<div align="left">
+ <img src="examples/example_image.png" width="710px">
+</div>
+
+Try it out here: https://progamergov.github.io/html-360-viewer
+
+Supports:
+
+* 360° panoramic **images**, most formats supported by browsers, like [JPEG](https://en.wikipedia.org/wiki/JPEG) (includes '.jpg'), [PNG](https://en.wikipedia.org/wiki/PNG), [WebP](https://en.wikipedia.org/wiki/WebP), etc.
+* 360° **videos** in [.mp4](https://en.wikipedia.org/wiki/MP4_file_format) and [.webm](https://en.wikipedia.org/wiki/WebM) format. Works as a 360 video player.
+* Monoscopic 360 images and stereo images in **top-bottom** and **left-right** layouts
+
+
+## 🧪 Compatibility
+
+Work on all major web browsers that [A-Frame](https://aframe.io/docs/1.7.0/introduction/faq.html) supports.
+
+* [Firefox](https://en.wikipedia.org/wiki/Firefox)
+* [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) (including Chromium based browsers like [Brave](https://en.wikipedia.org/wiki/Brave_(web_browser)) & [Opera](https://en.wikipedia.org/wiki/Opera_(web_browser)))
+* [Microsoft Edge](https://en.wikipedia.org/wiki/Microsoft_Edge)
+* [Safari](https://www.apple.com/ca/safari/)
+
+
+## 🚀 Features
+
+* **Drag & Drop** support for instant media viewing
+* **Stereo toggle** switch between monoscopic and stereo images (mono/top-bottom/side-by-side)
+* **Zooming** via mouse wheel or pinch gesture
+* **Interactive panning** with mouse or touch
+* **Fullscreen** mode via the bottom right button.
+* **Screenshot** functionality (UI hidden in capture)
+* **Video controls**: play/pause, timeline slider
+
+
+## 📦 Getting Started
+
+**Option 1 – Local Use**
+
+1. Download or clone this repository.
+2. Open `viewer360.html` in your browser.
+3. Drag and drop a supported 360° image or video file, or click "Select Media" to browse.
+
+**Option 2 – Web Demo**
+
+1. Visit the [live demo](http://progamergov.github.io/html-360-viewer) in your browser.
+2. Upload a 360° image or video to start viewing.
+
+**Option 3 – Local Copy**
+
+1. Copy the full contents of `viewer360.html` into a new text file.
+2. Rename the file to something like `viewer360.html` (make sure it ends in `.html`).
+3. Open it in your browser.
+
+
+## 🕹️ Controls
+
+| Action             | How to Use                           |
+| ------------------ | ------------------------------------ |
+| Pan View           | Left-click + drag or touch + drag    |
+| Zoom               | Mouse wheel or pinch gesture         |
+| Fullscreen         | Use the browser's fullscreen control |
+| Stereo Toggle      | Bottom-left “Stereo” button          |
+| Screenshot         | Camera icon at bottom center         |
+| Upload/Reset Media | “Upload” button below controls       |
+| Play/Pause Video   | Play/pause button on video controls  |
+| Seek in Video      | Use the timeline slider              |
+
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+
+## 🔬 Citation
+
+If you use this library in your research or project, please refer to the included [CITATION.cff](CITATION.cff) file or cite it as follows:
+
+### BibTeX
+```bibtex
+@misc{egan2025browser360html,
+  title={Browser-Based Viewer for 360 Images and Videos},
+  author={Egan, Ben},
+  year={2025},
+  publisher={GitHub},
+  howpublished={\url{https://github.com/ProGamerGov/html-360-viewer}}
+}
+```
+
+### APA Style
+```
+Egan, B. (2025). Browser-Based Viewer for 360 Images and Videos [Computer software]. GitHub. https://github.com/ProGamerGov/html-360-viewer
+```