IMS - Immersive Media Spots

A lightweight collection of web components for immersive media visualization.

Widgets

ims-diff

An image comparison widget with slider control. Perfect for before/after visualizations.

<ims-diff src-data="./diff-data.json"></ims-diff>

Configuration example:

{
  "imsType": "diff",
  "version": "<VERSION>",
  "urlTemplate": "https://your-cdn.com/{UID}/{VARIANT}",
  "variants": ["320", "640", "860", "1024"],
  "cdnIdList": ["image1-id", "image2-id"],
  "filters": ["grayscale(100%)", "none"]
}

ims-gallery

An interactive image gallery with touch support and fullscreen capabilities.

<ims-gallery src-data="./gallery-data.json"></ims-gallery>

ims-pano

A 360° panorama viewer with touch/mouse controls and zoom functionality.

<ims-pano src-data="./pano-data.json"></ims-pano>

Configuration example:

{
  "imsType": "pano",
  "version": "<VERSION>",
  "autoplay": false,
  "urlTemplate": "https://your-cdn.com/{UID}/{VARIANT}",
  "variants": ["640", "1024", "2048"],
  "cdnIdList": ["panorama-image-id"]
}

ims-spinner

A 360° object viewer that supports sequence animation and interactive rotation.

<ims-spinner src-data="./spinner-data.json"></ims-spinner>

Configuration example:

{
  "imsType": "spinner",
  "version": "<VERSION>",
  "autoplay": true,
  "speed": 50,
  "showCover": true,
  "urlTemplate": "https://your-cdn.com/{UID}/{VARIANT}",
  "variants": ["320", "640", "1024"],
  "cdnIdList": ["frame1-id", "frame2-id", "..."]
}

ims-video

A video player component with HLS support, captions, and customizable controls.

<ims-video src-data="./spinner-data.json"></ims-video>

Configuration example:

{
  "imsType": "video",
  "version": "<VERSION>",
  "autoplay": true,
  "coverUrl": "<COVER_IMAGE_URL>",
  "showCover": true,
  "hlsSrc": "<HLS_SOURCE_PATH>",
  "sources": "<SOURCE_DESCRIPTIONS>",
  "tracks": []
}

ims-viewer

Universal component, that loads dependencies dynamically using CDN with the certain application version support.

<ims-viewer src-data="./spinner-data.json"></ims-viewer>

ims-model

A 3D model viewer for GLTF/GLB files with orbit controls, auto-rotation, and zoom. Powered by Three.js.

<ims-model src-data="./model-data.json"></ims-model>

Configuration example:

{
  "imsType": "model",
  "version": "<VERSION>",
  "autoplay": true,
  "fov": 45,
  "bgColor": "#1a1a2e",
  "srcList": ["https://example.com/model.glb"]
}

ims-audio

An audio player with real-time waveform visualization using the Web Audio API.

<ims-audio src-data="./audio-data.json"></ims-audio>

Configuration example:

{
  "imsType": "audio",
  "version": "<VERSION>",
  "autoplay": false,
  "loop": true,
  "waveformColor": "rgba(79, 195, 247, 0.4)",
  "progressColor": "rgba(79, 195, 247, 0.6)",
  "srcList": ["https://example.com/track.mp3"]
}

ims-story

A sequential media narrative that chains multiple IMS widgets as slides with navigation and captions.

<ims-story src-data="./story-data.json"></ims-story>

Configuration example:

{
  "imsType": "story",
  "version": "<VERSION>",
  "slides": [
    { "src": "./slide1.json", "caption": "First look" },
    { "src": "./slide2.json", "caption": "Details" }
  ]
}

Installation & Usage

1. Include the necessary common dependencies via CDN or the files in your project structure:

<script type="importmap">
  {
    "imports": {
      "@symbiotejs/symbiote": "https://cdn.jsdelivr.net/npm/@symbiotejs/symbiote@3/+esm",
      "three": "https://cdn.jsdelivr.net/npm/three@0.171.0/+esm",
      "hls.js": "https://cdn.jsdelivr.net/npm/hls.js@1"
    }
  }
</script>

2. Connect the desired component from CDN or your own built files:

<script type="module" src="https://cdn.jsdelivr.net/npm/interactive-media-spots@<VERSION>/wgt/viewer/index.js"></script>

3. (Optional) If you need to use the npm package (Data types, etc), install it:

npm install interactive-media-spots

4. Use the universal tag in your HTML:

<ims-viewer src-data="./data.json"></ims-viewer>

In this case, the component will load dependencies dynamically using CDN with the certain application version support.

Or use the specific content tag. For example:

<ims-spinner src-data="./data.json"></ims-spinner>

5. You can override the settings for each specific embed using HTML tag attributes.

<ims-spinner src-data="./data.json" autoplay="false" speed="100"></ims-spinner>

Common Features

All our widgets support:

• Adaptive content loading to optimize traffic and enhance page loading speed
• Adaptive DPI support
• Full-screen display mode
• Mobile device compatibility
• Alpha channel support for transparent backgrounds and background settings
• Easy universal integration using a custom HTML tag, without the need for JavaScript
• Seamless integration with all modern frameworks: React, Vue, Angular, etc.
• On-demand dynamic loading of necessary dependencies
• Simple and effective version management for widgets and required data
• Direct data encoding within images for use with specialized CDNs
• JSON for data and configuration transfer, both as static files and via API
• Ability to override settings for each specific embed using HTML tag attributes
• Flexible UI customization via standard CSS
• Compatibility with all popular modern frameworks
• Autogenerated URLs for used images to facilitate working with CDNs
• HLS (HTTP Live Streaming) support for video
• Watermarking for copyright protection
• Lazy loading with IntersectionObserver
• Plugin system for extensibility
• Theming via CSS design tokens
• Interactive hot spots for linking to other content (Coming soon!)

IMS is supported by all current versions of popular browsers.

Articles and Demos

• Concept details and live demo

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © rnd-pro.com