For Web Developers

Website Integration Options

Three ways to surface an AmeniVue camera on your existing website. Pick the one that fits your site’s performance budget and visual goals. All three deliver the same end experience to your visitors.

This is a delivery spec, not a public sandbox.

The URLs in the code samples below use placeholders like {your-stream-id}. The actual stream IDs, embed URLs, and snapshot endpoints are provisioned and shared with your developer during account onboarding — they aren’t pre-existing public URLs you can hit today. Domain locking, public-camera flags, and final URL structure are configured for your property specifically.

Quick comparison

Concern	A. Embed	B. Preview + Link	C. Link Only
Page load impact	Heavy	Light	None
Visual impact	High (live)	High (looks live)	Low
Mobile responsiveness	Depends on CSS	Native	Native
CSP / security headaches	Possible	None	None
Implementation effort	Minimal	Small	Trivial
Updates when cameras change	May need code	No code change	No code change

Option A — iframe Embed

Drop the live camera player directly onto a page on your site. The video stream loads alongside your page content.

Pros

Visitors see live footage without leaving your site
Strong visual impact on landing or marketing pages
Familiar pattern for content authors

Cons

Loads the video stream on every page view, even for visitors who don't watch
Mobile rendering depends on your container CSS — easy to get wrong
May conflict with Content-Security-Policy directives on stricter sites
Adds bandwidth and CPU cost to the host page

Best For

Marketing landing pages where the live feed is the primary visual draw and the host site has loose CSP / good mobile CSS.

Sample code

<!-- Drop this anywhere in your HTML -->
<iframe
  src="https://amenivue.com/embed/{your-stream-id}"
  width="100%"
  height="auto"
  style="aspect-ratio: 16/9; border: 0;"
  allow="autoplay; fullscreen"
  loading="lazy"
  title="Live camera"
></iframe>

Recommended

Option B — Snapshot Preview + Link

Display an auto-refreshing snapshot image (updates every 30–60 seconds) on your site. Clicking the image opens the full live AmeniVue viewer in a new tab.

Pros

Lightweight — just an image, no video stream loading
Marketing-friendly — looks live without the bandwidth cost
Works perfectly on every device with no CSS gymnastics
No CSP conflicts; image loads from a single CDN domain
Click-through rate is measurable separately from page traffic

Cons

Not truly live until the visitor clicks through
Requires one extra click to see the actual video

Best For

Most websites. Best balance of visual appeal, performance, and maintainability. Recommended default.

Sample code

<!-- Auto-refreshing snapshot that opens the live viewer on click -->
<a
  href="https://amenivue.com/view/{your-stream-id}"
  target="_blank"
  rel="noopener"
  style="display: block; max-width: 800px;"
>
  <img
    src="https://amenivue.com/snapshot/{your-stream-id}/latest.jpg"
    alt="Live camera preview"
    style="width: 100%; height: auto; display: block;"
  />
  <span style="display: block; padding: 8px; text-align: center;">
    Click to watch live
  </span>
</a>

<!-- Optional: refresh the image every 60 seconds -->
<script>
  setInterval(function () {
    var img = document.querySelector('img[alt="Live camera preview"]');
    if (img) img.src = img.src.split('?')[0] + '?t=' + Date.now();
  }, 60000);
</script>

Option C — Direct Link or Button

A simple text link or button on your site that opens the full AmeniVue viewer. No image, no embed.

Pros

Zero impact on host site performance
Simplest possible implementation
Works in any context (email, PDF, blog post)

Cons

No visual draw — visitors must already be motivated to click
Less marketing impact than a live image

Best For

Resident portals, internal pages, footers, or anywhere a visual preview isn't needed.

Sample code

<!-- Plain link -->
<a href="https://amenivue.com/view/{your-stream-id}" target="_blank" rel="noopener">
  Watch live camera
</a>

<!-- Or as a button -->
<a
  href="https://amenivue.com/view/{your-stream-id}"
  target="_blank"
  rel="noopener"
  style="display:inline-block; padding: 12px 24px; background: #2563eb; color: white; text-decoration: none; border-radius: 8px;"
>
  Watch live camera
</a>

Technical notes

Streaming protocol

Live video uses HLS (HTTP Live Streaming) with H.264. Falls back gracefully on older browsers via HLS.js. No plugins required. Works on iOS, Android, and modern desktop browsers.

HTTPS required

All AmeniVue resources are served over HTTPS only. Mixed content (HTTP host page embedding HTTPS resources) is fine, but the host page should also be HTTPS for best browser compatibility.

Domain locking

Embeds and snapshots can be locked to specific domains during setup. This prevents the camera URL from being scraped and reused on unauthorized sites.

Bandwidth

Live stream: typically 1.5–2 Mbps per concurrent viewer. Snapshot images: 50–200 KB per refresh. Embed traffic is served from our infrastructure, not the host site.

Mobile behavior

All three options are mobile-friendly. iOS will respect the silent autoplay restriction — videos start muted by default and the user taps to unmute. Snapshot previews and direct links sidestep this entirely.

CSP headers

If your site uses a strict Content-Security-Policy, embed options need to whitelist amenivue.com in frame-src. Snapshot preview only needs img-src. Direct link needs nothing.

Our recommendation

For most properties, Option B (Snapshot Preview + Link) delivers the best balance: it looks alive on your homepage, costs almost nothing in page load, and gives the visitor a clear path to the full live experience without any CSP or mobile headaches.

We’re happy to set up whichever option fits your site best — or a combination (e.g., snapshot preview on the home page, full embed on a dedicated “Live View” page). The choice doesn’t change platform pricing.

Questions?

Send your developer’s questions to our team and we’ll work directly with them on the integration.