stereo-img

1.18.0 • Public • Published

<stereo-img>

<stereo-img> is a web component to display stereographic pictures on web pages, with VR support. It supports various stereo picture formats: VR Photos (VR180, Google Camera panorama, Photosphere), left-right, and anaglyph.

See the demo for an example.

How to use

Load the module:

<script type="module" src="https://stereo-img.steren.fr/stereo-img.js"></script>

Then use the <stereo-img> custom element anywhere in your page or app, reference a stereo picture in the src attribute:

<stereo-img src="picture.vr.jpg"></stereo-img>

Alternatively, you can serve the module from your own server, install it via npm:

npm install stereo-img

Attributes

  • src: (Required) source of the stereo picture (absolute or relative)
  • type: (Optional) type of stereo picture:
    • If unset, type is inferred from heuristics
    • vr: VR Photo - VR180, Google Camera panorama, Cardboard Camera, Photosphere images (Where right eye image and angle of view info are embedded in the image metadata)
    • left-right: left eye on the left, right eye on the right, Exif angle of view is used if present.
    • right-left: left eye on the right, right eye on the left, Exif angle of view is used if present.
    • top-bottom: left eye on the top, right eye on the bottom, Exif angle of view is used if present.
    • bottom-top: left eye on the bottom, right eye on the top, Exif angle of view is used if present.
    • anaglyph: Anaglyph 3D - currently only supporting red / green
  • angle: (Optional) hint at angle of view for left-right or top-bottom types
    • If unset, Exif angle of view is used if present.
    • 180: Half sphere (VR180)
    • 360: Full sphere
  • projection: (Optional) hint at projection (most VR pictures use equirectangular projection)
    • If unset, projection is inferred from heuristics.
    • fisheye: Fisheye projection
  • wiggle: (Optional) When viewing in 2D, alternate between left and right images to help the user see the 3D effect
    • enabled: wiggle is enabled
    • disabled: wiggle is disabled

Compatibility

Supported cameras

This component has been manually tested to load pictures taken with the following cameras:

Status Camera Picture type Attributes required Field of view Orientation
✔️ Lenovo Mirage Camera unprocessed (VR180) (none)
✔️ Canon RF5.2mm F2.8 L Duel Fisheye unprocessed (none) X X
✔️ Canon RF5.2mm F2.8 L Duel Fisheye processed with EOS VR Utility (none) X X
✔️ CALF VR180 left-right (none) X X
✔️ CALF VR180 "vr180" angle="180" X X
✔️ Kandao QooCam EGO 3D Camera left-right (none) X X
Vision Pro

Viewers and headsets

This component has been manually tested on the following hardware, OS and browsers:

Hardware OS Browser Status
HTC Vive Windows Chrome ✔️
HTC Vive Windows Firefox ✔️⚠️ With WebXR polyfill
HTC Vive Windows Firefox Reality ✔️
Cardboard Android Chrome ✔️
Cardboard Android Firefox
Cardboard iOS #18
Quest 1 Default ✔️
Quest 2 Default ✔️️
Vision Pro Safari #34

Installing using npm

Instead of a CDN, you can install the module locally using npm:

npm install stereo-img

Then, use a JavaScript builder or import-maps to load the module and its dependencies:

If using import-maps:

<!-- Shim for importmap -->
<script async src="https://unpkg.com/es-module-shims@1.3.0/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "stereo-img": "./node_modules/stereo-img/stereo-img.js",
      "exifr": "./node_modules/exifr/dist/full.esm.js",
      "three": "./node_modules/three/build/three.module.js",
      "three/": "./node_modules/three/"
    }
  }
</script>

Then load the stereo-img module:

<script type="module">import "stereo-img";</script>

Contributing

See development instructions and contribution guidelines

Package Sidebar

Install

npm i stereo-img

Weekly Downloads

5

Version

1.18.0

License

Apache-2.0

Unpacked Size

887 kB

Total Files

19

Last publish

Collaborators

  • steren