Integrating Imou Cloud Live into an H5 Mobile Web Page

Description and use

Integrating Imou Cloud Live into an H5 mobile page ensures reliable streaming by enforcing inline playback, muted autoplay, and proper cleanup on visibility change, while restricting the tile to Cloud Live streams only.

Problem

Mobile web pages need to stream live video from Imou devices securely and efficiently, avoiding common pitfalls like autoplay blocks, fullscreen takeover, mixed content, and resource leaks.

Outcome

The H5 integration now reliably streams Imou Cloud Live on mobile browsers, respecting autoplay policies, inline playback, and resource cleanup, while preventing misuse of non‑Cloud Live streams.

Workflow

• 1. User navigates to H5 page.
• 2. Page calls backend API to open Cloud Live with externalId.
• 3. Backend returns a Cloud Live handle.
• 4. Frontend mounts h5Player with {inline:true, muted:true}.
• 5. Listen for visibilitychange or webview hide events.
• 6. On hide, destroy the player to free resources.
• 7. Log runtime state (safari|chrome|webview) and status (denied|offline|media).
• 8. Ensure HTTPS page and playlist origin match to avoid mixed content.
• 9. Reject any handle that is not of kind "cloud-live" via assertCloudLiveHandle.

Evidence

I set inline playback on iOS, I do not promise unmuted autoplay, and I destroy the player when the page hides.

Source

If Cloud Live’s family includes RTMP as a publish or relay path, I still play the HTTP-delivered member the JavaScript player documents.

Source